Drawer
A vaul-style panel that swipes in from an edge of the viewport, built for touch and mobile layouts.
Install
pnpm dlx shadcn@latest add @namche/drawerUsage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from '@/components/ui/drawer';
<Drawer showSwipeHandle>
<DrawerTrigger render={<Button variant="outline">Filters</Button>} />
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Filter deployments</DrawerTitle>
<DrawerDescription>Narrow the list by status.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<DrawerClose render={<Button>Apply filters</Button>} />
</DrawerFooter>
</DrawerContent>
</Drawer>Drawer defaults to swipeDirection="down" (a bottom sheet) and modal;
pass swipeDirection="left" | "right" | "up" to swipe from another edge, or
snapPoints for a multi-stage sheet. showSwipeHandle renders the grab
handle used for touch dismissal — it's off by default since not every drawer
is swipe-driven. DrawerContent reads its layout from the parent Drawer,
so it must always be rendered inside one.