Data display

Primitives for showing data: a composable Table, Avatar, Progress, EmptyState, and token-aware Charts.

Live

Customer	Status	Total▴
Cedar Supply	error	$96
Brave Distributors	awaiting review	$842
Acme Foods	submitted	$1,284

Extraction · 72%

No orders yet

Incoming purchase orders will appear here once your inbox is connected.

Connect inbox

Table

import Table from '@repo/ui/Table';

<Table dense>
  <Table.Head>
    <Table.Row>
      <Table.HeaderCell sortable sortDirection={dir} onSort={toggle}>Total</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row><Table.Cell mono align="right">$1,284</Table.Cell></Table.Row>
  </Table.Body>
</Table>

Composable parts: Table (dense), Table.Head/Body/Row, Table.HeaderCell (sortable, sortDirection, onSort — sets aria-sort), Table.Cell (align, mono).

Avatar

<Avatar name="David Boone" src={url} size="sm|md|lg" /> — shows the image, falls back to initials. On Radix Avatar.

Progress

<Progress value={72} label="Extraction" /> — determinate bar (0–100, clamped), Radix role=progressbar.

EmptyState

<EmptyState title="No orders yet" description="…" icon={…} action={<Button/>} /> — centered zero state for lists and panels.

Charts

Orders / month

Orders vs errors

Orders (6mo)

7,086

+18%

Trend

import { BarChart, LineChart, Sparkline } from '@repo/ui/Charts';

<BarChart data={monthly} xKey="month" series={[{ key: 'orders', label: 'Orders' }]}
  ariaLabel="Orders per month" />
<LineChart data={monthly} xKey="month" series={[{ key: 'orders' }, { key: 'errors' }]}
  ariaLabel="Orders vs errors" />
<Sparkline data={[820, 932, 1290, 1140, 1620, 1284]} ariaLabel="6-month order trend" />

Theme-aware wrappers on recharts — series cycle through brand accents, axes/grid use the adaptive ink/line tokens (work on light or dark surfaces). ariaLabel is required (charts are images to assistive tech). Render as a client island.