Base Drawer
A swipe-gesture drawer built on Base UI's official Drawer component with snap points, nested stacking, and indent effects
Preview
Installation
Usage
Examples
Side Drawer
Use position="right" to create a side drawer.
Directions
Open drawers from any screen edge using the position prop.
Controlled
Use the open and onOpenChange props to control the drawer's open state externally.
Drawer is closed
Snap Points
Configure multiple snap points for the drawer to rest at different heights. Numbers between 0 and 1 represent fractions of the viewport height. String values support px and rem units.
Floating Variant
Use variant="floating" for a card-like appearance with inset spacing and fully rounded corners on desktop.
Inset Footer
Use variant="inset" on BaseDrawerFooter for a visually separated footer with a border-top and muted background.
Nested Drawers
Drawers can be nested. Each drawer remains independently focus managed while stacking visually with scale and translate animations.
Indent Effect
Use BaseDrawerProvider, BaseDrawerIndentBackground, and BaseDrawerIndent to scale and round the background content when a drawer opens.
The content behind the drawer scales and rounds when the drawer opens.
With Form
Include form elements within the drawer. BaseDrawerPanel wraps content in Drawer.Content by default, enabling text selection without triggering swipe gestures.
Scrollable Content
Use BaseDrawerPanel for scrollable content that works seamlessly with swipe gestures.
API Reference
Built on Base UI's Drawer. All Base UI Drawer props are supported.
Props
BaseDrawer
Root component that manages drawer state. Wraps Base UI's Drawer.Root.
BaseDrawerPopup
Convenience composite that renders Portal + Backdrop + Viewport + Popup. This is the main content wrapper.
BaseDrawerPanel
Scrollable content area. Wraps ScrollArea and Drawer.Content for text selection support.
BaseDrawerFooter
Components
| Component | Description |
|---|---|
BaseDrawer | Root component with position context |
BaseDrawerTrigger | Button that opens the drawer |
BaseDrawerPopup | Convenience composite (Portal + Backdrop + Viewport + Popup) |
BaseDrawerBar | Drag handle indicator (adapts orientation per position) |
BaseDrawerHeader | Container for title and description |
BaseDrawerTitle | Accessible title element |
BaseDrawerDescription | Accessible description element |
BaseDrawerPanel | Scrollable content area with text selection support |
BaseDrawerFooter | Container for action buttons |
BaseDrawerClose | Button that closes the drawer |
BaseDrawerContent | Pass-through to Drawer.Content for text selection in custom layouts |
BaseDrawerMenu | Navigation menu container |
BaseDrawerMenuItem | Menu item button |
BaseDrawerMenuTrigger | Menu item that opens a nested drawer |
BaseDrawerMenuSeparator | Menu divider |
BaseDrawerMenuGroup | Menu item group |
BaseDrawerMenuGroupLabel | Group label |
BaseDrawerMenuCheckboxItem | Checkbox menu item (default or switch variant) |
BaseDrawerMenuRadioGroup | Radio group container |
BaseDrawerMenuRadioItem | Radio menu item |
BaseDrawerProvider | Shared context for indent effect |
BaseDrawerIndent | App content wrapper for indent/scale effect |
BaseDrawerIndentBackground | Background layer behind indent |
BaseDrawerSwipeArea | Invisible area for swipe-to-open gestures |
CSS Variables
Base UI's Drawer exposes CSS custom properties on the popup element:
| Variable | Description |
|---|---|
--drawer-swipe-progress | Progress toward dismissed (0 = open, 1 = dismissed) |
--drawer-swipe-movement-x | Horizontal swipe offset in pixels |
--drawer-swipe-movement-y | Vertical swipe offset in pixels |
--drawer-swipe-strength | Velocity-based strength (scales exit animation duration) |
--drawer-snap-point-offset | Vertical offset for snap point positioning |
--drawer-height | Current drawer height |
--drawer-frontmost-height | Height of the frontmost drawer in a nested stack |
--nested-drawers | Number of nested drawers open |