Skip to content

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

Free

Theme Settings Sheet for Svelte

An Appearance button opens a right-side sheet to pick Light, Dark, or System, plus compact mode and animations.

UI library: Ark UI

The title is Appearance. Theme offers Light, Dark, and System, with Dark selected. Compact Mode is off. Enable Animations is on.

Use it for look-and-feel choices that should not cover the page. You still apply the theme yourself. A Toggle Group is enough for Light and Dark only. In Svelte, Ark UI does not change the theme.

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">Appearance</Button>{/snippet}</SheetTrigger><SheetContent><SheetHeader><SheetTitle>Appearance</SheetTitle><SheetDescription>Customize how the app looks</SheetDescription></SheetHeader><FieldGroup class="gap-4 p-4"><FieldSet class="gap-3"><FieldLegend variant="label">Theme</FieldLegend><RadioGroup defaultValue="dark">{#each THEMES as theme (theme.value)}<Field orientation="horizontal"><RadioGroupItem value={theme.value}>{theme.label}</RadioGroupItem></Field>{/each}</RadioGroup></FieldSet><Field class="justify-between" orientation="horizontal"><FieldLabel>Compact Mode</FieldLabel><Checkbox /></Field><Field class="justify-between" orientation="horizontal"><FieldLabel>Enable Animations</FieldLabel><Checkbox defaultChecked /></Field></FieldGroup></SheetContent></Sheet>

FAQ

How are Light, Dark, and System built?

As a RadioGroup with defaultValue="dark", inside a FieldSet whose FieldLegend reads Theme. Picking one clears the others, which three checkboxes couldn't do.

What are Compact Mode and Enable Animations?

Two checkboxes in horizontal Field rows, label first. Compact Mode starts off and Enable Animations starts on.

Does this sheet store the theme?

No. The radio group and the checkboxes are uncontrolled, and nothing writes the choice anywhere. Control the radio group's value and pass it to your theme provider, and store it if it should survive a reload.

Why is Appearance 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 Appearance, with Customize how the app looks as the description.

How does the Appearance button open the sheet?

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

Which edge does the appearance sheet use?

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.

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 variant="label" and orientation="horizontal". The rest is on the Field page.

Radio Group

Sets defaultValue="dark" and value={theme.value}. The rest is on the Radio Group page.

Checkbox

Sets defaultChecked. The rest is on the Checkbox page.

All 29 sheet examples