List

Static, non-interactive list. For selectable or actionable rows use ListBox / ListView.

Import

import { List, ListItem } from '@marbleui/ui'

Props

<List>

Prop	Type	Default	Description
variant	`'divided' \| 'card' \| 'plain'`	`'divided'`

Also accepts HTML element props (278).

<ListItem>

Prop	Type	Default
title *required	`ReactNode`	`—`
className	`string`	`—`
description	`ReactNode`	`—`
leading	`ReactNode`	`—`
trailing	`ReactNode`	`—`

Usage notes

Static, non-interactive list of rows with leading, title, description and trailing slots. For selectable or actionable rows use ListBox or ListView; for key–value pairs use DataList.

<List variant="card">
  <ListItem leading={<Avatar name="Maya Chen" size="sm" />} title="Maya Chen" description="Design Engineer" trailing="Amsterdam" />
  <ListItem title="Charles Webb" description="Staff Engineer" />
</List>

variant is divided (default), card or plain. List is a ul and takes HTML attributes.
ListItem is a li; title and description truncate to one line.
With variant="plain" you can put your own li children in List instead of ListItem.

Example source · show

import { Avatar } from '../avatar'
import { List, ListItem } from './list'

const people = [
  { name: 'Maya Chen', role: 'Design Engineer', tz: 'Amsterdam' },
  { name: 'Charles Webb', role: 'Staff Engineer', tz: 'New York' },
  { name: 'Ada Lovelace', role: 'Research', tz: 'London' },
]

export const styles = {
  Card: () => (
    <List variant="card" className="w-80">
      {people.map((p) => (
        <ListItem key={p.name} leading={<Avatar size="sm" name={p.name} />} title={p.name} description={p.role} trailing={<span className="text-xs">{p.tz}</span>} />
      ))}
    </List>
  ),
  Plain: () => (
    <List variant="plain" className="w-72">
      {['Unlimited projects', 'SSO & SCIM', 'Audit log', 'Priority support'].map((f) => (
        <li key={f} className="flex items-center gap-2 text-fg">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="size-4 text-success-fg" aria-hidden><path d="m3.5 8.5 3 3 6-7" /></svg>
          {f}
        </li>
      ))}
    </List>
  ),
}

Source: packages/ui/src/list/list.tsx

Catalog

Category: data-display
Priority: Core
Primitive: custom