List Component

<List className="bg-base-100 rounded-box shadow-md">

    <ListRow

        avatar={ <Avatar>...</Avatar> }

        title="Song Title"

        subtitle="Artist Name"

        actions={ [<Button />, <Button />] }

/>

</List>

0 selected

<ListRow

    selectable

    selected={ isSelected }

    onSelect={ (checked) => setSelected(checked) }

    avatar={ <Avatar>...</Avatar> }

    title="Item title"

/>

// Example layout structure

<div className="flex flex-col gap-4">

    <List>...</List>

    <div className="flex justify-center">

        <Pagination ... />

    </div>

</div>

<ListRow

    leading={ <div className="text-4xl">01</div> }

    avatar={ <Avatar>...</Avatar> }

    grow={ <CustomContent /> }

    growColumn={ 3 }

/>

Songs with descriptions
Dio Lupa
Remaining Reason
"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth.
Ellie Beilish
Bears of a fever
"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics.
Sabrino Gardener
Cappuccino
"Cappuccino" quickly gained attention for its smooth melody and relatable themes.

<ListRow

    avatar={ <Avatar>...</Avatar> }

    title="Title"

    subtitle="Subtitle"

    wrap={ <p>Long description that wraps...</p> }

    actions={ <Button /> }

/>

<ListRow

    clickable

    onClick={ () => handleClick() }

    title="Clickable item"

/>

<ListRow

    avatar={ <Avatar indicator="online">...</Avatar> }

    grow={ <div><h3>Name</h3><p>Email</p></div> }

    content={ <div><Badge>Role</Badge></div> }

    actions={ [<Button />, <Button />, <Button />] }

/>

<ListRow

    leading={ <Rating /> }

    grow={ <ProductInfo /> }

    content={ <Price /> }

    actions={ <Button>Add to Cart</Button> }

/>

Prop	Type	Description
`avatar`	ReactNode	Avatar element (replaced by checkbox when selectable)
`selectable`	boolean	Show checkbox instead of avatar
`selected`	boolean	Checkbox selected state
`onSelect`	function	Selection change handler: (checked) => void
`title`	string	Main title text
`subtitle`	string	Subtitle text (small, uppercase)
`leading`	ReactNode	Element before avatar/checkbox
`grow`	ReactNode	Custom content for grow column
`growColumn`	number	Which column grows (default: 2)
`wrap`	ReactNode	Content that wraps to next row
`actions`	ReactNode \| Array	Action buttons on the right
`clickable`	boolean	Add hover/cursor styles
`onClick`	function	Row click handler