Drawer
A panel that slides in from the edge of the screen to reveal content or actions.
Usage
Loading...
Behavior
Drawers are dismissible by default. Click the backdrop or press Escape to close.
Set dismissible={false} on Drawer to keep it open until an action closes it.
Sides
Use the side prop on DrawerContent to control where the drawer appears.
Loading...
Examples
Right drawer
Bottom drawer
API Reference
The Drawer component manages open state and accessibility for drawers.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state. |
defaultOpen | boolean | false | Initial open state. |
onOpenChange | (open: boolean) => void | undefined | Called when open state changes. |
dismissible | boolean | true | Close on Escape or backdrop click. |
The DrawerContent supports side, size, and overlayClassName for layout control.