Skip to content

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

Free

Theme Settings Sheet for Vue

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

UI library: Ark UI

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

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

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

Usage

<Sheet>
  <SheetTrigger :asChild="true">
    <Button variant="outline">Appearance</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Appearance</SheetTitle>
      <SheetDescription>Customize how the app looks</SheetDescription>
    </SheetHeader>
    <FieldGroup class="gap-4 p-4">
      <FieldSet class="gap-3">
        <FieldLegend variant="label">Theme</FieldLegend>
        <RadioGroup defaultValue="dark">
          <Field v-for="theme in THEMES" :key="theme.value" orientation="horizontal">
            <RadioGroupItem :value="theme.value">{{ theme.label }}</RadioGroupItem>
          </Field>
        </RadioGroup>
      </FieldSet>
      <Field class="justify-between" orientation="horizontal">
        <FieldLabel>Compact Mode</FieldLabel>
        <Checkbox />
      </Field>
      <Field class="justify-between" orientation="horizontal">
        <FieldLabel>Enable Animations</FieldLabel>
        <Checkbox :defaultChecked="true" />
      </Field>
    </FieldGroup>
  </SheetContent>
</Sheet>

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", v-for="theme in THEMES", key="theme.value" 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