Overlays/Drawer
Drawer
A slide-in panel that overlays the page from any edge. Perfect for settings panels, navigation menus, and detail views.
import { Drawer, DrawerHeader, DrawerBody } from "@animui/ui"Basic usage
Toggle the drawer with a boolean open prop.
Placement
Use the side prop to slide in from any edge.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls whether the drawer is visible. |
onClose | () => void | — | Called when the overlay or close button is clicked. |
side | "left" | "right" | "top" | "bottom" | "right" | Which edge of the screen the drawer slides in from. |
size | "sm" | "md" | "lg" | "full" | "md" | Controls the drawer width (for left/right) or height (for top/bottom). |
children | React.ReactNode | — | Content rendered inside the drawer panel. |
Accessibility
- ✓Focus is trapped inside the drawer while open.
- ✓Pressing
EscapecallsonClose. - ✓The overlay backdrop is a focusable button that closes on click.