Drawer
View on shadcn/uiA panel that slides in from the edge of the screen, ideal for mobile navigation and forms.
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/drawer.jsonUsage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";<Drawer>
<DrawerTrigger>Open drawer</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Drawer title</DrawerTitle>
<DrawerDescription>Description of the drawer content.</DrawerDescription>
</DrawerHeader>
<div className="p-4">Your content goes here</div>
<DrawerFooter>
<Button>Submit</Button>
<DrawerClose>
<Button variant="outline">Cancel</Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>Direction
The drawer supports four directions: top, bottom, left, and right. By default, it slides in from the bottom.
<Drawer direction="right">{/* … */}</Drawer>API reference
This component is built on top of Vaul. For additional props and detailed API documentation, refer to the Vaul documentation.