Drawer
OverlaysA panel that slides in from the edge of the screen. Use drawers for secondary content, settings panels, or detailed views that don't warrant a full page.
Import
import {
Drawer,
DrawerHeader,
DrawerTitle,
DrawerBody,
DrawerFooter
} from "@/components/ui/drawer";Usage
Basic Drawer
Simple drawer from the right
Settings Drawer
Drawer with form controls
API Reference
open*—booleanWhether the drawer is open
onClose*—() => voidHandler called when drawer should close
side"right""left" | "right"Side from which the drawer appears
size"md""sm" | "md" | "lg"Width of the drawer
| Prop | Type | Default | Description |
|---|---|---|---|
open* | boolean | — | Whether the drawer is open |
onClose* | () => void | — | Handler called when drawer should close |
side | "left" | "right" | "right" | Side from which the drawer appears |
size | "sm" | "md" | "lg" | "md" | Width of the drawer |