Drawer
A panel you can throw back with your thumb.
Default
From the bottom, with a handle. Drag it down to close.
A sheet that answers to a finger: the panel follows the drag, resists when pulled the wrong way, and closes on a flick or past a quarter of its height. shadcn reaches for vaul here; this one is written by hand, and the rules behind it are tested on their own.
Installation
npx philcn@latest add drawerThe file is written into your project. It is yours from then on — change it as you like.
Examples
From a side
The direction decides both the edge it comes from and the way it is dragged.
Props
| Prop | Type | What it does |
|---|---|---|
| Drawer.open | boolean | Controlled: whether it is showing. |
| Drawer.onOpenChange | ((open: boolean) => void) | Called when it opens or closes. |
| Drawer.swipeDirection | SwipeDirection | Which way it is thrown to close: `"up"`, `"right"`, `"down"` or `"left"`. |
| Drawer.direction | DragDirection | The older spelling — top, bottom, left, right — kept so earlier code still works. |
| DrawerContent.showHandle | boolean | The bar you grab. On by default. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.
Worth knowing
- The page behind is not scaled down as vaul does it: that would mean transforming a container around the whole application, which is too much for a library you paste into an existing project.