Stacks

Basic Stack

A Stack is a wrapper around other elements, making it's children appear on top of each other.

This example uses a slightly transparent background and some clever padding to show the effect.

Top Stack

Middle Stack

Bottom Stack

- card_css = "bg-base-100/80 border-base-300 border shadow-lg text-center"
= daisy_stack do
  = daisy_card(css: card_css + " pb-2") do
    Top Stack
  = daisy_card(css: card_css + " py-1") do
    Middle Stack
  = daisy_card(css: card_css + " pt-2") do
    Bottom Stack

Animated Stack

You can also do some slick effects with a library like Anime.js!

Preview

Click to remove and see the cards underneath.

Stack 1

Stack 2

Stack 3

Can't Remove Me!

Code

%div
  %p.my-4
    Click to remove and see the cards underneath.

  .flex.justify-center.items-center
    - card_css = "border-base-300 border shadow-lg cursor-pointer text-center transition-transform"
    - card_html = { onclick: "(function(el) { anime({ targets: el, duration: 400, easing: \"easeInQuad\", translateY: \"-100%\", opacity: 0, complete: function() { el.remove() } }) })(this)" }

    = daisy_stack do
      = daisy_card(css: card_css + " bg-primary text-white", html: card_html) do
        Stack 1
      = daisy_card(css: card_css + " bg-secondary text-white", html: card_html) do
        Stack 2
      = daisy_card(css: card_css + " bg-accent text-white", html: card_html) do
        Stack 3
      = daisy_card(css: card_css + " bg-neutral text-neutral-content cursor-default!") do
        Can't Remove Me!

Stack Positions

DaisyUI 5 introduces directional stacking with stack-top, stack-bottom, stack-start, and stack-end CSS classes. These allow you to position the stacked elements in different directions.

Preview

stack-top

stack-bottom

stack-start

stack-end

Code

.grid.grid-cols-2.gap-6
  .space-y-2
    %p.font-medium.text-center stack-top
    .stack.stack-top.size-28
      - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"
      = daisy_card(css: card_css + " bg-primary text-white") do
        1
      = daisy_card(css: card_css + " bg-secondary text-white") do
        2
      = daisy_card(css: card_css + " bg-accent text-white") do
        3

  .space-y-2
    %p.font-medium.text-center stack-bottom
    .stack.stack-bottom.size-28
      - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"
      = daisy_card(css: card_css + " bg-primary text-white") do
        1
      = daisy_card(css: card_css + " bg-secondary text-white") do
        2
      = daisy_card(css: card_css + " bg-accent text-white") do
        3

  .space-y-2
    %p.font-medium.text-center stack-start
    .stack.stack-start.size-28
      - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"
      = daisy_card(css: card_css + " bg-primary text-white") do
        1
      = daisy_card(css: card_css + " bg-secondary text-white") do
        2
      = daisy_card(css: card_css + " bg-accent text-white") do
        3

  .space-y-2
    %p.font-medium.text-center stack-end
    .stack.stack-end.size-28
      - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"
      = daisy_card(css: card_css + " bg-primary text-white") do
        1
      = daisy_card(css: card_css + " bg-secondary text-white") do
        2
      = daisy_card(css: card_css + " bg-accent text-white") do
        3

CSS Stack

The Stack component simply applies the stack CSS class, which you can also use directly.

You can also add spacing between stacked elements using gap utilities like gap-3. Adjust the slider below to see how different gap values affect the stack.

Preview

Gap size: 3

Code

.space-y-4{ data: { controller: "stack-gap" } }
  .flex.items-center.gap-4
    %span.text-sm.min-w-16 Gap size:
    %span.badge.badge-primary{ data: { stack_gap_target: "label" } } 3
    %input.range.range-primary{
      type: "range",
      min: "1",
      max: "5",
      value: "3",
      data: { stack_gap_target: "slider", action: "input->stack-gap#updateGap" }
    }

  .stack.w-96{ data: { stack_gap_target: "stack", class: "gap-3" } }
    %img{ src: image_path("landscapes/beach.jpg") }
    %img{ src: image_path("landscapes/desert.jpg") }
    %img{ src: image_path("landscapes/forest.jpg") }

Basic Stack

Animated Stack

Stack Positions

CSS Stack

Docs

Guides

Hero

Daisy