# Drawer

A panel anchored to a screen edge — for filters, details, or mobile menus.
Compose `DrawerTrigger` + `DrawerContent` (with `DrawerHeader`, `DrawerTitle`,
`DrawerDescription`, `DrawerFooter`) and an optional `DrawerClose`. Closes on Esc
and backdrop click.

`direction` (`top` / `bottom` / `left` / `right`, default `bottom`) sets the
edge. Open state can be controlled (`open` + `onOpenChange`) or uncontrolled.

## Props

### `Drawer`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Edge to anchor to. |
| `open` | `boolean` | — | Controlled open state. Omit for uncontrolled. |
| `defaultOpen` | `boolean` | `false` | Initial state when uncontrolled. |
| `onOpenChange` | `(open: boolean) => void` | — | Fired when open state changes. |

`DrawerTrigger` and `DrawerClose` accept `asChild` to render your own element.