Modal

<Modal>TailwindCSS Modules

A dialog box that overlays the primary content, requiring the user to interact with it before they can return to the main application.

InstallationColoxo CLI
npx coloxo add modal --style coloxo-css
ES Module ImportPlayground / npm package
import { Modal } from '@coloxo/ui';

Design Tokens:

--cx-bg-primary: #FFFFFFoverlay: rgba(15, 23, 42, 0.4)--cx-radius-xl: 12pxshadow: 2xl

1. Variant Matrix

Modals scale across 4 distinct widths (sm, md, lg, xl) to accommodate varying amounts of content.

Small (sm)Medium (md)Large (lg)Extra Large (xl)
Sizes

2. Interactive Props Configurator

Show Footer

Close on Backdrop Click

Visual Render Canvas
tsx
const triggerRef = useRef(null);<Button ref={triggerRef} onClick={() => setOpen(true)}>Open</Button><Modal  open={open}  onOpenChange={setOpen}  originRef={triggerRef}  title="Edit employee"  description="Changes apply to the core profile."  footer={...}>  <Input label="Preferred name" /></Modal>

3. Dark theme

The modal backdrop and surface automatically adapt to dark mode.

4. Enterprise layout compositions

Modals trap focus within their bounds. If you need a side panel, consider using the Drawer component instead.

Data Actions

Accessibility

Focus Trap

Focus is automatically trapped inside the Modal. Tabbing cycles through the focusable elements within the dialog.

ARIA Labels

Title and description are linked to the dialog via `aria-labelledby` and `aria-describedby`.

Props

NameTypeDefaultDescription
openboolean—Controlled open state.
onOpenChange(open: boolean) => void—State change handler.
titleReactNode—Modal heading (mapped to DialogTitle).
descriptionReactNode—Subtitle (mapped to DialogDescription).
footerReactNode—Action bar at the bottom.
size"sm" | "md" | "lg" | "xl"mdMax width of dialog.
closeOnBackdropClickbooleantrueDismiss on overlay click.
originRefRefObject<HTMLElement | null>—Trigger element; modal enter/exit scale originates from its center.