Preview
Installation
<> import.ts
import { Drawer } from "@/components/ui/drawer"Code
<> component.tsx
import { Drawer } from "@/components/ui/drawer"
<Drawer />API Reference
Drawer
A sliding panel from any screen edge with overlay and header.
<> import.ts
import { Drawer } from "@/components/ui/drawer"Props
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | — | Controls visibility |
onClose | () => void | — | Called to close the drawer |
title | string | — | Header title |
description | string | — | Header description |
children | React.ReactNode | — | Drawer body content |
className | string | "" | Additional CSS classes |
position | "left" | "right" | "top" | "bottom" | "right" | Slide-in side |
size | "sm" | "md" | "lg" | "xl" | "md" | Panel dimensions |
showCloseButton | boolean | true | Show header close button |