Drawer
Panels that slide in from any edge of the screen.
Swipe direction (top · right · bottom · left)
A drawer that can open from any of the four edges.
API reference
A swipeable panel that slides in from an edge: a Trigger opens a portalled overlay + Content, with header/footer, title, and description.
Full props on Base UI DrawerAnatomy
Drawer | Root setting modality, snap points, and swipe direction. |
DrawerPortal | Renders the drawer outside the DOM tree. |
DrawerOverlay | Swipe-aware dimmed backdrop behind the drawer. |
DrawerSwipeHandle | Aria-hidden grip for dragging the drawer. |
DrawerTrigger | Element that opens the drawer on click. |
DrawerClose | Button that closes the drawer. |
DrawerContent | Portalled panel that slides in from an edge. |
DrawerHeader | Styled div stacking the title and description. |
DrawerFooter | Styled footer pinned to the bottom. |
DrawerTitle | Styled heading text for the drawer. |
DrawerDescription | Muted supporting text under the title. |