shadcn.io is not affiliated with official shadcn/ui
Profile Settings Block for React Aria
A profile visibility page: five parts of a profile, each with a menu for who sees it (Everyone, Workspace, Only me), beside a drawn profile card with a Preview as choice (Public, Teammate, Me) that hides what that viewer cannot see.
Installation
Overview
Let people decide who sees what on their profile, and check it from the other side, with this profile settings page for React with React Aria. A whole screen with the page's rails and one band splits in two. On one side the title and five parts of a profile, name, email, bio, time zone and links, each with a Native Select for who can see it: Everyone, Workspace or Only me. On the other, a drawn profile card with a Preview as Toggle Group: Public, Teammate or Me. The card shows the profile as that person would see it, with initials in place of a photo, and a part they can't see becomes a quiet line saying so, beside its label, "Hidden from Public". The card follows the menus before anything is saved, a caption counts what the chosen viewer sees, and the foot counts unsaved changes beside a Shine Button to save and an outline Button to discard. On a phone the card sits under the rows and the foot stays pinned to the bottom of the screen. It's built from Native Select, Toggle Group, Button, Shine Button and Guides, with a CSS entrance only. For a community, a workspace, a marketplace or any product with profiles.
FAQ
Who counts as Public, Teammate and Me?
Public is anyone, signed in or not, so it sees only the parts open to Everyone. Teammate is someone in the same workspace, so it sees Everyone and Workspace parts. Me is you, who sees everything. The table is REACH: add an audience or a viewer there, and the menus, the card and the caption follow. If a name is hidden from a viewer the card shows "A community member" and the initials CM instead.
Does the preview change before I save?
Yes. The card is drawn from the draft, so a menu you change shows its effect at once, in the card and in the caption's count; Save only keeps the draft as the saved state. Switching the viewer is not a change and doesn't count as unsaved. The card's parts are real text, so a screen reader reads what the chosen viewer would see, and the avatar is decorative.
What stays local, and how do I wire it up?
Everything. The profile is made up, nothing is shown to anyone, and Save copies the draft into the page's own state and says how many changes it kept; Discard puts the saved menus back. To make it real, store an audience per part (SAVED is that map) and check it on your server whenever a profile is read, never only in the browser. Save and Discard stay in place and focusable while nothing changed and answer "No changes to save." in words.
How is this different from an editable profile form?
It doesn't edit what the profile says, only who may see each part, and it answers the question people actually have, "what does a stranger see?", with a picture. For the values themselves use an editable form such as the account basic info block.
Is it accessible, and how does it look on a phone?
Each menu is labelled by its part ("Email is visible to") and described by the value it protects. Preview as is a single-choice group with arrow-key movement, and the status line is a polite live region that says what changed and what the chosen viewer now sees. Below the large breakpoint the card moves under the rows, the header sentence is kept for screen readers only to leave room, and the save bar is pinned to the bottom of the screen.