Skip to content

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

Free

App Preferences Sheet for React

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

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 React, Base UI does not store those checks.

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

Anatomy

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

Usage

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>
    Preferences
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>App Preferences</SheetTitle>
      <SheetDescription>Customize your app experience</SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="pref-notifications">
          Enable Notifications
        </FieldLabel>
        <Checkbox id="pref-notifications" />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="pref-analytics">Share Analytics</FieldLabel>
        <Checkbox id="pref-analytics" />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="pref-auto-update">Auto Update</FieldLabel>
        <Checkbox defaultChecked id="pref-auto-update" />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="pref-dark-mode">Dark Mode</FieldLabel>
        <Checkbox id="pref-dark-mode" />
      </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. The Button goes in the render prop of SheetTrigger, and the label stays its child.

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 variant="outline". The rest is on the Button page.

Field

Sets orientation="horizontal", htmlFor="pref-notifications", htmlFor="pref-analytics", htmlFor="pref-auto-update" and htmlFor="pref-dark-mode". The rest is on the Field page.

Checkbox

Sets id="pref-notifications", id="pref-analytics", defaultChecked, id="pref-auto-update" and id="pref-dark-mode". The rest is on the Checkbox page.

All 29 sheet examples