React Drawer
The detail-on-the-side pattern every data table needs: click a row, inspect the record, act — without losing your place. Slides from the right (or left/bottom), with a title + mono description header, a scrollable body, and a pinned footer for actions. Escape and scrim click close it; body scroll locks while open.
Slides from the right; Escape or scrim click closes.
Installation
npx shadcn@latest add "http://localhost:3000/registry/drawer.json"
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controlled visibility |
| onClose | () => void | — | Escape / scrim / close button |
| title | string | — | Header title + accessible name |
| description | string | — | Mono line under the title |
| side | 'right' \ | 'left' \ | 'bottom' |
| size | 'sm' \ | 'md' \ | 'lg' |
| footer | React.ReactNode | — | Pinned action bar |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.