build69
build69  /  Components  /  Data Display  /  List

List

v1.0.4Updated 28 Sept 2026

Vertical list primitive with rich slots — avatar / leading icon / primary / secondary / trailing actions. Compound API: List.Item, List.Avatar, List.Action.

View source← Back to catalog

Preview

Live · 16 stories
DefaultOpen ↗
▸Why this is recommendedlistrowscompoundmui+2

The default, out-of-the-box List.

Recommended for+14
  • ✓Settings sub-lists
  • ✓Side-panel rows
  • ✓Picker / menu rows
  • ✓Notification feeds
Tags+6
listrowscompoundmuisidebardefault
Features+4
  • Compound List.Item / List.Avatar / List.Action API
  • Rich slots (avatar, leading icon, primary, secondary, trailing)
  • Densities (compact / normal / comfortable)
  • Card / bordered variants
  • Selectable rows
  • Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a)
Not recommended for−2
  • ✕Tabular data with sort / filter (use DataTable)
  • ✕Tree data (use TreeView)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "List" })

Usage

import { List } from '@/components/data-display/list';

<List variant="card">
  <List.Item primary="Palakorn" secondary="palakorn@build69.com" />
  <List.Item primary="Mali" secondary="mali@build69.com" />
</List>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
variant

Visual style

'default' | 'card' | 'bordered'—
density

Row density

'compact' | 'normal' | 'comfortable'—
linkComponent

The host app link component for the overlay anchor of every row that has an href (data-slot="list-item-link"). ListItem.onClick already receives the click EVENT. MCP feedback fb_bf7dc63a.

ListLinkComponent—

Related

Platform docsAll componentsSource files