Skip to content

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

Free

App Preferences Sheet for Ark UI

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, Ark 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 asChild>
    <Button variant="outline">Preferences</Button>
  </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>Enable Notifications</FieldLabel>
        <Checkbox />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Share Analytics</FieldLabel>
        <Checkbox />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Auto Update</FieldLabel>
        <Checkbox defaultChecked />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Dark Mode</FieldLabel>
        <Checkbox />
      </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. SheetTrigger takes asChild and merges onto the one Button inside it.

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

Sets asChild. The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets orientation="horizontal". The rest is on the Field page.

Checkbox

Sets defaultChecked. The rest is on the Checkbox page.

All 29 sheet examples