All components
Drawer
Slide-in panels anchored to any viewport edge, with header, body, and footer slots.
Variants
start
end
top
bottom
Sizes
xs
sm
md
lg
xl
Install
zsh — drawer
1bunx stylexblocks add drawerUsage — Base UI
drawer.tsx
1234567891011121314151617181920212223242526272829303132import { Drawer } from "#components/ui/base-ui/drawer.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
// Base UI ships no drawer machine — this is Base UI's Dialog machine wearing// the drawer slot recipe. Popup renders the edge-aligning positioner around// Base UI's popup inside the portal.export function Example() { return ( <Drawer.Root placement="end" size="xs"> <Drawer.Trigger render={<Button variant="surface" />}> Open drawer </Drawer.Trigger> <Drawer.Portal> <Drawer.Backdrop /> <Drawer.Popup> <Drawer.Header> <Drawer.Title>Filters</Drawer.Title> <Drawer.Close aria-label="Close">×</Drawer.Close> </Drawer.Header> <Drawer.Body> <Drawer.Description> Narrow results by status, owner, or date range. </Drawer.Description> </Drawer.Body> <Drawer.Footer> <Button variant="solid">Apply</Button> </Drawer.Footer> </Drawer.Popup> </Drawer.Portal> </Drawer.Root> );}