List

Vertical list of interactive or static items. Supports subheaders, leading icons and avatars, secondary text, trailing actions, selected and disabled states.

import{ List, ListItem } from "@pepulux/ui"

Basic list with dividers

Simple text items with bottom borders.

Inbox

4 new messages

Sent

12 messages

Drafts

2 drafts

With leading icons

Pass any ReactNode as leading. Icons are rendered in text-n-500.

Inbox

4 new messages

Sent

12 messages

With leading avatars

Use the leading slot for avatars in contact/user lists.

Olivia Rhye

olivia@example.com

Phoenix Baker

phoenix@example.com

Lana Steiner

lana@example.com

With trailing actions and badges

Pass a ReactNode as trailing — icon buttons, chevrons, or unread counts.

Inbox

4 unread

Starred

With subheader and selected state

List.subheader adds a section label. selected prop highlights the active item.

Folders

Inbox

Sent

Drafts

Trash

Disabled items

Individual items can be disabled — they appear dimmed and non-interactive.

Available

Disabled option

Also available

Props

Prop	Type	Default	Description
subheader	string	—	Section label displayed above the list items
dense	boolean	false	Reduces vertical padding on each item
disablePadding	boolean	false	Removes top/bottom padding on the list wrapper
children*	ReactNode	—	ListItem children
className	string	—	Additional CSS classes on the list wrapper

Props

Prop	Type	Default	Description
primary*	string	—	Main line text
secondary	string	—	Smaller sub-text below primary
leading	ReactNode	—	Icon, avatar, or other element on the left
trailing	ReactNode	—	Icon button, count badge, or chevron on the right
onClick	() => void	—	Makes the item interactive — adds hover background and pointer cursor
selected	boolean	false	Highlights item with brand-subtle background
disabled	boolean	false	Dims and prevents interaction
divider	boolean	false	Adds a bottom border (last item border suppressed)
className	string	—	Additional CSS classes on the item wrapper