Drawer
A panel that slides in from the bottom edge of the screen, built on vaul — a drag-aware, mobile-friendly alternative to a centred Dialog.
Install
npx shadcn@latest add https://atomx.acau.net/r/drawer.jsonUsage
Use a Drawer for content that should slide up from the bottom of the screen and can be swiped away — it reads naturally on touch devices. Prefer Dialog for a centred modal on desktop, and Alert Dialog when the user must explicitly confirm or cancel.
Wrap the trigger in DrawerTrigger and the panel body in DrawerContent. DrawerHeader, DrawerFooter, DrawerTitle, and DrawerDescription structure the content; DrawerClose dismisses the drawer.
<Drawer>
<DrawerTrigger asChild>
<Button variant="outline">Open drawer</Button>
</DrawerTrigger>
<DrawerContent>
<div className="mx-auto w-full max-w-sm">
<DrawerHeader>
<DrawerTitle>Are you sure?</DrawerTitle>
<DrawerDescription>This action cannot be undone.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<Button>Confirm</Button>
<DrawerClose asChild>
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</div>
</DrawerContent>
</Drawer>Preview
Props
| Component | Notable props |
|---|---|
Drawer | open / onOpenChange for controlled use. shouldScaleBackground (default true) scales the page behind the drawer. direction — "top" | "bottom" | "left" | "right". |
DrawerTrigger | Any element. asChild to render the child as the trigger. |
DrawerContent | The sliding panel. className for height/style overrides. Includes a drag handle. |
DrawerHeader / DrawerFooter | Layout wrappers for the top and bottom regions. |
DrawerTitle / DrawerDescription | Accessible heading and supporting text. |
DrawerClose | Dismisses the drawer. asChild to wrap your own button. |
Direction
Provides reading-direction (LTR/RTL) context to Radix-based atomx components, built on Radix UI's DirectionProvider.
Dropdown Menu
A menu of actions or options anchored to a trigger button, built on Radix UI's DropdownMenu primitive — with items, labels, separators, shortcuts, checkboxes, radio groups, and sub-menus.