List Group
Vertical list of rows for menus, cart items, notifications, and search results — with optional icons, avatars, badges, and actions.
Bordered — cart items
Wrapped in its own border so it reads as a contained block — the right shape for a cart drawer or order summary card.
-
Cotton Crewneck Tee
Size M · Charcoal
2Rp 149.000 -
Canvas Tote Bag
Natural
1Rp 89.000 -
Ceramic Mug Set of 2
Sand
1Rp 129.000
Flush — clickable action list
No outer border, so it sits naturally inside a card that provides its own edge. Each row is a real <a> for keyboard and screen-reader navigation, not a <div> with a click handler.
-
Account details
Name, email, password
-
Shipping addresses
2 saved addresses
-
Payment methods
1 card on file
-
Notifications
Email and push preferences
With status badges — order history
A trailing badge composes cleanly with list-col-grow — the badge keeps its own width and never gets squeezed by the growing text column.
-
Delivered
#INV-2241
Jun 12, 2026 · Rp 367.000
-
Shipped
#INV-2198
May 28, 2026 · Rp 149.000
-
Cancelled
#INV-2150
May 14, 2026 · Rp 89.000
With avatars — notification feed
Long content wraps onto its own line via list-col-wrap instead of stretching the row or getting clipped — see the second notification below.
-
Dio Lupa left a 5-star review on your store
-
Ellie Beilish asked a question about order #INV-2241 — "Is this still eligible for an exchange given the size doesn't fit as expected?"
-
Sabrino Gardener requested a refund
Numbered — ranked list
A large, low-opacity ordinal in its own column — DaisyUI's own ranked-list pattern, useful for top-sellers or leaderboard widgets.
-
01
Cotton Crewneck Tee
-
02
Canvas Tote Bag
-
03
Ceramic Mug Set of 2
Empty state
Zero rows means no list at all — an empty <ul> renders as blank space with no explanation. Always pair a list group with this fallback.
Your cart is empty. Items you add will show up here.