Skip to content

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

Free

Privacy Settings Sheet for Ark UI

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

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 React, Ark UI does not delete the account.

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">Privacy</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Privacy Settings</SheetTitle>
      <SheetDescription>
        Control your privacy and data preferences
      </SheetDescription>
    </SheetHeader>
    <FieldGroup className="gap-4 p-4">
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Public Profile</FieldLabel>
        <Checkbox defaultChecked />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Show Email Address</FieldLabel>
        <Checkbox />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Allow Search Indexing</FieldLabel>
        <Checkbox defaultChecked />
      </Field>
      <Field className="justify-between" orientation="horizontal">
        <FieldLabel>Show Activity Status</FieldLabel>
        <Checkbox defaultChecked />
      </Field>
      <Button className="mt-4 w-full" variant="destructive">
        Delete Account
      </Button>
{/* The rest of the file is under Installation. */}

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 read details.open in onOpenChange.

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