Data & surfaces
Surfaces for tabular and summary data — the Card container, a typed DataTable, KPI stat cards, and the small dividing pieces.
@shuttering/uiimport { Card, DataTable, StatCard, Avatar, Separator } from '@shuttering/ui'
Card
The base surface — a header (title + description), content, and an optional footer.
Card title
A surface with a header and content.
Compose CardHeader / CardTitle / CardDescription / CardContent / CardFooter.
DataTable
A typed table — columns declare a key, a label, alignment, and an optional cell renderer.
| Node | $/MWh | Status |
|---|---|---|
| TH_SP15 | 42 | ok |
| TH_NP15 | 55 | warn |
| TH_ZP26 | 38 | ok |
| Prop | Type | Default | Description |
|---|---|---|---|
| columns (required) | Column<T>[] | — | key, label, align?, and an optional render(row) for custom cells. |
| rows (required) | T[] | — | The row data. |
| rowKey (required) | (row: T) => string | — | A stable key per row. |
StatCard
A KPI tile — a mono label, a big tabular value, and an optional signed delta and hint. A positive delta reads success, negative destructive, zero muted.
Revenue
$48.2k+12
vs last month
Active nodes
1,284-4
Uptime
99.98%0
| Prop | Type | Default | Description |
|---|---|---|---|
| label (required) | ReactNode | — | The metric name. |
| value (required) | ReactNode | — | The headline figure. |
| delta | number | — | Signed change; sign and tone are derived for you. |
| hint | ReactNode | — | A supporting line below the value. |
| icon | ReactNode | — | An optional trailing glyph. |
Avatar & Separator
The small dividing and identity pieces.
SXAIstxkxs · agent
| Prop | Type | Default | Description |
|---|---|---|---|
| Avatar | AvatarImage | AvatarFallback | — | Compose an image with a text fallback shown while it loads or on error. |
| Separator · orientation | 'horizontal' | 'vertical' | 'horizontal' | A token-colored divider. |