Sidesheet

Trigger Sheet

            
<!-- Trigger Sheet -->
<button data-type="sheets" data-target="#sheet_xa" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-800 shadow-outset text-primary-700 dark:text-primary-200">Side Sheet</button>

<!-- Sidesheet -->
<div id="sheet_xa" class="[&.show_.bgDialog]:opacity-90 [&.show_.bgDialog]:inset-0 [&.show_.dialog]:translate-x-0">
  <div data-close="#sheet_xa" class="bgDialog fixed z-[60] opacity-0 -top-full bg-primary-100 dark:bg-primary-900"></div>
  <!-- Body -->
  <div class="dialog fixed top-3 bottom-3 w-2/3 sm:w-[320px] min-h-[80vh] z-[70] bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-800 shadow-inset-fixed transition-transform duration-[400ms] flex flex-col gap-2 right-0 rounded-l-2xl translate-x-full translate-x-0">
    <div class="min-h-[56px] flex flex-row items-center gap-3 px-6 pt-6">
      <h3 class="flex flex-grow text-base tracking-[.009375em]">Your Side Sheet Title</h3>
      <button data-close="#sheet_xa" class="flex items-center justify-center">
        <span>x</span>
      </button>
    </div>
    <div class="relative text-left text-base px-6 py-4 h-[80vh] overflow-auto scrollbars">
      <p>This is the content of your side sheet.</p>
    </div>
  </div>
</div>