User Profile View Sheet for React

An Avatar with className="size-16" and an AvatarFallback showing JD on the primary color. Add an AvatarImage before the fallback to show a photo.

As a description list: each dt is a muted label (Email, Location, Joined) and each dd its value, in rows with justify-between. Screen readers read them as pairs.

Nothing yet: it's a full-width Button with no handler. Open your compose view from it, or render it as a link to the conversation.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads User Profile, with View user information and activity as the description.

The outline button labeled View Profile is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

The right: SheetContent leaves side unset. The corner close button is on because showCloseButton defaults to true. Escape and a click on the overlay close the sheet too, and focus goes back to the trigger.