Skip to content

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

Free

Theme Settings Sheet for Ark UI

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, Ark 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 asChild>
    <Button variant="outline">Appearance</Button>
  </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 value={theme.value}>
                {theme.label}
              </RadioGroupItem>
            </Field>
          ))}
        </RadioGroup>
      </FieldSet>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Compact Mode</FieldLabel>
        <Checkbox />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Enable Animations</FieldLabel>
        <Checkbox defaultChecked />
      </Field>
    </FieldGroup>
{/* 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. SheetTrigger takes asChild and merges onto the one Button inside it.

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

Sets asChild. The rest is on the Sheet page.

Button

Sets 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