Skip to content

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

Free

Privacy Settings Sheet for Vue

A Privacy button opens four privacy checkboxes, three of them on, and a destructive Delete Account button under them.

UI library: Ark UI

The title is Privacy Settings. Public Profile, Allow Search Indexing, and Show Activity Status start checked. Show Email Address does not. Delete Account uses the destructive color.

Use it for privacy toggles plus one action that cannot be undone. Confirm Delete Account in an Alert Dialog before anything is removed. In Vue, Ark UI does not delete the account.

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">Privacy</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Privacy Settings</SheetTitle>
      <SheetDescription>Control your privacy and data preferences</SheetDescription>
    </SheetHeader>
    <FieldGroup class="gap-4 p-4">
      <Field class="justify-between" orientation="horizontal">
        <FieldLabel>Public Profile</FieldLabel>
        <Checkbox :defaultChecked="true" />
      </Field>
      <Field class="justify-between" orientation="horizontal">
        <FieldLabel>Show Email Address</FieldLabel>
        <Checkbox />
      </Field>
      <Field class="justify-between" orientation="horizontal">
        <FieldLabel>Allow Search Indexing</FieldLabel>
        <Checkbox :defaultChecked="true" />
      </Field>
      <Field class="justify-between" orientation="horizontal">
        <FieldLabel>Show Activity Status</FieldLabel>
        <Checkbox :defaultChecked="true" />
      </Field>
      <Button class="mt-4 w-full" variant="destructive">Delete Account</Button>
    </FieldGroup>
  </SheetContent>
</Sheet>

FAQ

Which privacy boxes start checked?

Public Profile, Allow Search Indexing and Show Activity Status start checked. Show Email Address starts unchecked.

What does Delete Account do in this demo?

Nothing yet: it's a full-width Button with variant="destructive" and no handler. Open a confirmation from it before you call your API, since the action can't be undone.

Why is Privacy Settings 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 Privacy Settings, and the description reads Control your privacy and data preferences.

How does the Privacy button open the sheet?

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

How do I close the privacy 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. To close it from your own code, for example after the account is deleted, control the open state: Pass open to Sheet and listen to @open-change, which receives details.open.

Which edge does it use?

The right: SheetContent leaves side unset. Set side="left" to open it from the start of the page instead.

API Reference

Sheet

Sets asChild. The rest is on the Sheet page.

Button

Sets variant="outline" and variant="destructive". 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