Sheet

A panel that slides in from an edge of the window.

@cupertinoui/sheetBase UI Dialog Registry JSON

"use client"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { Switch } from "@/components/ui/switch"

export default function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="secondary" />}>Show Inspector</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Inspector</SheetTitle>
          <SheetDescription>Settings for the selected document.</SheetDescription>
        </SheetHeader>
        <div className="flex flex-col gap-3 px-4">
          <div className="flex items-center justify-between">
            <Label htmlFor="locked">Locked</Label>
            <Switch id="locked" size="sm" />
          </div>
          <div className="flex items-center justify-between">
            <Label htmlFor="stationery">Stationery Pad</Label>
            <Switch id="stationery" size="sm" defaultChecked />
          </div>
        </div>
        <SheetFooter>
          <Button size="lg">Done</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/sheet

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

<Sheet>
  <SheetTrigger>Show Inspector</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Inspector</SheetTitle>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Sides

"use client"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const sides = ["top", "right", "bottom", "left"] as const

export default function SheetSide() {
  return (
    <div className="grid grid-cols-2 gap-2">
      {sides.map((side) => (
        <Sheet key={side}>
          <SheetTrigger render={<Button variant="secondary" className="capitalize" />}>
            {side}
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle className="capitalize">{side} sheet</SheetTitle>
              <SheetDescription>Slides in from the {side} edge.</SheetDescription>
            </SheetHeader>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  )
}

API Reference

Every part forwards the props of the underlying Base UI Dialog part. The props below are the ones CupertinoUI adds or changes.

SheetContent

Prop	Type	Description
`side`	`"top" \| "right" \| "bottom" \| "left"` Default: `"right"`	The edge the sheet slides in from.
`showCloseButton`	`boolean` Default: `true`	Shows a close button.
`className`	`string`	Extra classes, merged with the component's own.