JGuang
中

List

List · daisyUI

Preview
npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47

List

Arrange media, text and actions with list-row while retaining list semantics and reading order. Reflow columns on narrow screens and avoid nested interaction conflicts with whole-row activation.

Installation and initialization

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47

This is a native CSS plugin, not a React component import. Build Tailwind 4 with the daisyUI plugin and load the generated stylesheet before copying an example. See the included setup guide; do not override an existing project's React or Tailwind versions blindly.

@import "tailwindcss";
@plugin "daisyui" { themes: light --default, dark --prefersdark; }

Source and executable behavior

Source files preserve the original code fences, including original comments and demo strings. The $$ class prefix placeholder must be resolved for your plugin configuration: without a prefix, $$btn becomes btn. Copy every listed source file for the chosen example, combine HTML/CSS/JS appropriately and implement native events. The preview's reviewed event adapters are not a backend or an automatically installed application runtime.

Complete first example

<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/1@94.webp"/></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 aria-label="Play" 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 aria-label="Favorite" 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/4@94.webp"/></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 aria-label="Play" 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 aria-label="Favorite" 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/3@94.webp"/></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 aria-label="Play" 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 aria-label="Favorite" 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>

All runnable examples

List (second column grows - default)

list-1

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/list/block-0.html

List (third column grows)

list-2

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/list/block-1.html

List (third column wraps to next row)

list-3

npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47
  • examples/list/block-2.html

Theme, accessibility and verification

Use native data-theme boundaries. Verify keyboard operation, labels, visible focus, disabled/invalid states where applicable, light/dark, mobile and reduced motion. Check your target browser's dialog, popover and CSS feature support. CSS classes do not supply unimplemented JavaScript or business services. Clean up timers and third-party instances; copying a command is not installation success.

Source and license

https://github.com/saadeghi/daisyui/tree/c51f50130ffefb293179e6fce8de7ad3f307e45f

JGuang authors these bilingual practical notes; this is not a claim of translating the complete upstream documentation. Original Markdown, code and CSS remain available in the source viewer. Preserve MIT and separate dependency notices. All native-package notices are included conservatively, including build tools; no build binary or remote demo image is redistributed. Replace remote media with assets you are authorized to use. Commercial templates are outside this integration.