Drawer
A panel that slides in from the edge of the screen. Useful for navigation menus, settings panels, or detailed views.
Basic Usage
Basic Drawer
A simple drawer that slides in from the right side.
Sides
Drawer Sides
The drawer can slide in from any side: left, right (default), top, or bottom.
With Form
Drawer with Form
Drawers are great for forms and settings panels.
Resizable Drawer
Resizable Navigation
A resizable drawer with drag handle. Min width: 300px, Max width: 90vw.
Without Close Button
No Close Button
Hide the default close button with showCloseButton=false.
API Reference
DrawerContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "left" | "right" | "top" | "bottom" | "right" | The side from which the drawer slides in |
showCloseButton | boolean | true | Show the X close button |
class | string | - | Additional CSS classes |
Drawer
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controlled open state |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
Components
| Component | Description |
|---|---|
Drawer | Root component that manages open/close state |
DrawerTrigger | Button that opens the drawer when clicked |
DrawerContent | The main content panel of the drawer |
DrawerHeader | Container for the title and description |
DrawerFooter | Container for action buttons |
DrawerTitle | The title of the drawer |
DrawerDescription | A description below the title |
DrawerClose | Button that closes the drawer when clicked |
DrawerOverlay | The backdrop overlay behind the drawer |
DrawerPortal | Portal for rendering drawer outside DOM tree |