# Sheet

> Slide-in side panel for edit and detail flows.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/sheet.json`

## Install

```tsx
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
} from "@aspyn-io/kit";
```

### Edit panel (right side)

The side-panel pattern for editing without losing page context. A flex-1 overflow container scrolls between the pinned header and footer.

```tsx
<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Edit customer</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit customer</SheetTitle>
      <SheetDescription>Changes save when you submit.</SheetDescription>
    </SheetHeader>
    <div className="flex-1 space-y-4 overflow-y-auto px-4">…form fields…</div>
    <SheetFooter>
      <Button>Save changes</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

### Sides

```tsx
<SheetContent side="left">…</SheetContent>
<SheetContent side="top">…</SheetContent>
<SheetContent side="bottom">…</SheetContent>
```

## Notes

- Built on the Dialog primitive: focus trapping, Escape, and overlay dismissal included.
- Use Sheet for edit/detail side panels; use Dialog for focused decisions.