shadcn.io is an independent project built on shadcn/ui
The title is Privacy Settings. Public Profile, Allow Search Indexing, and Show Activity Status start checked. Show Email Address does not. Delete Account uses the destructive color.
Use it for privacy toggles plus one action that cannot be undone. Confirm Delete Account in an Alert Dialog before anything is removed. In Svelte, Ark UI does not delete the account.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Privacy</Button>{/snippet}</SheetTrigger><SheetContent><SheetHeader><SheetTitle>Privacy Settings</SheetTitle><SheetDescription>Control your privacy and data preferences</SheetDescription></SheetHeader><FieldGroup class="gap-4 p-4"><Field class="justify-between" orientation="horizontal"><FieldLabel>Public Profile</FieldLabel><Checkbox defaultChecked /></Field><Field class="justify-between" orientation="horizontal"><FieldLabel>Show Email Address</FieldLabel><Checkbox /></Field><Field class="justify-between" orientation="horizontal"><FieldLabel>Allow Search Indexing</FieldLabel><Checkbox defaultChecked /></Field><Field class="justify-between" orientation="horizontal"><FieldLabel>Show Activity Status</FieldLabel><Checkbox defaultChecked /></Field><Button class="mt-4 w-full" variant="destructive">Delete Account</Button></FieldGroup></SheetContent></Sheet>FAQ
Which privacy boxes start checked?
Public Profile, Allow Search Indexing and Show Activity Status start checked. Show Email Address starts unchecked.
What does Delete Account do in this demo?
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.
Why is Privacy Settings a SheetTitle?
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.
How does the Privacy button open the sheet?
The outline button labeled Privacy is the trigger, and its text is the accessible name.
asChild on SheetTrigger receives props: spread them onto the button.
How do I close the privacy sheet?
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 and read details.open in onOpenChange.
API Reference
Sheet
No extra props in this demo. The rest is on the Sheet page.
Button
Sets props, variant="outline" and variant="destructive". The rest is on the Button page.
Field
Sets orientation="horizontal". The rest is on the Field page.
Checkbox
Sets defaultChecked. The rest is on the Checkbox page.
