Overlays & Modals HTML5 <dialog> Tailwind v4 @starting-style Zero-JS

Dialog

Native HTML <dialog> modal with backdrop blur, @starting-style entry animations, and accessible focus trapping.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Dialog component to your project via CLI:

terminal bash

npx plain-ui add dialog

Features

✓ Pure HTML5 native <dialog> element
✓ Automatic top layer rendering with showModal()
✓ CSS backdrop styling with backdrop:bg-black/60 and backdrop:backdrop-blur-sm
✓ Close on backdrop click and Escape key dismissal built-in
✓ Zero external dependencies or bundle overhead

Variants & Examples

Confirmation Alert

Destructive confirmation dialog modal for irrevocable actions.

dialog-confirmation-alert.html html

<div>
  <button 
    onclick="document.getElementById('confirm-modal').showModal()"
    class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg cursor-pointer"
  >
    Delete Account
  </button>

  <dialog 
    id="confirm-modal"
    onclick="if(event.target === this) this.close()"
    class="p-0 rounded-2xl bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 shadow-2xl border border-zinc-200 dark:border-zinc-800 backdrop:bg-black/60 backdrop:backdrop-blur-xs max-w-sm w-full m-auto"
  >
    <div class="p-6 space-y-4">
      <div class="w-12 h-12 rounded-full bg-red-100 dark:bg-red-950/60 text-red-600 flex items-center justify-center">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
      </div>
      <div>
        <h3 class="text-lg font-semibold">Are you absolutely sure?</h3>
        <p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">
          This action cannot be undone. This will permanently delete your account and all associated workspace data.
        </p>
      </div>
      <div class="flex items-center justify-end gap-2 pt-2">
        <button onclick="document.getElementById('confirm-modal').close()" class="px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg cursor-pointer">Cancel</button>
        <button onclick="document.getElementById('confirm-modal').close()" class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg cursor-pointer">Confirm Delete</button>
      </div>
    </div>
  </dialog>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
showModal()	method	-	Opens dialog as a modal on the browser top-layer with backdrop.
close()	method	-	Closes the open dialog element.
backdrop:bg-black/60	class	-	Tailwind pseudo-class for styling ::backdrop overlay.

Accessibility & Keyboard Navigation

• Native <dialog> automatically manages keyboard focus trapping while open.
• Pressing Escape key closes the modal by default in modern browsers.
• Screen readers recognize role='dialog' and announce title when focused.

← Button Popover →