Docs/ListItem

ListItem

Structured list item with leading, title, subtitle, and trailing slots.

Usage

tsx

1import { ListItem } from '@storm-ds/ui'
2import { File } from '@storm-ds/icons'
3
4<ListItem
5  leading={<File className="w-5 h-5" />}
6  title="document.pdf"
7  subtitle="Updated 2 days ago"
8  trailing={<span className="text-xs text-storm-muted-foreground">12 KB</span>}
9/>

Basic

Simple item

With subtitle

Secondary text

tsx

1<ListItem title="Simple item" />
2<ListItem title="With subtitle" subtitle="Secondary text" />

With Slots

Alice Brown

alice@example.com

Active

Charlie Davis

charlie@example.com

Pending

tsx

1<ListItem
2  leading={<Avatar fallback="AB" size="sm" />}
3  title="Alice Brown"
4  subtitle="alice@example.com"
5  trailing={<Badge>Active</Badge>}
6/>

File List

report.pdf

2.4 MB

Today

Documents

12 items

Yesterday

tsx

1<ListItem leading={<File className="w-5 h-5" />} title="report.pdf" subtitle="2.4 MB" />
2<ListItem leading={<Folder className="w-5 h-5" />} title="Documents" subtitle="12 items" />

Props

Prop	Type	Default	Description
title	string	-	Primary text (required)
subtitle	string	-	Secondary text below title
leading	React.ReactNode	-	Element before text (icon, avatar)
trailing	React.ReactNode	-	Element after text (badge, action)
truncate	boolean	true	Truncate overflowing text
className	string	-	Custom classes

Use with AI

Create a list using Storm UI's ListItem. Import: `import { ListItem } from '@storm-ds/ui'`. Props: title (required string), subtitle (optional), leading (icon/avatar slot), trailing (badge/action slot), truncate (boolean, default true). Use for user lists, file lists, settings rows. Example: `<ListItem leading={<Avatar fallback="AB" size="sm" />} title="Alice" subtitle="alice@example.com" trailing={<Badge>Active</Badge>} />`

Resizable

PageHeader