Drawer
Slides an interactive panel in from the edge of the screen, giving users quick access to secondary tools, forms, or menus with swipe gestures.
Installation
pnpm dlx shadcn@latest add @spaceui/primitives-drawerUsage
import {
Drawer,
DrawerCreateHandle,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerMenu,
DrawerMenuCheckboxItem,
DrawerMenuGroup,
DrawerMenuGroupLabel,
DrawerMenuItem,
DrawerMenuRadioGroup,
DrawerMenuRadioItem,
DrawerMenuSeparator,
DrawerPanel,
DrawerPopup,
DrawerMenuTrigger,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer'<Drawer>
<DrawerTrigger>Open</DrawerTrigger>
<DrawerPopup>
<DrawerHeader>
<DrawerTitle>Drawer Title</DrawerTitle>
<DrawerDescription>Drawer Description</DrawerDescription>
</DrawerHeader>
<DrawerPanel>Content</DrawerPanel>
<DrawerFooter>
<DrawerClose>Close</DrawerClose>
</DrawerFooter>
</DrawerPopup>
</Drawer>Anatomy
<Drawer>
<DrawerTrigger />
<DrawerBackdrop />
<DrawerPopup>
<DrawerHeader>
<DrawerTitle />
<DrawerDescription />
</DrawerHeader>
<DrawerPanel />
<DrawerFooter>
<DrawerClose />
</DrawerFooter>
</DrawerPopup>
</Drawer>Features
Positions
Drawer positioned along different screen edges (position="bottom" | "top" | "left" | "right").
Accessibility
- Traps focus within the drawer panel while open and locks background scroll.
- Supports physical swipe-down gestures and keyboard escape dismissal.
Keyboard Interactions
| Key | Action |
|---|---|
| Tab | Cycles focus through interactive elements inside the drawer. |
| Escape | Dismisses the drawer and returns focus to the trigger. |
Inset Variant
Drawer configured with inset margins across all four edge positions.
Straight Variant
Standard full-bleed straight drawer without rounded inset margins.
API Reference
Drawer
Root component. Wraps Drawer.Root from Base UI with automatic swipeDirection mapping based on position.
| Prop | Type | Default | Description |
|---|---|---|---|
position | right|left|top|bottom | bottom | Controls which edge the drawer opens from. Sets the swipe direction automatically and flows to child components via context |
swipeDirection | up|down|left|right | derived | Overrides the swipe direction derived from position. Use when you need different swipe behavior |
All other props from Drawer.Root are supported, including open, onOpenChange, modal, snapPoints, snapPoint, onSnapPointChange, and snapToSequentialPoints. Note: Snap points only work for bottom drawers.
DrawerCreateHandle
Creates a handle for detached drawer triggers. Use it when triggers and drawer content need to be coordinated across different parts of the tree.
DrawerTrigger
Trigger button that opens the drawer. Alias for Drawer.Trigger from Base UI.
DrawerPopup
Popup container that displays the drawer content.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|straight|inset | default | Controls the drawer style. straight removes rounded corners, inset adds spacing around the drawer on desktop screens |
showCloseButton | boolean | false | When true, displays a close button in the top-right corner |
showBar | boolean | false | When true, displays a drag bar indicator |
portalProps | Drawer.Portal.Props | - | Props forwarded to the internal portal (keepMounted, container, etc.); see Base UI Drawer portal API |
Example:
// Bottom drawer (default)
<Drawer>
<DrawerPopup>...</DrawerPopup>
</Drawer>
// Right side drawer
<Drawer position="right">
<DrawerPopup>...</DrawerPopup>
</Drawer>
// Left side drawer
<Drawer position="left">
<DrawerPopup>...</DrawerPopup>
</Drawer>
// Drawer with inset variant
<Drawer position="right">
<DrawerPopup variant="inset">...</DrawerPopup>
</Drawer>DrawerHeader
Container for the drawer title and description. Supports the render prop for polymorphic composition (e.g. render={<header />}).
| Prop | Type | Default | Description |
|---|---|---|---|
allowSelection | boolean | false | When true, wraps the header in DrawerContent to reduce swipe interference during mouse text selection |
DrawerFooter
Footer section for action buttons. Supports the render prop for polymorphic composition.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|bare | default | Controls the footer styling. default includes border and background, bare removes them |
allowSelection | boolean | true | When true, wraps the footer in DrawerContent to reduce swipe interference during mouse text selection |
DrawerTitle
Title component. Alias for Drawer.Title from Base UI.
DrawerDescription
Description component. Alias for Drawer.Description from Base UI.
DrawerPanel
Content container. When scrollable is true (default), wraps content in a ScrollArea component. Supports the render prop for polymorphic composition.
| Prop | Type | Default | Description |
|---|---|---|---|
scrollable | boolean | true | When true, wraps content in a ScrollArea. Set to false for non-scrollable content |
scrollFade | boolean | true | When true, shows a fade effect at scroll edges (only applies when scrollable is true) |
allowSelection | boolean | true | When true, wraps the panel in DrawerContent to reduce swipe interference during mouse text selection |
DrawerMenu
Container for drawer menu items. Use with DrawerMenuItem, DrawerMenuSeparator, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuCheckboxItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, and DrawerMenuTrigger to build menus that mirror the Menu component API. Supports the render prop for polymorphic composition.
DrawerMenuItem
Styled menu item that matches MenuItem appearance. Does not close the drawer — wrap with DrawerClose when close-on-click is needed. Supports the render prop for polymorphic composition.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|destructive | default | When destructive, uses destructive text color |
disabled | boolean | — | When true, disables the item |
Example: Use with DrawerClose for close-on-click: <DrawerClose render={<DrawerMenuItem />}>Edit</DrawerClose>
DrawerMenuSeparator
Horizontal separator between menu items or groups. Supports the render prop for polymorphic composition.
DrawerMenuGroup
Container for grouping related menu items. Use with DrawerMenuGroupLabel for labeled sections. Supports the render prop for polymorphic composition.
DrawerMenuGroupLabel
Label for a DrawerMenuGroup section. Renders muted, smaller text above a group of items. In nested drawers, use as a section title at the top of the menu (no back button needed — swipe to go back). Supports the render prop for polymorphic composition.
DrawerMenuTrigger
Trigger that opens a nested drawer. Styled like a menu item with a trailing chevron. Use for menu items that open nested drawers (e.g. "Add to Playlist" → nested drawer with playlist options). Wraps DrawerTrigger internally.
Example: <DrawerMenuTrigger>Add to Playlist</DrawerMenuTrigger> opens a nested drawer when tapped.
DrawerMenuCheckboxItem
Checkbox menu item for independent toggles. Supports variant="switch" for toggle-style switches, checked, defaultChecked, and onCheckedChange. For selection groups, use DrawerMenuRadioGroup with DrawerMenuRadioItem.
DrawerMenuRadioGroup
Container for radio menu items. Use with DrawerMenuRadioItem for mutually exclusive options (e.g. "Sort by" with Artist, Album, Title).
DrawerMenuRadioItem
Radio menu item. Must be used inside DrawerMenuRadioGroup with a value prop.
DrawerClose
Close button component. Alias for Drawer.Close from Base UI.
DrawerPortal
Portal component for rendering outside the DOM hierarchy. Alias for Drawer.Portal from Base UI.
DrawerBackdrop
Backdrop/overlay component. Alias for Drawer.Backdrop from Base UI.
DrawerViewport
Viewport component for positioning. Alias for Drawer.Viewport from Base UI. Typically not used directly — DrawerPopup renders it internally.
DrawerBar
Drag handle indicator shown when showBar is true on DrawerPopup. Typically not used directly.
DrawerContent
Primitive content wrapper used for polymorphic composition with the render prop. Alias for Drawer.Content from Base UI.
Examples
On This Page