Skip to content

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

Free

Right Drawer Settings Panel for Svelte

A right Settings drawer with notification and privacy switches, plus Save Changes and Cancel.

UI library: Ark UI

A right panel titled Settings, with the line Manage your preferences. Switches sit under Notifications and Privacy, and Save Changes and Cancel sit at the bottom.

Use it for a few preferences beside the page on a phone. A long settings form belongs on its own page, not in a Sheet. In Svelte, Ark UI does not save the switches.

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

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="right"><DrawerTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "Open settings" })} size="icon-md" variant="outline"><SettingsIcon aria-hidden="true" /></Button>{/snippet}</DrawerTrigger><DrawerContent showBar={false}><DrawerHeader><DrawerTitle>Settings</DrawerTitle><DrawerDescription>Manage your preferences</DrawerDescription></DrawerHeader><div class="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-4"><FieldSet><FieldLegend variant="label">Notifications</FieldLegend><FieldGroup class="gap-3"><Field orientation="horizontal"><FieldLabel class="font-normal">Email notifications</FieldLabel><Switch /></Field><Field orientation="horizontal"><FieldLabel class="font-normal">Push notifications</FieldLabel><Switch defaultChecked /></Field><Field orientation="horizontal"><FieldLabel class="font-normal">SMS notifications</FieldLabel><Switch /></Field></FieldGroup></FieldSet><FieldSet><FieldLegend variant="label">Privacy</FieldLegend><FieldGroup class="gap-3"><Field orientation="horizontal"><FieldLabel class="font-normal">Profile visible</FieldLabel><Switch defaultChecked /></Field><Field orientation="horizontal"><FieldLabel class="font-normal">Show activity</FieldLabel><Switch defaultChecked /></Field></FieldGroup></FieldSet></div><DrawerFooter><Button>Save Changes</Button><DrawerClose>{#snippet asChild(props)}<Button {...props()} variant="outline">Cancel</Button>{/snippet}</DrawerClose></DrawerFooter></DrawerContent></Drawer>

FAQ

How are the settings grouped?

Two FieldSets with a FieldLegend each: Notifications, with Email, Push and SMS, and Privacy, with Profile visible and Show activity.

Which switches start on?

Push notifications, Profile visible and Show activity. Email and SMS notifications start off.

How is each switch labeled?

Each row is a horizontal Field: the FieldLabel at the start names the Switch at the end, and clicking the label flips it.

Does Save Changes store the settings?

Not yet: the switches are uncontrolled and Save Changes has no handler. Control the switches, save on press, and close the drawer once it's stored: Pass open to Drawer and read details.open in onOpenChange.

How is the settings button labeled?

An outline icon button opens the drawer. Its aria-label, Open settings, is the accessible name; the icon is aria-hidden. asChild on DrawerTrigger receives props: spread them onto the button.

How does the drawer open from the right?

swipeDirection="right" on Drawer puts it on the right edge. The prop names the swipe that closes the drawer, so right docks it on the right; leave it out for a bottom drawer.

API Reference

Drawer

Sets swipeDirection="right" and showBar={false}. The rest is on the Drawer page.

Button

Sets props, aria-label, Open, settings, size="icon-md" and variant="outline". The rest is on the Button page.

Field

Sets variant="label" and orientation="horizontal". The rest is on the Field page.

Switch

Sets defaultChecked. The rest is on the Switch page.

All 22 drawer examples