Components / Modal

Modal

Use the modal plugin to layer semantic HTML5 <dialog> windows above the page for confirmations, focused tasks, or fully custom content flows.

The API follows a Bootstrap-like mental model: a trigger declares what it wants to toggle, a target points to the modal instance, and the dialog itself remains a visual surface you can style with Tailwind.

How It Works

Modals are built with HTML, CSS, and JavaScript. They sit above the document flow, use the native dialog API for focus and escape behavior, and close automatically when the backdrop is clicked.

System attributes control behavior. Tailwind classes remain free for spacing, color, animation, elevation, and any visual language you want to apply.

Attribute	Role
data-tw-toggle="modal"	Declares that the trigger controls a modal component.
data-tw-target="#exampleModal"	Points to the target modal by selector-like id reference.
data-tw-dismiss="modal"	Closes the nearest managed modal.
data-tw-modal	Marks the dialog as a managed modal root.
data-modal-panel	Marks the visible panel inside the full-screen dialog root.
data-tw-position	Sets layout position: `top`, `start`, `center`, `end`, `bottom`.

Live Demo

Toggle a working modal demo by clicking a button below. Each example uses the same modal engine with a different data-tw-position value.

Markup

<button
  data-tw-toggle="modal"
  data-tw-target="#modal-center"
>
  Open modal
</button>

<dialog
  id="modal-center"
  data-tw-modal
  data-tw-position="center"
  class="fixed inset-0 m-0 flex h-full w-full max-h-none max-w-none bg-transparent p-6"
>
  <section
    data-modal-panel
    class="w-full max-w-lg rounded-3xl bg-white text-stone-950 shadow-2xl transition duration-300"
  >
    ...
  </section>
</dialog>

Notes

The root dialog handles positioning and backdrop behavior.

The panel receives focus automatically when the modal opens.

Legacy attributes still work, but the recommended API is data-tw-toggle, data-tw-target, and data-tw-dismiss.