<Dialog>
<Button>Open drawer</Button>
<Drawer>
<DialogContent>Drawer content</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.
"bottom" | "top" | "left" | "right"<Dialog>
<Button>Open Drawer</Button>
<Drawer placement="bottom">
<DialogContent>
<DialogHeader>
<DialogHeading>Drawer Title</DialogHeading>
<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>
</Dialog>Missing description.
| Prop | Type | Default | |
|---|---|---|---|
union | 'bottom' | ||
boolean | — | ||
boolean | — | ||
Element | document.body | ||
boolean | false | ||
boolean | false | ||
((element: Element) => boolean) | — | ||
ReactNode | function | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.