Modal

Dialog overlay. Two patterns: body-only, or with footer actions. Requires Alpine.js.

Two patterns

<button @click="open = true" class="btn btn-primary">Open</button>

<template x-teleport="body">
  <div x-show="open" x-cloak>
    <div class="modal-overlay" x-transition.opacity @click="open = false"></div>
    <div class="modal-wrapper" x-transition>
      <div class="modal" @click.outside="open = false">
        <div class="modal-body">
          <button @click="open = false" class="modal-close">...</button>
          <h3 class="h3">Title</h3>
        </div>
      </div>
    </div>
  </div>
</template>

Size variants

Use .modal-lg or .modal-xl for wider dialogs.

Large modal

Use for longer forms and content that needs more horizontal space.

Extra large modal

Use for wide workflows, previews, or comparison views.

<div class="modal modal-lg">...</div>
<div class="modal modal-xl">...</div>