Privacy Settings Sheet for React

Public Profile, Allow Search Indexing and Show Activity Status start checked. Show Email Address starts unchecked.

Nothing yet: it's a full-width Button with variant="destructive" and no handler. Open a confirmation from it before you call your API, since the action can't be undone.

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 Privacy Settings, and the description reads Control your privacy and data preferences.

The outline button labeled Privacy 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 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. To close it from your own code, for example after the account is deleted, control the open state: Pass open to Sheet; onOpenChange receives the next boolean.

The right: SheetContent leaves side unset. Set side="left" to open it from the start of the page instead.