UI ComponentsOverlays
Drawer
A resizable modal panel attached to a viewport edge.
Import
import { Drawer } from "@puzzle-ui/ui";Position and dismissal
Provide controlled state and an accessible name. Drag the resize handle or use its keyboard interaction to resize. Dragging below the minimum dismisses the drawer.
API
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | Required | Controlled visibility. |
onOpenChange | (open: boolean) => void | Required | Visibility-change request. |
position | "left" | "right" | "top" | "bottom" | "left" | Viewport edge and transition direction. |
closeOnEscape | boolean | true | Escape dismissal. |
aria-label | string | "Drawer" | Accessible dialog name. |
aria-labelledby | string | - | Visible heading ID; overrides aria-label. |
children | ReactNode | - | Drawer content. |
Supported div attributes and classes are forwarded to content. Drawer provides a modal backdrop, focus management, and scroll locking, but does not portal itself. Wrap it in Portal if ancestors would clip or constrain it. Backdrop clicks request closing; include an explicit close action.