127 Components
Drawer
OverlaysSlide-over panel and bottom sheet drawer with 4-direction support, drag-to-dismiss gestures, top-level portal rendering, and Escape dismissal.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/drawer.json"
Props
TypeScript props supported by <Drawer />.
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "right" | "left" | "bottom" | "top" | "right" | Screen edge from which the drawer slides in. |
| open | boolean | — | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when used uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Callback fired when the drawer opens or closes. |
| title | string | "Drawer Panel" | Heading title displayed in the drawer header. |
| description | string | — | Optional helper subtitle below the drawer heading. |
| triggerLabel | string | "Open Drawer" | Label for the default trigger button when no custom trigger is passed. |
| trigger | React.ReactNode | — | Custom trigger element that opens the drawer on click. |
| children | React.ReactNode | — | Custom content rendered inside the scrollable drawer body. |
| footer | React.ReactNode | — | Custom footer actions rendered at the bottom of the drawer. |
| className | string | — | Additional CSS classes applied to the drawer panel. |
Key Features
- Renders in a top-level document.body portal (z-9999) above all navbars and containers.
- Slides from right, left, bottom, or top with directional drag-to-dismiss gestures.
- Works both controlled (open/onOpenChange) and uncontrolled with custom triggers.
Keyboard & Accessibility
- Renders with role='dialog' and aria-modal='true' and locks background scroll while open.
- Closes immediately when pressing the Escape key or clicking the backdrop.
- Collapses slide motion to a subtle fade when prefers-reduced-motion is enabled.