Drawer
A mobile-first slide-in panel from the bottom, powered by Vaul.
drawer-demo.app
Installation
terminal.sh
npx y2kui add drawer
Usage
import {
Drawer,
DrawerTrigger,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerDescription,
} from "@/components/ui/drawer"
<Drawer>
<DrawerTrigger asChild>
<Button>Open</Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Title</DrawerTitle>
<DrawerDescription>Description</DrawerDescription>
</DrawerHeader>
<p>Content goes here.</p>
</DrawerContent>
</Drawer>Props
| Prop | Type | Default | Description |
|---|---|---|---|
Drawer | see Vaul | — | Root. Accepts open, onOpenChange, snapPoints. |
DrawerContent | ReactNode | — | Slide-up panel with drag handle. |
DrawerTrigger | ReactNode | — | Button that opens the drawer. |
DrawerHeader | ReactNode | — | Groups title and description. |
DrawerFooter | ReactNode | — | Action area at the bottom. |