# Drawer

> A bottom sheet you drag down to dismiss, with focus trap and safe-area padding.

Component · Pro · https://lodeui.com/components/drawer

## When to use

- Mobile-first sheets: filters, options, quick edits and confirmations.

## When not to use

- Desktop forms with many fields: use a dialog or side sheet.

## Installation

```bash
npx shadcn@latest add @lode/drawer
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Drawer } from "@/components/ui/drawer";

export function SizePicker() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Choose a size</Button>
      <Drawer open={open} onOpenChange={setOpen} title="Choose a size" footer={<Button onClick={() => setOpen(false)}>Done</Button>}>
        …
      </Drawer>
    </>
  );
}
```

## API reference

### Drawer

A modal bottom sheet in a portal; drag the handle or header down to close.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open / onOpenChange | `boolean / (open) => void` | – | Controlled visibility. |
| title / description | `ReactNode` | – | Label and describe the dialog. |
| children / footer | `ReactNode` | – | Scrolling body and a pinned action row. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Esc | Close |
| Tab / Shift+Tab | Cycle focus inside |

## Accessibility

- A modal dialog, labelled and described, with a focus trap and focus return.
- Dragging is optional: Esc, the overlay and your buttons all close it.

## Motion

- Slides up with a spring; drag down past 120px or flick to dismiss; it resists dragging upward.

## Responsive behavior

- Full width on phones, 512px centered on larger screens; respects the home-indicator safe area.

## Performance

- Nothing renders while closed.

## Notes for AI

- Only the handle and header start drags, so the body can scroll normally.

## Related

- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Morphing dialog](https://lodeui.com/components/morphing-dialog) — A card that morphs into a dialog: cover, title and frame fly to their new places.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.