Skip to main content

Dialog

Modal dialog with focus trap, Escape to close, overlay click, and motion.

Destructive confirm

Form body + primary action

Auto-sizing form (widens + two columns when roomy)

Footer with icons

Icon-only footer actions

Title only (no description)

Icon-only trigger

Overlay dismiss

Click outside the panel or press Escape to close (default closeOnOverlay).

Overlay blur

overlayBlur — named preset or custom px. Default is default (6px).

Animation variants

enterAnimationVariant — open and close each panel to compare fluid spring motion (default, spring, zoom) vs legacy ease presets.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
open / onCloseOptionalboolean + callbackVisibility control.
title / descriptionOptionalstringAccessible dialog header.
footerOptionalReactNodeAction buttons row.
closeOnOverlayOptionalbooleantrueClick outside to dismiss.
enterAnimationVariantOptionalEnterAnimationVariantdefaultPanel enter/exit — default and spring use fluid spring physics (Animate UI–style); zoom is a stronger pop; subtle keeps legacy ease motion; fade, slide-*, scale, or none.
overlayBlurOptionalDialogOverlayBlur | numberdefaultBackdrop blur preset (`none`, `subtle` 4px, `default` 6px, `strong` 12px) or a custom px value. Fade-only when `none` or `0`.