List

Vertical layout for structured data rows

By default, the second child of the list-row will fill the remaining space. You can use list-col-grow on another child to make it fill the remaining space instead.

Basic

Basic List

second column fills remaining space (Default)

Preview Code Auto

Most played songs this week
Dio Lupa

Remaining Reason
Ellie Beilish

Bears of a fever
Sabrino Gardener

Cappuccino

Ul(
    Li('Most played songs this week', cls='p-4 pb-2 text-xs opacity-60 tracking-wide'),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Dio Lupa'),
            Div('Remaining Reason', cls='text-xs uppercase font-semibold opacity-60')
        ),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Ellie Beilish'),
            Div('Bears of a fever', cls='text-xs uppercase font-semibold opacity-60')
        ),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Sabrino Gardener'),
            Div('Cappuccino', cls='text-xs uppercase font-semibold opacity-60')
        ),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
cls='list bg-base-100 rounded-box shadow-md'
)

Custom Growing Column

Third column grows

Preview Code Auto

Most played songs this week
01

Dio Lupa

Remaining Reason
02

Ellie Beilish

Bears of a fever
03

Sabrino Gardener

Cappuccino

Ul(
    Li('Most played songs this week', cls='p-4 pb-2 text-xs opacity-60 tracking-wide'),
    Li(
        Div('01', cls='text-4xl font-thin opacity-30 tabular-nums'),
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Dio Lupa'),
            Div('Remaining Reason', cls='text-xs uppercase font-semibold opacity-60'),
            cls='list-col-grow'
        ),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div('02', cls='text-4xl font-thin opacity-30 tabular-nums'),
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Ellie Beilish'),
            Div('Bears of a fever', cls='text-xs uppercase font-semibold opacity-60'),
            cls='list-col-grow'
        ),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div('03', cls='text-4xl font-thin opacity-30 tabular-nums'),
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Sabrino Gardener'),
            Div('Cappuccino', cls='text-xs uppercase font-semibold opacity-60'),
            cls='list-col-grow'
        ),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    cls='list bg-base-100 rounded-box shadow-md'
)

Wrapping Column

Third column wraps to next row

Preview Code Auto

Most played songs this week
Dio Lupa

Remaining 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 Beilish

Bears 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 Gardener

Cappuccino

"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(
    Li('Most played songs this week', cls='p-4 pb-2 text-xs opacity-60 tracking-wide'),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Dio Lupa'),
            Div('Remaining Reason', cls='text-xs uppercase font-semibold opacity-60')
        ),
        P('"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.', cls='list-col-wrap text-xs'),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Ellie Beilish'),
            Div('Bears of a fever', cls='text-xs uppercase font-semibold opacity-60')
        ),
        P('"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.', cls='list-col-wrap text-xs'),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/[email protected]', cls='size-10 rounded-box')
        ),
        Div(
            Div('Sabrino Gardener'),
            Div('Cappuccino', cls='text-xs uppercase font-semibold opacity-60')
        ),
        P('"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.', cls='list-col-wrap text-xs'),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    cls='list bg-base-100 rounded-box shadow-md'
)

Class Reference

Class	Type	Description
list	Component	Vertical flex container
list-row	Component	Horizontal grid row
list-col-wrap	Modifier	Pushes column to next line
list-col-grow	Modifier	Makes column fill remaining space

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo