Overlays

Banner header dialog

A modal window with a colored banner strip across its top edge, sitting over a dimmed and fully inert copy of the page behind it.

Plate Studio

Autosave off

Autumn campaign v3

Last saved manually, 2 hours ago

Using Banner header dialog

A modal window with a colored banner strip across its top edge, sitting over a dimmed and fully inert copy of the page behind it.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: bannerColor, panelWidth, closeOnOverlayClick

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2324Confirm action modalOverlaysA centered confirmation dialog that springs open over a dimming backdrop, asking the visitor to confirm or cancel a destructive action.

2335Dismissible DialogOverlaysA general-purpose centered dialog that opens over a blurred backdrop and can be casually dismissed by its close button, the backdrop or Escape.

2419Scrollable modal dialogOverlaysA general-purpose modal with a header, a body that scrolls independently once its content overflows, and a footer, closable by its own close button, an outside click, or Escape.

2041Slide up panel dialogOverlaysA centered dialog that rises into place over a dimmed scrim, for any content that needs a moment of full attention.

2306Blocking alert dialogOverlaysA centered dialog that demands an explicit choice before it will close, used for irreversible actions the visitor must not dismiss by accident.

1923Bounce warning dialogOverlaysA confirmation dialog that pops in with a springy overshoot and a bouncing icon badge, demanding a response before the page below becomes usable again.