Sheet

<!-- Backdrop wraps the sheet -->
<div class="sheet-backdrop" data-state="closed" id="demo-sheet">
  <div class="sheet sheet-auto">
    <div class="sheet-handle">
      <div class="sheet-handle-bar"></div>
    </div>
    <div class="sheet-header">
      <h3 class="sheet-title">Sheet Title</h3>
      <button class="sheet-close" onclick="this.closest('.sheet-backdrop').dataset.state='closed'">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>
    <div class="sheet-content">
      <p>Sheet content goes here. The sheet slides up from the bottom.</p>
    </div>
    <div class="sheet-footer">
      <button class="btn color-primary" onclick="this.closest('.sheet-backdrop').dataset.state='closed'">Confirm</button>
      <button class="btn" onclick="this.closest('.sheet-backdrop').dataset.state='closed'">Cancel</button>
    </div>
  </div>
</div>
<button class="btn color-primary" onclick="document.getElementById('demo-sheet').dataset.state='open'">Open Sheet</button>

Requires: ux.min.css

<div class="fixed inset-0 bg-black/40 z-50 opacity-0 invisible transition-all" data-state="closed">
  <div class="fixed left-0 right-0 bottom-0 flex flex-col max-h-[90dvh] bg-base-100 rounded-t-2xl shadow-xl translate-y-full transition-transform">
    <div class="flex items-center justify-center py-2"><div class="w-9 h-1 bg-base-300 rounded-full"></div></div>
    <div class="flex items-center justify-between px-6 py-2 border-b border-base-200">
      <h3 class="text-lg font-semibold">Title</h3>
      <button class="flex items-center justify-center w-8 h-8 rounded-full bg-base-200">&times;</button>
    </div>
    <div class="flex-1 overflow-y-auto p-6">Content</div>
    <div class="flex flex-col gap-2 p-4 border-t border-base-200">
      <button class="btn color-primary">Confirm</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// Open:  document.getElementById('demo-sheet').dataset.state = 'open';
// Close: document.getElementById('demo-sheet').dataset.state = 'closed';

<!-- Small (40dvh) -->
<div class="sheet sheet-sm">...</div>

<!-- Medium (60dvh) -->
<div class="sheet sheet-md">...</div>

<!-- Large (80dvh) -->
<div class="sheet sheet-lg">...</div>

<!-- Full screen -->
<div class="sheet sheet-full">...</div>

<!-- Auto (content height, max 90dvh) -->
<div class="sheet sheet-auto">...</div>

Requires: ux.min.css

<!-- Small -->
<div class="fixed inset-x-0 bottom-0 bg-base-100 rounded-t-2xl shadow-2xl h-[40dvh]">...</div>

<!-- Medium -->
<div class="fixed inset-x-0 bottom-0 bg-base-100 rounded-t-2xl shadow-2xl h-[60dvh]">...</div>

<!-- Large -->
<div class="fixed inset-x-0 bottom-0 bg-base-100 rounded-t-2xl shadow-2xl h-[80dvh]">...</div>

<!-- Full screen -->
<div class="fixed inset-x-0 bottom-0 bg-base-100 rounded-t-2xl shadow-2xl h-dvh">...</div>

<!-- Auto (content height) -->
<div class="fixed inset-x-0 bottom-0 bg-base-100 rounded-t-2xl shadow-2xl h-auto max-h-[90dvh]">...</div>

Requires: tw.min.css

// No JavaScript required for sizing

<div class="sheet-backdrop" data-state="closed" id="demo-action-sheet">
  <div class="action-sheet">
    <div class="action-sheet-group">
      <div class="action-sheet-header">
        <h4 class="action-sheet-title">Choose an action</h4>
        <p class="action-sheet-message">Select one of the options below</p>
      </div>
      <button class="action-sheet-btn">
        <span class="action-sheet-btn-icon">
          <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
        </span>
        Share
      </button>
      <button class="action-sheet-btn">Edit</button>
      <button class="action-sheet-btn action-sheet-btn-destructive">Delete</button>
    </div>
    <div class="action-sheet-group">
      <button class="action-sheet-btn action-sheet-btn-cancel" onclick="this.closest('.sheet-backdrop').dataset.state='closed'">Cancel</button>
    </div>
  </div>
</div>
<button class="btn" onclick="document.getElementById('demo-action-sheet').dataset.state='open'">Open Action Sheet</button>

Requires: ux.min.css

<div class="fixed inset-0 bg-black/50 flex items-end justify-center p-2" data-state="closed">
  <div class="flex flex-col gap-2 w-full max-w-md">
    <div class="bg-base-100 rounded-2xl overflow-hidden">
      <div class="text-center px-4 pt-4 pb-2">
        <h4 class="text-sm font-semibold text-base-content m-0">Choose an action</h4>
        <p class="text-xs text-base-content/50 mt-1 m-0">Select one of the options below</p>
      </div>
      <button class="flex items-center justify-center gap-2 w-full min-h-14 px-4 text-primary font-medium text-base border-t border-base-200 bg-transparent hover:bg-base-200 cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
        Share
      </button>
      <button class="w-full min-h-14 px-4 text-primary font-medium text-base border-t border-base-200 bg-transparent hover:bg-base-200 cursor-pointer">Edit</button>
      <button class="w-full min-h-14 px-4 text-error font-medium text-base border-t border-base-200 bg-transparent hover:bg-base-200 cursor-pointer">Delete</button>
    </div>
    <div class="bg-base-100 rounded-2xl overflow-hidden">
      <button class="w-full min-h-14 px-4 text-primary font-semibold text-base bg-transparent hover:bg-base-200 cursor-pointer">Cancel</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// Open/close via data-state on the backdrop
// The cancel button closes the sheet