Components
Drawer
In ProgressSide panel that slides in from the left or right edge of the screen. Closes on backdrop click or Esc. Body scroll is locked while the drawer is open.
Design system component. Fully styled by the UX team — no color or style changes needed. Choose a variant, provide your content, and wire your handler or route.
Default
Transaction details
Transaction ID
tx_abc123def456
Amount
$1,200.00 USD
Status
Completed
Network
BSV
Created on
Feb 24, 2026, 3:45 PM
Currency
MNEE
Width variants
Small (320px)
This is the sm width variant.
Medium (480px)
This is the md width variant.
Large (600px)
This is the lg width variant.
XL (800px)
This is the xl width variant.
Side
Left drawer
This drawer slides in from the left.
Right drawer
This drawer slides in from the right.
Usage
import { Drawer } from "@mnee-ui/ui"Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | — | Controls open/close state |
| onClose | () => void | — | Called on backdrop click or Esc key |
| title | string | — | Header title text |
| width | "sm" | "md" | "lg" | "xl" | "md" | Panel width: 320 / 480 / 600 / 800 px |
| side | "left" | "right" | "right" | Edge the drawer slides in from |
| footer | ReactNode | — | Sticky footer content (e.g. Close button) |
| children | ReactNode | — | Scrollable body content |
| className | string | — | Layout utilities only (margin, padding, width) |