Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

App Preferences Sheet for Svelte

A Preferences button opens a right-side sheet of four checkboxes. Only Auto Update starts checked.

UI library: Ark UI

The sheet is titled App Preferences. The rows are Enable Notifications, Share Analytics, Auto Update, and Dark Mode. Only Auto Update starts on.

Use it for a short list of on or off settings. A Switch on the page is better for one setting people flip often. In Svelte, Ark UI does not store those checks.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Preferences</Button>{/snippet}</SheetTrigger><SheetContent><SheetHeader><SheetTitle>App Preferences</SheetTitle><SheetDescription>Customize your app experience</SheetDescription></SheetHeader><FieldGroup class="gap-4 p-4"><Field class="justify-between" orientation="horizontal"><FieldLabel>Enable Notifications</FieldLabel><Checkbox /></Field><Field class="justify-between" orientation="horizontal"><FieldLabel>Share Analytics</FieldLabel><Checkbox /></Field><Field class="justify-between" orientation="horizontal"><FieldLabel>Auto Update</FieldLabel><Checkbox defaultChecked /></Field><Field class="justify-between" orientation="horizontal"><FieldLabel>Dark Mode</FieldLabel><Checkbox /></Field></FieldGroup></SheetContent></Sheet>

FAQ

Which preferences are in this sheet, and which start on?

Enable Notifications, Share Analytics, Auto Update and Dark Mode. Auto Update starts checked; the other three start unchecked.

Where does the checked state live?

Inside each Checkbox: they're uncontrolled, and the sheet has no save button, so nothing reads them. Make them controlled, or put them in a form, to send the values somewhere.

Why does this preferences sheet include 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 App Preferences, with Customize your app experience under it.

How does the Preferences button open the sheet?

The outline button labeled Preferences is the trigger, and its text is the accessible name. asChild on SheetTrigger receives props: spread them onto the button.

How are the rows laid out?

Each row is a Field with orientation="horizontal" and justify-between, so the label starts the row and the checkbox ends it, on either reading direction. The rows sit in a FieldGroup under SheetHeader.

How do I dismiss the preferences 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.

API Reference

Sheet

No extra props in this demo. The rest is on the Sheet page.

Button

Sets props and variant="outline". 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.

All 29 sheet examples