shadcn.io is not affiliated with official shadcn/ui
Chat Appearance Settings Block for React Aria
Three reading settings for a thread, a text size slider, compact or comfortable density and bubbles or flat rows, with a live thread that obeys them at once and a foot that counts unsaved changes.
Installation
Overview
Let people choose how a thread reads, with these chat appearance settings for React with React Aria. A hairline frame with a plus mark on each corner holds a controls band over a live thread. The band has a Slider for text size (13 to 18 px in steps of 1) and two Segment Groups, Density (Compact or Comfortable) and Message style (Bubbles or Flat). Under it five typed Message and Bubble rows obey the choices as you make them: the style swaps outlined bubbles for plain rows, the density changes the spacing and a CSS variable carries the text size. The foot counts what is not saved yet ("2 changes not saved yet."), Save changes in a Shine Button keeps them in this page, and Reset returns to the defaults. Only the preview changes, every colour comes from the theme's own tokens, the frame is ruled by Guides and everything moves with CSS only. It's the starting point for a reading preferences screen in a messenger or a team chat.
FAQ
What stays in the page, and how do I make it real?
Everything. Save changes copies the three choices into a second piece of state so the foot stops counting; nothing is written anywhere and this page keeps its own theme. To make it real, store the three values per user from save (an API field or localStorage) and read them where your thread renders, as the live thread here does.
How do the settings change the look without hard-coded colours?
The thread only swaps classes and one CSS variable. Style picks the Bubble variant (outline and secondary for Bubbles, ghost for Flat), density picks spacing classes, and --chat-size is set on the list and read by the text. No colour is written, so the thread follows the site's theme in light, dark and any custom preset.
What do Save changes and Reset do?
Save changes is quiet while nothing differs from the saved look, says "No changes to save." if pressed then, and otherwise saves and answers "Saved in this demo." Reset puts the three choices back to the product defaults, Comfortable, Bubbles and 15 px, and the foot counts what that changed from your saved look.
What if the text is large?
The live thread is a fixed-height region that scrolls and takes focus from the keyboard, so 18 px text never changes the panel's height. The slider is announced in pixels, and its value is also printed beside the label.