Loading page…
Loading page…
One-dimensional collections — holdings, activity, watch addresses, receipt facts. Prefer a framed stack when each row is a self-contained object; reach for Table when you need sortable columns, selection, or hundreds of uniform cells.
Lists keep one primary reading path (title → meta → amount). Tables spread attention across columns and reward sorting. If you find yourself inventing a second column just to hang a badge, stay on a list.
Heterogeneous rows, swipe actions, mobile density, or object-first scanning.
Uniform columns, sort/filter, peer latency, explorer grids — see Primitives → Table.
--ch-surface--ch-canvas-raised--ch-border--ch-line-faint--ch-fg--ch-fg-muted--ch-shadow-raiseThe house plate: ch-frame + divide-y + bg-surface. One composition, sharp keyline, no cards-in-cards. Each row is a flex line — glyph, identity, optional sparkline, amount.
<ul className="ch-frame flex flex-col divide-y divide-line-faint bg-surface shadow-raise">
{items.map((item) => (
<li key={item.id} className="flex items-center gap-4 px-4 py-3">…</li>
))}
</ul>--ch-surface--ch-canvas-raised--ch-border--ch-line-faint--ch-fg--ch-fg-muted--ch-shadow-raiseReuse TransactionRow inside the same framed stack. The row owns kind, counterparty, amount, and status — the list only provides the plate and dividers.
<ul className="ch-frame divide-y divide-line-faint bg-surface">
{txs.map((tx) => (
<li key={tx.id}><TransactionRow {…} /></li>
))}
</ul>--ch-surface--ch-canvas-raised--ch-border--ch-line-faint--ch-fg--ch-fg-muted--ch-shadow-raiseSwipeableList for destructive or secondary actions without crowding the primary row. Drag left/right on a row (or use a trackpad). Rails sit behind a sharp surface — no soft pills.
Pin / bookmark on the left; archive / delete on the right.
import { SwipeableList } from "@coldharbor/webui";
<SwipeableList
items={[{
id: "watch-1",
title: "bc1q…8p3w",
description: "Cold storage · watch-only",
rightActions: [{ id: "delete", label: "Delete", tone: "danger", icon: <Trash2 /> }],
}]}
/>--ch-surface--ch-canvas-raised--ch-border--ch-line-faint--ch-fg--ch-fg-muted--ch-shadow-raiseTwo-column dl for facts that are not interactive rows — settlement summaries, receipt fields, admin metadata. Mono labels, tabular values.
<dl className="ch-frame grid grid-cols-[auto_1fr] gap-x-6 gap-y-3 bg-surface px-4 py-4">
<dt className="font-mono text-[11px] uppercase tracking-[0.08em] text-faint">Status</dt>
<dd><AnimatedBadge status="success">Confirmed</AnimatedBadge></dd>
</dl>--ch-surface--ch-canvas-raised--ch-border--ch-line-faint--ch-fg--ch-fg-muted--ch-shadow-raiseDefinition list under all three layers.
--ch-surface--ch-canvas-raised--ch-border--ch-line-faint--ch-fg--ch-fg-muted--ch-shadow-raise