Drawer
shadcn/uiA drawer component built on top of Vaul.
Drawer
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/optics/drawer";import { Button } from "@/components/optics/button";import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";<Drawer> <DrawerTrigger render={<Button variant="raised">Open Drawer</Button>} /> <DrawerContent> <DrawerHeader> <DrawerTitle> Are you absolutely sure? </DrawerTitle> <DrawerDescription> This action cannot be undone. </DrawerDescription> </DrawerHeader> <div className="p-4 pb-0"> <div className="space-y-4"> <div className="grid gap-2"> <Label htmlFor="email"> Email </Label> <Input id="email" placeholder="name@example.com" /> </div> </div> </div> <DrawerFooter> <Button> Submit </Button> <DrawerClose render={<Button variant="raised">Cancel</Button>} /> </DrawerFooter> </DrawerContent></Drawer>import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/optics/drawer";import { Button } from "@/components/optics/button";import { Input } from "@/components/optics/input";import { Label } from "@/components/optics/label";<Drawer> <DrawerTrigger render={<Button variant="raised">Open Drawer</Button>} /> <DrawerContent> <DrawerHeader> <DrawerTitle> Are you absolutely sure? </DrawerTitle> <DrawerDescription> This action cannot be undone. </DrawerDescription> </DrawerHeader> <div className="p-4 pb-0"> <div className="space-y-4"> <div className="grid gap-2"> <Label htmlFor="email"> Email </Label> <Input id="email" placeholder="name@example.com" /> </div> </div> </div> <DrawerFooter> <Button> Submit </Button> <DrawerClose render={<Button variant="raised">Cancel</Button>} /> </DrawerFooter> </DrawerContent></Drawer>Installation
pnpm dlx shadcn@latest add @optics/drawer