Stack

Stack visually puts elements on top of each other.

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
stack
Component
Puts the children elements on top of each other

3 divs without stack

1
2
3
<div>
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-accent text-accent-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded">
    3
  </div>
</div>
<div>
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-accent text-accent-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded">
    3
  </div>
</div>

3 divs with stack

1
2
3
<div class="$$stack">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-accent text-accent-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded">
    3
  </div>
</div>
<div class="$$stack">
  <div class="bg-primary text-primary-content grid h-20 w-32 place-content-center rounded">1</div>
  <div class="bg-accent text-accent-content grid h-20 w-32 place-content-center rounded">2</div>
  <div class="bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded">
    3
  </div>
</div>

stacked images

Tailwind CSS example 1 Tailwind CSS example 2 Tailwind CSS example 3
<div class="$$stack">
  <img
    src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
    class="rounded" />
  <img
    src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
    class="rounded" />
  <img
    src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
    class="rounded" />
</div>
<div class="$$stack">
  <img
    src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
    class="rounded" />
  <img
    src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
    class="rounded" />
  <img
    src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
    class="rounded" />
</div>

stacked cards

A
B
C
<div class="$$stack">
  <div class="border-base-content $$card bg-base-100 w-36 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 w-36 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 w-36 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>
<div class="$$stack">
  <div class="border-base-content $$card bg-base-100 w-36 border text-center">
    <div class="$$card-body">A</div>
  </div>
  <div class="border-base-content $$card bg-base-100 w-36 border text-center">
    <div class="$$card-body">B</div>
  </div>
  <div class="border-base-content $$card bg-base-100 w-36 border text-center">
    <div class="$$card-body">C</div>
  </div>
</div>

stacked cards with shadow

A
B
C
<div class="$$stack">
  <div class="$$card bg-base-200 w-36 text-center shadow-md">
    <div class="$$card-body">A</div>
  </div>
  <div class="$$card bg-base-200 w-36 text-center shadow">
    <div class="$$card-body">B</div>
  </div>
  <div class="$$card bg-base-200 w-36 text-center shadow-sm">
    <div class="$$card-body">C</div>
  </div>
</div>
<div class="$$stack">
  <div class="$$card bg-base-200 w-36 text-center shadow-md">
    <div class="$$card-body">A</div>
  </div>
  <div class="$$card bg-base-200 w-36 text-center shadow">
    <div class="$$card-body">B</div>
  </div>
  <div class="$$card bg-base-200 w-36 text-center shadow-sm">
    <div class="$$card-body">C</div>
  </div>
</div>

stacked cards

Notification 1

You have 3 unread messages. Tap here to see.

Notification 2

You have 3 unread messages. Tap here to see.

Notification 3

You have 3 unread messages. Tap here to see.

<div class="$$stack">
  <div class="$$card bg-primary text-primary-content shadow-md">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 1</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card bg-primary text-primary-content shadow">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 2</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card bg-primary text-primary-content shadow-sm">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 3</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
</div>
<div class="$$stack">
  <div class="$$card bg-primary text-primary-content shadow-md">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 1</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card bg-primary text-primary-content shadow">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 2</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
  <div class="$$card bg-primary text-primary-content shadow-sm">
    <div class="$$card-body">
      <h2 class="$$card-title">Notification 3</h2>
      <p>You have 3 unread messages. Tap here to see.</p>
    </div>
  </div>
</div>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser