Modal

A dialog overlay that focuses the user's attention on a specific task or piece of information. Composed with Modal.Content, Modal.Header, Modal.Body, and Modal.Footer.

Basic Usage

Click the button below to open a modal with a header, body, and footer.

Scrollable Content

When the body content is long, it scrolls automatically.

Welcome

An onboarding modal with icon, description, and a full-width CTA button.

Success

A centered confirmation modal for successful actions.

Upgrade

A pricing/upgrade modal with feature checklist.

Backdrop

Three backdrop styles: opaque (dark overlay), blur (frosted glass), and transparent (no backdrop).

Modal Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the modal is open (controlled).
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`backdrop`	`"opaque" \| "blur" \| "transparent"`	`"opaque"`	Backdrop style behind the modal.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

open

boolean

Whether the modal is open (controlled).

onOpenChange

(open: boolean) => void

Called when the open state changes.

backdrop"opaque"

"opaque" | "blur" | "transparent"

Backdrop style behind the modal.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

Modal.Content Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Modal content, typically Modal.Header, Modal.Body, and Modal.Footer.

children

ReactNode

Modal content, typically Modal.Header, Modal.Body, and Modal.Footer.

Modal.Header Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The header title content.

children

ReactNode

The header title content.

Modal.Body Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The main body content of the modal.

children

ReactNode

The main body content of the modal.

Modal.Footer Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	The footer content, typically action buttons.

children

ReactNode

The footer content, typically action buttons.