SayUI
← Library→ Turn this into a prompt
Overlays & feedback

Modal Dialog

A centered window that blocks the page until the user responds.

Also known as dialog · confirm dialog · alert dialog

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Modal Dialog".

Implement a modal dialog: center it over a scrim, trap focus while open, close on Esc and (optionally) scrim click, restore focus to the trigger on close, and include clear primary/secondary actions.

Anatomy:
- scrim / backdrop: Dims the page and intercepts clicks behind the dialog.
- surface: The card that holds title, body, and actions.
- actions: Primary and secondary buttons; mark destructive actions clearly.

Preferred API / pattern: `shadcn Dialog / Radix Dialog`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: No focus trap
  • ○Avoid: Scrim click always closes forms with unsaved input
  • ○Avoid: Missing Esc handling or focus return to the trigger.
  • ○Avoid: Using a modal for a one-line success message

In plain wordsHow people search for it

“the box that pops up in the middle and dims everything behind it”“the 'Are you sure?' window after I hit delete”“a popup I have to deal with before I can touch anything else”

AnatomyOpen for part names

scrim / backdrop
Dims the page and intercepts clicks behind the dialog.
surface
The card that holds title, body, and actions.
actions
Primary and secondary buttons; mark destructive actions clearly.

How to write itOpen for stack patterns

Web (HTML/CSS)<dialog>.showModal()
React + Tailwind + shadcn/uishadcn Dialog / Radix Dialog
SwiftUI.alert / .sheet / confirmationDialog
Ant DesignModal.confirm() / <Modal open>

Notes

Modals trap focus, sit above a scrim, and require an explicit dismiss. Prefer native <dialog> or a well-tested focus trap. Don't use a modal for lightweight status—that's a toast. Don't bury critical deletes behind only a toast either.

Help me choose: Toast vs Modal →Help me choose: Modal vs Drawer →Help me choose: Tooltip / Popover vs Modal →

Common mistakesHumans and models trip here

  • No focus trap: Tab leaks into the page behind the dialog.
  • Scrim click always closes forms with unsaved input: disable mask close or confirm first.
  • Missing Esc handling or focus return to the trigger.
  • Using a modal for a one-line success message: use a toast instead.

More failure symptoms on AI broke it.

Related vibesLooks often pair with

Flat DesignMaterial DesigniOS Human InterfaceSkeuomorphismLiquid GlassAquaWindows Aero

Related patterns

Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.Scrim / Overlay / BackdropA translucent layer under an overlay that dims the page and blocks clicks.Drawer / Side SheetA panel that slides in from an edge, usually over a scrim, for secondary tasks.

Spotted a wrong name or missing pattern?

Message on X