<Dialog>
<Button>Open drawer</Button>
<Drawer>
<DialogContent>
<DrawerHandle />
<DialogHeader>
<DialogTitle>Drag me down</DialogTitle>
</DialogHeader>
<DialogBody>Or click outside to dismiss.</DialogBody>
</DialogContent>
</Drawer>
</Dialog>npx shadcn@latest add @dotui/drawerUse drawers to display content that slides in from the edge of the screen.
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Drawer } from "@/components/ui/drawer";<Dialog>
<Button>Open Drawer</Button>
<Drawer placement="bottom">
<DialogContent>Drawer content</DialogContent>
</Drawer>
</Dialog>Use the controls below to experiment with different drawer props and see the live preview and code update.
The side of the screen where the drawer appears.
DrawerPlacement<Dialog>
<Button>Open Drawer</Button>
<Drawer$1 placement="bottom">
<DialogContent>
<DialogHeader>
<DialogTitle>Drawer Title</DialogTitle>
<DialogDescription>This is a drawer description.</DialogDescription>
</DialogHeader>
<DialogBody>
<p>Drawer content goes here.</p>
</DialogBody>
<DialogFooter>
<Button slot="close">Close</Button>
</DialogFooter>
</DialogContent>
</Drawer$1>
</Dialog>A React Aria compatible drawer overlay powered by Base UI's Drawer overlay primitives.
| Prop | Type | Default | |
|---|---|---|---|
DrawerPlacement | 'bottom' | ||
boolean | true | ||
boolean | true | ||
boolean | false |
Last updated on 5/22/2026