Drawer
@/components/kamod-ui/drawer
Installation
Import Drawer primitives from `@/components/kamod-ui/drawer` (same surface as shadcn drawer; no Vaul runtime).
pnpm add @kamod-ch/uiUsage
Set `direction` on `Drawer` (`top` | `right` | `bottom` | `left`). `DrawerContent` defaults `showCloseButton` to false (use footer actions). Use `showHandle={false}` to hide the top/bottom affordance bar.
import { Drawer } from "@/components/kamod-ui/drawer";<Drawer />Demo
Goal stepper and simple bar strip (shadcn DrawerDemo pattern, no Recharts).
Basic
Trigger opens a bottom drawer with title and description.
Scrollable content
Right drawer with scroll region; footer stays in the sheet layout (shadcn Scrollable Content).
Sides
Each `direction` opens from that edge (shadcn Sides).
Responsive dialog
Dialog from md breakpoint up, Drawer below (shared `open` / `onOpenChange`). Resize the viewport to compare.
API Reference
Props, slots and variants for this component.
Drawer
Drawer component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| Drawer direction | "top" | "right" | "bottom" | "left" | "bottom" |
| open | boolean | uncontrolled |
| defaultOpen | boolean | false |
| onOpenChange | (open: boolean) => void | undefined |
| DrawerContent showHandle | boolean | true for top/bottom |
| DrawerContent showCloseButton | boolean | false |
| DrawerTrigger / DrawerClose asChild | boolean | false |
Accessibility Notes
Use DrawerTitle and DrawerDescription for the dialog context. The drag handle is aria-hidden; provide explicit actions (e.g. Cancel) in the footer. For responsive patterns, keep the same form labels and control ids in Dialog and Drawer branches.