# Drawer

A panel from the edge of the screen: a floating side panel on Web and a bottom sheet on Mobile.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/drawer
```

## Usage

```tsx
import { Button } from '@/components/fetaui/button'
import { Drawer } from '@/components/fetaui/drawer'

export function Example() {
  return (
    <Drawer
      trigger={<Button>Open details</Button>}
      title="Launch details"
      footer={<Button>Done</Button>}
    >
      {/* details */}
    </Drawer>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| children | ReactNode | required |
| description | ReactNode |  |
| side | right, left, bottom | right |
| footer | ReactNode |  |
| saving | boolean | false |
| scrollable | boolean | false |
| scrollLabel | string | Drawer content |
| trigger | ReactElement |  |
| open | boolean |  |
| onOpenChange | (open) => void |  |
| animated | boolean | true |

## When to use

- When the task relates to the page and people may glance back at it: details, filters, settings.

## When not to use

- When the task stands on its own: use Dialog.
- For full height editing on Web: use Sheet.

## Accessibility

- A native modal dialog labelled by the title.
- Focus moves in and returns to the trigger.
- The grabber is decorative: keyboard users close with Esc or the close button.

## Motion

- Slides in on a 0.2 spring over 300 ms and out in 220 ms, with the scrim in parallel.
- A bottom sheet follows the finger or the pointer, and closes past 30% or on a flick.
- With reduced motion, it fades in place.