build69
Sign inGet API key
build69  /  Components  /  Data Display  /  List

List

v1.0.1Updated 20 Jul 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
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'—

Related

Platform docsAll componentsSource files