# Sheet

Extends the Dialog component to display content that complements the main view.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentPreview name="sheet-demo">
  <div className="flex items-center justify-center py-12">
    <Sheet>
      <SheetTrigger>
        <Button variant="outline">
          Open Sheet
        </Button>
      </SheetTrigger>

      <SheetContent>
        <SheetHeader>
          <SheetTitle>
            Navigation Menu
          </SheetTitle>

          <SheetDescription>
            <span>
              Access all the pages in your application.
            </span>
          </SheetDescription>
        </SheetHeader>

        <div className="p-4">
          <ul className="space-y-4">
            <li>
              <a href="#" className="hover:underline">Home</a>
            </li>

            <li>
              <a href="#" className="hover:underline">Dashboard</a>
            </li>

            <li>
              <a href="#" className="hover:underline">Settings</a>
            </li>
          </ul>
        </div>
      </SheetContent>
    </Sheet>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/sheet.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Are you absolutely sure?</SheetTitle>
          <SheetDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}
```

## Examples [#examples]

### Positions [#positions]

<ComponentPreview name="sheet-positions">
  <div className="flex flex-wrap items-center justify-center gap-4 py-12">
    {["top", "right", "bottom", "left"].map((side) => (
          <Sheet key={side}>
            <SheetTrigger asChild>
              <Button variant="outline" className="capitalize">
                {side}
              </Button>
            </SheetTrigger>
            {/* @ts-ignore */}
            <SheetContent side={side}>
              <SheetHeader>
                <SheetTitle>Edit profile</SheetTitle>
                <SheetDescription>
                  <span>Make changes to your profile here. Click save when you're done.</span>
                </SheetDescription>
              </SheetHeader>
            </SheetContent>
          </Sheet>
        ))}
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The component uses Radix UI Primitives. For a complete API reference, please refer to the [Radix UI Dialog Documentation](https://www.radix-ui.com/docs/primitives/components/dialog).

| Prop           | Type       | Default   | Description                                                   |
| -------------- | ---------- | --------- | ------------------------------------------------------------- |
| `side`         | `enum`     | `"right"` | The position of the sheet (`top`, `bottom`, `left`, `right`). |
| `open`         | `boolean`  | -         | The controlled open state of the sheet.                       |
| `onOpenChange` | `function` | -         | Event handler called when the open state changes.             |