Skip to content

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

Free

Notification Preferences Sheet for Ark UI

A right-side Notification Settings sheet groups email and push checkboxes. Three of the four start checked.

The title is Notification Settings. Under Email Notifications, Product Updates starts on and Newsletter starts off. Under Push Notifications, New Messages and Mentions both start on.

Use it when settings split into named groups. One Switch on the page is enough for a single channel. In React, Ark UI does not save these 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">Notifications</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Notification Settings</SheetTitle>
      <SheetDescription>
        Choose what notifications you want to receive
      </SheetDescription>
    </SheetHeader>
    <div className="flex flex-col gap-4 p-4">
      <FieldSet className="gap-2">
        <FieldLegend className="font-semibold" variant="label">
          Email Notifications
        </FieldLegend>
        <FieldGroup className="gap-2">
          <Field className="justify-between" orientation="horizontal">
            <FieldLabel>Product Updates</FieldLabel>
            <Checkbox defaultChecked />
          </Field>
          <Field className="justify-between" orientation="horizontal">
            <FieldLabel>Newsletter</FieldLabel>
            <Checkbox />
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSet className="gap-2">
        <FieldLegend className="font-semibold" variant="label">
          Push Notifications
        </FieldLegend>
{/* The rest of the file is under Installation. */}

FAQ

How are the notification options grouped?

Email Notifications holds Product Updates and Newsletter. Push Notifications holds New Messages and Mentions. Each group is a FieldSet with a FieldLegend and a FieldGroup of rows.

How is each checkbox named?

Each row is a horizontal Field: the FieldLabel at the start names the Checkbox at the end, and clicking the label toggles it. Newsletter is the only box that starts unchecked.

Is there a save button?

No. The checkboxes are uncontrolled and the sheet has no footer, so nothing reads them. Add a SheetFooter with a save button, and make the boxes controlled, to store the choices.

Why does this 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 Notification Settings, with Choose what notifications you want to receive as the description.

How does the Notifications button open it?

The outline button labeled Notifications is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

Which edge does it open from?

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.

Checkbox

Sets defaultChecked. The rest is on the Checkbox page.

All 29 sheet examples