Browse components

List

Maps an items array to a semantic ul of rows. Compose ListItem inside your own ul when rows need trailing badges, amounts or controls.

atoms

Live example

Default usage you can copy and adapt.

Each item needs id and label. Add more fields in later examples.

Optional description renders as muted text beneath the title.

Pass a Lucide icon on rows that need one; omit it where plain text is enough.

avatar is an image URL. Set avatarAlt for meaningful photos; use "" when decorative. Avatar wins over icon if both are set.

selectedId marks the current row. Wrap the list in list-group for border, padding, and surface styling.

ListItemData has no trailing slot. Compose your own <ul> and pass the trailing snippet on ListItem for badges, status, or short meta.

Set icon on the item; add currency, totals, or labels in trailing only.

The props you are most likely to need, with types and defaults.

Props / API
Name	Type	Required	Default	Description
items	ListItem[]	Yes	[]	Array of ListItemData: id, label, optional description, href, icon, avatar, avatarAlt, disabled, link target / rel
ariaLabel	string	No	List items	Accessible label for the list container
selectedId	string	No	—	Current selected item id for active styling
showArrow	boolean	No	true	Toggle the right arrow icon visibility
class	string	No	—	Additional Tailwind classes on the <ul> (e.g. border, padding, background)
onclick	(item, event) => void	No	undefined	Callback fired when an item is clicked