Drawer
OverlaysSide panel (left/right/bottom sheet) built on the same modal machinery as Dialog — one focus implementation, two presentations.
import { Drawer } from "@componentforge/react";
Examples
Right-side settings panel
Accessibility
- Same focus trap, restore and aria-modal semantics as Dialog.
- Slide animations respect prefers-reduced-motion.
Keyboard interactions
| Key | Action |
|---|---|
| Escape | Close the drawer. |
| Tab / Shift+Tab | Cycle focus within the panel. |
API reference
Selected props — every component also spreads native HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| Content.side | "left" | "right" | "bottom" | "right" | Edge the panel docks to. |
| Content.label | string | "" | Accessible name when no Title is used. |
| open / defaultOpen / onOpenChange | — | false | Identical controlled/uncontrolled contract as Dialog. |