CleenUI · Overlays · Modal

Modal

Centered modal with backdrop, focus trap, ESC-to-close, and stacked-modal support.

storybook.cleenui.com · overlays-modal--default
Open in new window

About Modal

Modal is the centered-dialog primitive. Three size variants (small, medium, large) and a full-screen mode cover the common dialog patterns. Header, body, and footer slots structure the content consistently.

Focus is trapped inside the modal while open; on close, focus returns to the element that triggered the modal. Stacked modals (a modal opening another modal) work correctly — z-index and dismissal stack predictably.

When to use it

  • Confirmation dialogs before destructive actions.
  • Inline edit forms over a list view.
  • Detail views of a list-row item.
  • Multi-step modal wizards (combine with Wizard).

Common props

Prop
Type
Description
open
boolean
Controlled open state.
onClose
() => void
Fires on backdrop click, ESC, or close button.
size
"sm" | "md" | "lg" | "full"
Modal size.
closeOnBackdrop
boolean
Allow backdrop click to close.
title
string
Header title.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.