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 — Ark UI
drawer.tsx
12345678910111213141516171819202122232425262728293031import { Drawer } from "#components/ui/ark-ui/drawer.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
// The drawer is Ark's Dialog machine wearing the drawer slot recipe —// placement slides the panel in from any viewport edge.export function Example() { return ( <Drawer.Root placement="end" size="xs"> <Drawer.Trigger asChild> <Button variant="surface">Open drawer</Button> </Drawer.Trigger> <Drawer.Backdrop /> <Drawer.Positioner> <Drawer.Content> <Drawer.Header> <Drawer.Title>Filters</Drawer.Title> <Drawer.CloseTrigger aria-label="Close">×</Drawer.CloseTrigger> </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.Content> </Drawer.Positioner> </Drawer.Root> );}