# Drawer

> Touch-first bottom sheet (Vaul).

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

## Install

```tsx
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@aspyn-io/kit";
```

### Bottom drawer

Built on Vaul: swipe-to-dismiss and background scaling on touch. Use Drawer on mobile where Dialog would feel cramped.

```tsx
<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Confirm appointment</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Confirm appointment</DrawerTitle>
      <DrawerDescription>Tomorrow, 10:00–12:30 · 1717 Round Lake Rd</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Confirm</Button>
      <DrawerClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

## Notes

- Responsive pattern: Dialog on desktop, Drawer on mobile: switch on a media query.
- Sheet slides from screen edges for desktop side panels; Drawer is the touch-first bottom sheet.