shadcn.io is not affiliated with official shadcn/ui
Profile Appearance Account Block for React
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 Base 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.
Related
- Pro
Avatar Customizer Account
ProfileA designer for the initials avatar: a framed preview at three sizes and in an account chip, with initials, shape, one of eight neutral tones and a ring, saved or discarded in the page.
- Pro
Basic Info Account
ProfileThe identity fields of an account as ruled rows that edit in place: full name, a username checked against taken names, an email that stays unverified until confirmed, a masked phone and a date of birth.
- Pro
Avatar Upload Account
ProfileThe current picture of an account with a file chooser that checks the type and size in words, the last five pictures kept as tiles with Restore and an in-place Delete, and a switch that keeps the history.
- Pro
Appearance Settings
Appearance and localeAn appearance settings panel that previews instead of applying: a drawn app window that wears the choices, theme and contrast cards with a drawn thumbnail each, a text-size slider with a sample sentence and a reduce motion switch with a replay.
- Pro
A profile that edits in place: display name, headline, location and a bio that counts 160 characters, each an Editable that saves on its own, a time-zone select that says the local time, a Show my email switch, a list of recent edits and an Undo.
- Pro
Profile Completion Account
ProfileHow complete a profile is by section: a derived percent over a segmented bar, four sections that open one at a time to their items, and a Not applicable that counts as done and can be undone.