Modal

this isn’t a component yet, but here’s how you do a modal

BASIC MODAL

<button
  type="button"
  class="btn btn-primary"
  aria-haspopup="dialog"
  aria-expanded="false"
  aria-controls="basic-modal"
  data-overlay="#basic-modal"
>
  Open modal
</button>

<div
  id="basic-modal"
  class="overlay modal overlay-open:opacity-100 hidden"
  role="dialog"
  tabindex="-1"
>
  <div class="modal-dialog overlay-open:opacity-100">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">Dialog Title</h3>
        <button
          type="button"
          class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
          aria-label="Close"
          data-overlay="#basic-modal"
        >
          <span class="icon-[tabler--x] size-4"></span>
        </button>
      </div>
      <div class="modal-body">
        This is some placeholder content to show the scrolling behavior for
        modals. Instead of repeating the text in the modal, we use an inline
        style to set a minimum height, thereby extending the length of the
        overall modal and demonstrating the overflow scrolling. When content
        becomes longer than the height of the viewport, scrolling will move
        the modal as needed.
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-soft btn-secondary"
          data-overlay="#basic-modal">Close</button
        >
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>