shadcn.io is not affiliated with official shadcn/ui
Profile Appearance Account Block for Radix UI
How a member's name shows to other people: a display name choice, a switch each for the avatar and the handle, and three drawn cells that re-render live as a comment, a mention and a team-list row.
Installation
Overview
Let people decide how they appear to others, and show them at once, with this panel for React with Radix UI. A hairline frame with a plus mark on each corner holds a control band and three cells. The band has a Segment Group for the display name (full name, first name and initial, or the handle alone) and two Switches, one for the avatar and one for the handle. Under it three cells draw the same typed member as others would see her: in a comment, as an @mention chip and as a row in a team list. They re-draw with every change at a fixed height, so nothing moves. With the handle alone as the name, the handle switch is locked on and says why. The Shine Button saves the choice in the page and Discard puts the saved one back. This is how a name shows, not a theme: it changes nothing about the page's colours. It's built from Segment Group, Switch, Button, Shine Button and Guides, with a CSS entrance only. For the account page of any app where members see each other.
FAQ
How do I change the person and the choices?
Edit the constants at the top (FIRST, LAST, HANDLE, INITIALS and ROLE) and MODES. nameOf turns the mode into the name each cell prints, so a new mode is one entry and one branch there. The cells are three small module components; draw the places your own app shows a member.
Why is the handle switch locked with the handle alone?
Because then the handle is already the name, and showing it twice would say nothing new. The switch turns on, shows a lock and its hint says "Already your name, so it stays on." Choosing another name option unlocks it with your earlier choice.
Why does nothing move when I change something?
Each cell holds a fixed-height drawing built from plain boxes, and long names truncate inside it. Hiding the avatar changes where the text starts, never how tall anything is, so the panel keeps its height and the layout never jumps under the pointer.
What stays local, and how do I make it real?
Saving keeps the choice in this page only and says "Saved in this demo." in the foot; nothing is stored and a reload starts again. To make it real, send mode, avatar and handle from save to your endpoint, and use the same nameOf rule wherever your app prints a member's name, so the preview is always true.
Is it accessible, and how does it look on a phone?
The name choice is a labelled group, each switch has a name, the drawn avatars are hidden from assistive technology because the names are in text beside them, and the foot is a polite live region. Names keep their reading order in a right-to-left page. On a phone the three cells stack, each at the same height, and the foot with Save stays pinned to the bottom of the screen.