List
List is a vertical layout to display information in rows.
| Class name | Type | |
|---|---|---|
| list | Component | A vertical flex layout to include list rows |
| list-row | Component | The item inside list. A horizontal grid layout to include data |
| list-col-wrap | Modifier | For one of direct children of list-row to push it to the next line |
| list-col-grow | Modifier | For one of direct children of list-row to make it fill the remaining space |
By default, the second child of the
list-rowwill fill the remaining space. You can uselist-col-growon another child to make it fill the remaining space instead.
- Most played songs this week
Dio LupaRemaining Reason
Ellie BeilishBears of a fever
Sabrino GardenerCappuccino
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul><ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul>- Most played songs this week
- 01Dio LupaRemaining Reason
- 02Ellie BeilishBears of a fever
- 03Sabrino GardenerCappuccino
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div class="$$list-col-grow">
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">02</div>
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div class="$$list-col-grow">
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">03</div>
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div class="$$list-col-grow">
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
</ul><ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div class="$$list-col-grow">
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">02</div>
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div class="$$list-col-grow">
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div class="text-4xl font-thin opacity-30 tabular-nums">03</div>
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div class="$$list-col-grow">
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
</li>
</ul>- Most played songs this week
- Dio LupaRemaining Reason
"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
- Ellie BeilishBears of a fever
"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.
- Sabrino GardenerCappuccino
"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.
<ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<p class="$$list-col-wrap text-xs">
"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<p class="$$list-col-wrap text-xs">
"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<p class="$$list-col-wrap text-xs">
"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul><ul class="$$list bg-base-100 rounded-box shadow-md">
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Most played songs this week</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Dio Lupa</div>
<div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
</div>
<p class="$$list-col-wrap text-xs">
"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Ellie Beilish</div>
<div class="text-xs uppercase font-semibold opacity-60">Bears of a fever</div>
</div>
<p class="$$list-col-wrap text-xs">
"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
<li class="$$list-row">
<div><img class="size-10 rounded-box" alt="Tailwind CSS list item" src="https://img.daisyui.com/images/profile/demo/[email protected]"/></div>
<div>
<div>Sabrino Gardener</div>
<div class="text-xs uppercase font-semibold opacity-60">Cappuccino</div>
</div>
<p class="$$list-col-wrap text-xs">
"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.
</p>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
</button>
<button class="$$btn $$btn-square $$btn-ghost">
<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
</button>
</li>
</ul>Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
BLUEPRINT