Skip to content

Standard Overlays & Menus

Modal Dialog

Accessible native modal dialog with inert background, Escape close, backdrop dismissal, and focus restoration.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add standard-modal-dialog
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

Modal Dialog

Modal Dialog

Live preview of the Modal Dialog component

Project details

A native modal keeps focus in this panel until it closes. Press Escape or use either close control.

This content can contain links, buttons, or any React children. The page behind remains inert while the dialog is open.

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Modal Dialog component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Standard Overlays & Menus components

Browse all →

Alert Dialog

Confirmation dialog with least-destructive initial focus, async action support, Escape cancellation, and focus restoration.

Dropdown Action Menu

Action menu button with arrow and typeahead navigation, disabled items, separators, Escape close, and focus return.