Primitive · CLI
Drawer
Edge panel with panelTween slide, backdrop fade, and portal presence.
Preview
npx shadcn@latest add @atroui/drawerInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/drawerSource lands in your repo. Installation · Registry
Usage
Use for mobile filters or side settings. Panel slides with panelTween; backdrop fades. Prefer Dialog for centered focus tasks.
tsx
import { Button } from "@/components/ui/button"
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer"
<Drawer side="right">
<DrawerTrigger render={<Button variant="outline" />}>Open drawer</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Filters</DrawerTitle>
<DrawerDescription>Stay on the page; options travel from the edge.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
<DrawerClose render={<Button />}>Apply</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>Drawer