Drawer
A side panel that overlays content on mobile and pushes content inline on desktop. Useful for filters, secondary navigation, or detail views without losing the page's context.
Dashboard
Open the settings drawer to manage your preferences.
Anatomy
- Drawer — Root context provider.
- DrawerTrigger — Opens the drawer.
- DrawerContent — The panel.
- DrawerHeader / DrawerTitle / DrawerDescription — Top labelling.
- DrawerFooter — Bottom action area.
- DrawerClose — Closes the drawer.
- useDrawer() — Hook to read/control the drawer from inside the tree.
Responsive Behavior
Below the lg breakpoint (1024px) the drawer behaves like a Sheet — it overlays the page with a backdrop and traps focus. Above 1024px it pushes the surrounding content inline, which keeps the underlying layout interactive.
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled default state. |
onOpenChange | (open: boolean) => void | — | Called when open state changes. |
side | "left" | "right" | "right" | Edge the drawer slides in from (DrawerContent prop). |