Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Right

Right Drawer Settings Panel for React

A right drawer of settings switches, grouped under Notifications and Privacy, with Save Changes and Cancel.

Framework
UI library

Settings in a right drawer: Switches for email, push and SMS notifications, then for profile visibility and activity, in two FieldSets. Save Changes and Cancel stay at the bottom while the switches scroll.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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; onOpenChange receives the next boolean.

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. The Button goes in the render prop of DrawerTrigger.

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.

All 22 drawer examples