Drawer
Slide-in side panel with backdrop overlay, animated via Framer Motion. Renders through a portal to document.body. Supports left/right positioning and three color themes.
[SRC]tsx
1import { Drawer } from "@mdrbx/nerv-ui";
Basic Usage
[i]INTERACTIVE
Click the button to open the drawer. Click the [X] button or the backdrop to close.
DEFAULT (RIGHT)inspection frame
live inspectionframe-01
Left Side + Color
LEFT / GREENinspection frame
live inspectionframe-01
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open* | boolean | — | Whether the drawer is open |
| onClose* | () => void | — | Called when the drawer should close |
| title | string | — | Header title displayed in the title bar |
| side | "left" | "right" | "right" | Which side the drawer slides in from |
| width | string | "400px" | Drawer width (any CSS value) |
| color | "orange" | "green" | "cyan" | "orange" | Color theme for borders, text, and glow |
| children | ReactNode | — | Drawer body content |
| className | string | "" | Additional CSS classes on the panel |
[i]PORTAL RENDERING
Drawer renders via createPortal to document.body, so it always overlays
the full viewport regardless of parent positioning context.