# Sheet panel (goodtabs UI)

A side panel with header, scrolling body and pinned footer slots.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/sheet-panel.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/sheet-panel`

## Usage

```tsx
import { SheetPanel } from "@/components/ui/sheet-panel"
import { Button } from "@/components/ui/button"

<SheetPanel trigger={<Button variant="outline">Filters</Button>} title="Filters" footer={<Button>Apply</Button>}>
  ...
</SheetPanel>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| trigger | `ReactElement` |  | The control that opens the panel. |
| title | `string` |  | The panel title. Also names the scrolling body. |
| description | `string` |  | One line under the title. |
| footer | `ReactNode` |  | Buttons for the bottom edge. Wrap in SheetClose to dismiss. |
| side | `"right" | "left"` | `"right"` | Which edge the panel slides from. |

## When to use

- Filters, details or settings that sit beside the page
- Secondary tasks that should not leave the current screen
- Content longer than a dialog should hold

## When not to use

- A short yes or no, which wants a confirm dialog
- Mobile first menus, which want the bottom drawer
- Main navigation

## Notes for agents

- Thin wrapper over @/components/ui/sheet; focus trap, Escape and overlay come from radix
- The body is a focusable scrolling region labelled with the title
- Footer is optional; omit it for read only panels
- Uncontrolled; for controlled state use Sheet from @/components/ui/sheet directly

Docs: https://ui.goodtabs.co/components/sheet-panel