Drawer
Side panel with directional sliding, scroll locking, and responsive mobile-first design
Drawer
A side panel that slides in from any edge of the screen. Supports different positions, sizes, backdrops and controlled state for complex flows.
Basic usage
Use Drawer with DrawerTrigger and DrawerContent. Combine DrawerHeader, DrawerBody and DrawerFooter for structured layouts.
Right drawer
A basic drawer with header, body and footer.
Use drawers for secondary workflows such as editing, filters or details that shouldn't block the primary page.
This drawer is anchored on the right and uses size md.
Positions
Control where the drawer appears using the position prop: left, right, top or bottom.
Right drawer
Common for detail panels.
Ideal for object details or forms.
Left drawer
Great for navigation or filters.
Use left drawers for navigation or sidebars.
Top drawer
Slides down from the top.
Works well for announcements or global filters.
Bottom drawer
Anchored to the bottom edge.
Useful for mobile actions or quick pickers.
Sizes
Use the size prop to control drawer width/height. This is especially useful on large screens.
sm drawer
This drawer is using size sm.
Choose sizes based on screen and content density.
md drawer
This drawer is using size md.
Choose sizes based on screen and content density.
lg drawer
This drawer is using size lg.
Choose sizes based on screen and content density.
Backdrop variants
Customize the backdrop using the backdrop prop. Use blur, dark or transparent to match your surface.
default backdrop
Drawer with default backdrop variant.
Adjust the backdrop to align with your page elevation and contrast.
blur backdrop
Drawer with blur backdrop variant.
Adjust the backdrop to align with your page elevation and contrast.
dark backdrop
Drawer with dark backdrop variant.
Adjust the backdrop to align with your page elevation and contrast.
transparent backdrop
Drawer with transparent backdrop variant.
Adjust the backdrop to align with your page elevation and contrast.
Controlled state
Control the open state with open and onOpenChange for full programmatic control.
Controlled drawer
The open state is managed from React.
Use controlled drawers when you need to sync state with URL params, global stores or other components.
Usage Guidelines
When to Use
- Mobile navigation
- Filter panels
- Detail views
Accessibility
- Same focus management as Dialog
- Swipe gesture supplement
Performance
- CSS transforms for animation
- Touch events optimized
Common Mistakes
- Drawer too wide on mobile
- No swipe-to-close
Frequently Asked Questions
Related Components
View allCommand palette (⌘K) with fuzzy search, grouped commands, keyboard shortcuts, and recent history
Right-click context menu with nested menus, checkboxes, radio items, and keyboard shortcuts display
Modal dialog with focus trap, backdrop click handling, scroll locking, and nested dialog support
Dropdown menu with collision detection, sub-menus, dividers, and keyboard navigation