Skip to content

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

Free

Notification Preferences Sheet for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not save these checks.

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">Notifications</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Notification Settings</SheetTitle>
      <SheetDescription>
        Choose what notifications you want to receive
      </SheetDescription>
    </SheetHeader>
    <div class="flex flex-col gap-4 p-4">
      <FieldSet class="gap-2">
        <FieldLegend class="font-semibold" variant="label">
          Email Notifications
        </FieldLegend>
        <FieldGroup class="gap-2">
          <Field class="justify-between" orientation="horizontal">
            <FieldLabel>Product Updates</FieldLabel>
            <Checkbox :defaultChecked="true" />
          </Field>
          <Field class="justify-between" orientation="horizontal">
            <FieldLabel>Newsletter</FieldLabel>
            <Checkbox />
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSet class="gap-2">
        <FieldLegend class="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