Components
Drawer
A panel that sits beside the page rather than interrupting it.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/drawer.jsonDrawer or modal
A Modal interrupts: the page behind it must wait. A Drawer sits beside: the page behind it is still the subject. Filters, a detail inspector, a settings pane — all drawers, because you are working on the thing behind them.
The footer is pinned
Actions live in a footer that does not scroll with the body, so Apply stays reachable however long the filter list gets. A submit button you have to scroll to find is one people stop finding.
Escape closes it, focus moves in and returns on close, and the body scroll locks while it is open — the same contract as Modal.
| Prop | Type | Default | Description |
|---|---|---|---|
| open / onClose | boolean / () => void | — | Controlled. |
| side | "left" | "right" | "right" | Which edge it enters from. |
| width | number | 360 | Panel width. |
| footer | ReactNode | — | Pinned actions. |