Components
Modal
In ProgressCentered overlay dialog for confirmations, forms, and focused interactions. Closes on backdrop click or Esc. Body scroll is locked while the modal is open.
Default
Confirm action
Are you sure you want to proceed? This action cannot be undone.
Size variants
Small (400px)
This is the sm size variant.
Medium (520px)
This is the md size variant.
Large (640px)
This is the lg size variant.
Sub-components
ModalHeader, ModalBody, and ModalFooter are exported standalone for custom modal layouts. All three accept className and standard HTMLDivElement props.
// Canonical two-button footer using sub-components<Modal isOpen={open} onClose={close}> <ModalHeader> <h2 className="text-lg font-semibold flex-1">Delete record</h2> </ModalHeader> <ModalBody> <p className="text-sm text-gray-600">This action cannot be undone.</p> </ModalBody> <ModalFooter> <div className="flex justify-end gap-2"> <Button variant="ghost" onClick={close}>Cancel</Button> <Button variant="destructive" onClick={handleDelete}>Delete</Button> </div> </ModalFooter></Modal>| Component | Role |
|---|---|
| ModalHeader | Flex row with bottom border — place title and close button here |
| ModalBody | Scrollable content area with vertical padding |
| ModalFooter | Sticky bottom bar with top border — place action buttons here |
Usage
import { Modal, ModalHeader, ModalBody, ModalFooter } 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 |
| size | "sm" | "md" | "lg" | "sm" | Panel width: 400 / 520 / 640 px |
| footer | ReactNode | — | Sticky footer content (e.g. action buttons) |
| children | ReactNode | — | Scrollable body content |
| className | string | — | Layout utilities only (margin, padding, width) |