# Drawer animation (/docs/components/drawer)




## What it fixes [#what-it-fixes]

Drawers already have good motion: they follow your finger. What they're missing is depth. With `slide-sink`, the page behind steps back as the drawer rises, the way iOS sheets do. The drawer's own swipe and spring are never touched.

It works with both drawers: Base UI's and the Radix base's Vaul drawer.

## Install [#install]

```bash
npx shadcn add drawer
```

## Choose a cut [#choose-a-cut]

```tsx
// keep the page still behind drawers
<Cuts drawer="none" />
```

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `drawer (on <Cuts>)` | `"slide-sink" \| "none"` | `"slide-sink"` | Whether the page steps back behind drawers. |
| `data-cut (on the drawer content)` | `"slide-sink" \| "none"` |  | none keeps the page still for this drawer. |