Skip to content

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

Free

Theme Settings Sheet for React

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

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 React, Base UI does not change the theme.

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" />}>
    Appearance
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Appearance</SheetTitle>
      <SheetDescription>Customize how the app looks</SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <FieldSet className="gap-3">
        <FieldLegend variant="label">Theme</FieldLegend>
        <RadioGroup defaultValue="dark">
          {THEMES.map((theme) => (
            <Field key={theme.value} orientation="horizontal">
              <RadioGroupItem id={theme.id} value={theme.value} />
              <FieldLabel className="font-normal" htmlFor={theme.id}>
                {theme.label}
              </FieldLabel>
            </Field>
          ))}
        </RadioGroup>
      </FieldSet>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="theme-compact">Compact Mode</FieldLabel>
        <Checkbox id="theme-compact" />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel htmlFor="theme-animations">Enable Animations</FieldLabel>
        <Checkbox defaultChecked id="theme-animations" />
      </Field>
{/* The rest of the file is under Installation. */}

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. The Button goes in the render prop of SheetTrigger, and the label stays its child.

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

Field

Sets variant="label", orientation="horizontal", htmlFor={theme.id}, htmlFor="theme-compact" and htmlFor="theme-animations". The rest is on the Field page.

Radio Group

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

Checkbox

Sets id="theme-compact", defaultChecked and id="theme-animations". The rest is on the Checkbox page.

All 29 sheet examples