Data displayGenerated from the public API

List

A sequence of comparable rows on one hairline grid, with the slots that keep ten rows aligned.

@luc/ui

Examples

Default

A real list, not a column of cards: one hairline between rows, and the same five slots on every row so the eye can run down the column.

Momentum, 90 days
12 symbols · annualised 14.2%
2m agoPassed
Mean reversion, 30 days
8 symbols · annualised 6.1%
1h agoRunning
Carry, 180 days
Provider returned 503 for the last session
YesterdayFailed

<List aria-label="Recent backtests" bordered divided>
  <ListItem
    leading={<Icon name="play" />}
    title="Momentum, 90 days"
    description="12 symbols · annualised 14.2%"
    meta="2m ago"
    trailing={<Badge tone="positive">Passed</Badge>}
  />
  <ListItem
    leading={<Icon name="alert" />}
    title="Carry, 180 days"
    description="Provider returned 503 for the last session"
    meta="Yesterday"
    trailing={<Badge tone="negative">Failed</Badge>}
  />
</List>

Edges and a count

The header and footer are the list's own edges — a title with the one action it is about, and the count that says whether to keep reading.

Recent runs

Last 24 hours

Live

Run 128
09:14
Run 127
08:52

Showing 2 of 1,284

<ListHeader title="Recent runs" description="Last 24 hours" actions={<Badge>Live</Badge>} />
<List divided aria-label="Recent runs">
  <ListItem title="Run 128" meta="09:14" />
  <ListItem title="Run 127" meta="08:52" />
</List>
<ListFooter>Showing 2 of 1,284</ListFooter>

Bare rows

Without `bordered` the list is just the rows, which is what a panel or a sidebar wants.

BTCUSDT
1h · 1,284 bars
0.4%
ETHUSDT
1h · 1,284 bars
−0.2%

<List aria-label="Symbols">
  <ListItem title="BTCUSDT" description="1h · 1,284 bars" meta="0.4%" />
  <ListItem title="ETHUSDT" description="1h · 1,284 bars" meta="−0.2%" />
</List>

Usage

import { List } from "@luc/ui";

<List bordered divided aria-label="Recent backtests">
  <ListItem title="Momentum, 90 days" description="12 symbols" meta="2m ago" />
</List>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`List`	2 documented props	`({ className, divided, bordered, ...props }: ListProps) => import("@types/react").JSX.Element`
`ListFooter`	export	`({ className, ...props }: ListFooterProps) => import("@types/react").JSX.Element`
`ListHeader`	3 documented props	`({ className, title, description, actions, ...props }: ListHeaderProps) => import("@types/react").JSX.Element`
`ListItem`	5 documented props	`({ className, leading, title, description, meta, trailing, children, ...props }: ListItemProps) => import("@types/react").JSX.Element`

List props

Type: ListProps

Values the compiler reads from the declaration.

List props
Prop	Type	Default	Notes
`bordered?`	`boolean \| undefined`	`—`	A border and a radius around the whole list, for a standalone surface.
`divided?`	`boolean \| undefined`	`—`	One hairline between rows, and none before the first.

ListHeader props

Type: ListHeaderProps

Values the compiler reads from the declaration.

ListHeader props
Prop	Type	Default	Notes
`actions?`	`ReactNode`	`—`	The one action this list is about — a "New run", a "View all".
`description?`	`ReactNode`	`—`
`title`	`ReactNode`	`—`

ListItem props

Type: ListItemProps

Values the compiler reads from the declaration.

ListItem props
Prop	Type	Default	Notes
`description?`	`ReactNode`	`—`	One line of what the row is. Wraps, but is not a paragraph.
`leading?`	`ReactNode`	`—`	A mark, an avatar, an ordinal — anything that identifies the row at a glance.
`meta?`	`ReactNode`	`—`	Right-aligned secondary value: a timestamp, a count, a change.
`title`	`ReactNode`	`—`
`trailing?`	`ReactNode`	`—`	Controls at the end of the row — a badge, a button, a menu.

Guidelines

Use `ListItem`'s `leading`, `trailing` and `meta` slots rather than hand-building a row; the alignment and the truncation come with them.
Keep `title` to the row's identity and move the detail into `description`, which is allowed to wrap.

Don't

Put actions inside the title: a control inside a row that is itself a link gives the reader two nested targets.

Accessibility

The shell is a `ul` and each row a `li`, so the list is announced with its length. A row that acts is a real link or button rather than a div with a click handler.

Family

Data display

Dense, sortable, scannable: the surfaces a real product reads numbers from.

17 documented entries in this family. Open the family index