Command Palette

Search for a command to run...

Drawer

shadcn/ui

A 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>

Installation

pnpm dlx shadcn@latest add @optics/drawer