Data display

The components that present records: status badges, people, cards, tables, histories and metadata. Every example uses the Northwind Ops sample data and the exact lib/theme.ts + app/globals.css your app ships, so a list or record screen built from these parts looks like this.

Badge

Status, category and count labels. light is the default variant; colour props resolve to the semantic scales.

grayprimarybluegreenyellowredlight

Draft

New

Review

Paid

Due

Failed

filled

Draft

New

Review

Paid

Due

Failed

outline

Draft

New

Review

Paid

Due

Failed

dot

Draft

New

Review

Paid

Due

Failed

default

Draft

New

Review

Paid

Due

Failed

transparent

Draft

New

Review

Paid

Due

Failed

Variants × colourslight is the theme default. Light and outline text is promoted to the AA 700 stop; blue | green | yellow | red resolve to info / success / warning / danger.

Draft

Pending approval

Approved

Shipped

Cancelled

Order statusEvery ORDER_STATUS mapped to a colour prop — the same badges the list and record templates use.

Active

Invited

Suspended

Offline

Presencevariant="dot" for live state — user status, sync health.

Sizessize xs – xl; md is the default. Text is fixed at --ds-font-size-xs by the theme, so size changes height and padding.

Verified

Daniel Osei

Category: Packaging

SectionsleftSection / rightSection — an icon, an avatar, or a CloseButton for removable filters.

Approvals

Alerts

Orders

Inbox

99+

Counterscircle keeps single-digit counts round; longer counts (“12”, “99+”) use the pill shape.

Brand

Info

Success

Warning

Danger

White on a dark surfacevariant="white" is for badges laid over imagery or a filled band (shown on --ds-brand-ink-900).

Avatar

People and organisations — initials on a tint, round for people, rounded squares for workspaces.

Initials × colourDefault variant="light" (top) and filled. Use primary for people unless a colour encodes something.

Sizessize xs (16px) – xl (84px). sm in tables, md in lists, xl on profile headers.

Radius & fallbacksRound for people, radius="md" for organisations and workspaces. No children → user glyph; src → image.

Avatar.GroupUse opaque avatars in a group — filled, with a variant="default" +N; light tints are translucent and show through the overlap.

Amelia Hart

Online

Daniel Osei

Online

Priya Raman

Online

Marco Silva

Invite pending

With presenceIndicator with position="bottom-end", offset and withBorder — the border uses the surface colour so the dot cuts out cleanly.

Indicator

A dot or count pinned to the corner of another element: unread, online, new.

On an icon buttonUnread dot on the header bell; processing adds the pulse for live activity.

New

On a buttonlabel turns the dot into a count; inline anchors it to inline content.

ColoursTheme primary (ember) by default; status colours via color.

top-start

top-end

middle-end

bottom-start

bottom-end

Positionsposition top / middle / bottom × start / center / end; offset pulls the dot in for round targets.

ThemeIcon

An icon on a tinted tile — feature bullets, empty states and KPI cards.

filled

light

outline

default

transparent

VariantsNo color → theme primary (ember). light is the usual choice beside text.

Sizes & radiussize xs – xl; radius={1000} for circles — the theme's xl radius is 16px, so it only rounds small icons fully.

Open purchase orders

128

+12 vs. last week

In contextA light ThemeIcon heading a KPI tile — the pattern the dashboard template uses.

Semantic coloursLight (top) and filled ThemeIcons on each semantic scale — dashboards and empty states pair them with a heading.

Card

The main content container. Sections bleed to the edge; globals.css supplies the hairline border, card shadow and --ds-radius-card.

Preferred supplier

Atlas Packaging

Active

Corrugated boxes, void fill and pallet wrap. Net 30, ships from Rotterdam.

Orders YTD

Spend YTD

$186,400

Card.Section bandA full-bleed Card.Section on top — here a token gradient (--ds-primary-50 → 300) standing in for a cover image.

Supplier intake

Shared

Onboarding form for new vendors — 12 fields, routed to Procurement.

Image sectionCard.Section wrapping an Image bleeds to the card edges and inherits its top radius.

Monthly spend

October

$412,380

+4.1%

May · Jun · Jul · Aug · Sep · Oct

Updated 5 min ago

View report

Header & footer sectionsCard.Section withBorder inheritPadding draws hairline dividers (--ds-card-border) between header, body and footer.

Approvers

Amelia Hart

Platform

Signed

Daniel Osei

Fulfilment

Waiting

Priya Raman

Finance

Waiting

Compact list cardpadding="sm" with Dividers — every Card gets the hairline border and --ds-card-shadow from globals.css.

Paper

A plain surface for sub-panels and floating layers, with the brand’s soft shadow scale.

shadow

Shadowsshadow xs – xl map to --ds-shadow-*: soft, long and low-opacity. sm for raised panels, lg for floating surfaces, xl for modals.

withBorder

Flat sub-panel inside a card or page.

withBorder + shadow="sm"

Raised panel on the page background.

shadow="lg"

Floating surface — popovers, toasts.

Radius & borderThe theme gives Paper --ds-radius-md; withBorder adds the hairline --mantine-color-default-border (→ --ds-border-color).

Table

The workhorse of list screens. The theme turns on withTableBorder and sets small semibold gray headers.

2 selected · $15,990

	Owner
Atlas Packaging PO-2041 · Packaging	DO	$12,840	Pending approval
Keystone Logistics PO-2040 · Freight	PR	$48,200	Approved
Brightline Electrical PO-2039 · Facilities	MS	$3,150	Draft
Meridian Foods PO-2038 · Catering	DO	$7,425	Shipped
Cobalt IT Services PO-2037 · Software	AH	$21,600	Approved
Harbor Office Supply PO-2036 · Office	HK	$980	Cancelled
Atlas Packaging PO-2035 · Packaging	DO	$15,300	Shipped

Orders tablehighlightOnHover, header checkbox with indeterminate, sortable headers (click them), status badges, owner avatars with a Tooltip, right-aligned money and a row Menu. Like the shipped VTable, rows take no selected tint — selection shows in the default-size checkbox and the toolbar count.

Appearance

Toggle the visual props to compare densities and border styles.

Name	Team	Role	Last active	Status
Amelia Hart	Platform	Administrator	2 min ago	Active
Daniel Osei	Fulfilment	Editor	18 min ago	Active
Priya Raman	Finance	Approver	1 hour ago	Active
Marco Silva	Procurement	Editor	—	Invited
Hana Kobayashi	Support	Viewer	Yesterday	Active

Appearance propsstriped, highlightOnHover, withColumnBorders, withRowBorders and verticalSpacing. Stripes use gray-0 (--ds-gray-50), deliberately faint on a white card. withTableBorder is on by default in the theme.

Scrolling, empty and loading

Order	Supplier	Updated	Due	Amount
PO-2041	Atlas Packaging	Today, 09:42	04 Nov	$12,840
PO-2040	Keystone Logistics	Today, 08:15	31 Oct	$48,200
PO-2039	Brightline Electrical	Yesterday	12 Nov	$3,150
PO-2038	Meridian Foods	26 Oct	28 Oct	$7,425
PO-2037	Cobalt IT Services	25 Oct	30 Oct	$21,600
PO-2036	Harbor Office Supply	24 Oct	—	$980
PO-2035	Atlas Packaging	22 Oct	23 Oct	$15,300
PO-1941	Atlas Packaging	Today, 09:42	04 Nov	$12,840
PO-1940	Keystone Logistics	Today, 08:15	31 Oct	$48,200
PO-1939	Brightline Electrical	Yesterday	12 Nov	$3,150

Sticky headerstickyHeader inside a ScrollArea h={240} — scroll the rows; the header stays pinned over them.

Order	Supplier	Status
No orders match these filters Try a different status or date range.

EmptyOne Table.Td colSpan row with a ThemeIcon, a reason and a way out.

Order	Supplier	Status

LoadingSkeleton bars in each cell keep the column rhythm while data loads.

From data

Open spend by category, October (cancelled orders excluded)
Category	Orders	Spend
Freight	1	$48,200
Packaging	2	$28,140
Software	1	$21,600
Catering	1	$7,425
Facilities	1	$3,150

data prop<Table data={{ caption, head, body }} /> — the quickest read-only table; cells accept any React node.

Accordion

Collapsible sections for secondary detail. Four variants, all on the same tokens.

Delivery address

Northwind DC2, Dock 4 — 18 Harbour Road, Rotterdam. Deliveries accepted 07:00–15:00 on weekdays.

Billing & tax

Approval chain

defaultHairline dividers between items — for settings and FAQ lists inside a card.

Delivery address

Northwind DC2, Dock 4 — 18 Harbour Road, Rotterdam. Deliveries accepted 07:00–15:00 on weekdays.

Billing & tax

Approval chain

containedOne bordered block; the open item gets a muted surface.

Delivery address

Northwind DC2, Dock 4 — 18 Harbour Road, Rotterdam. Deliveries accepted 07:00–15:00 on weekdays.

Billing & tax

Approval chain

separatedEach item is its own rounded panel on a gray surface.

Delivery address

Northwind DC2, Dock 4 — 18 Harbour Road, Rotterdam. Deliveries accepted 07:00–15:00 on weekdays.

Billing & tax

Approval chain

filledOnly the open item is filled — the lightest-weight option.

Timeline

Order history and activity feeds. Completed steps take the ember accent.

Draft created

Daniel Osei · 24 Oct, 14:02

Submitted for approval

Daniel Osei · 27 Oct, 10:18

Approved by Finance

Priya Raman · Today, 08:15

“Within Q4 freight budget.”

Awaiting shipment

Due 31 Oct

Delivered

—

Order historyactive={2} colours completed steps ember; upcoming steps use lineVariant="dashed".

Priya Raman approved PO-2040 · Keystone Logistics

12 min ago

Daniel Osei submitted PO-2041 · Atlas Packaging

1 hour ago

Amelia Hart invited Marco Silva to Procurement

3 hours ago

Hana Kobayashi commented on PO-2038 · Meridian Foods

Yesterday

Activity feedAvatars as bullets, active={-1} so no step reads as “current”.

Description list

Key/value metadata for a record — the top of a detail page or its side panel.

PO-2040

Keystone Logistics

Approved

Amount: $48,200.00
Owner: PR
Priya Raman
Category: Freight
Due: 31 Oct 2026
Last updated: Today, 08:15
Reference: ord_8f3k2m1x

Record metadata gridA <dl> in a three-column grid — dimmed xs terms over medium-weight values. Mixed value types: badge, avatar, money, code with CopyButton.

Supplier

Legal name: Keystone Logistics B.V.
Contact: ops@keystone-logistics.eu
Payment terms: Net 30
Categories: Freight
Customs
Risk rating: Low

Label / value rowsTerms in a fixed 132px column, rows split by --ds-divider — the side panel of a record detail page.

List

Checklists and steps; ThemeIcon bullets make requirements scannable.

Approved vendor
Budget headroom
Quote under 30 days old
Finance sign-off

ThemeIcon bulletsicon on List sets every bullet; List.Item icon overrides one — here the pending check.

Draft
Attach quote
Submit
Receive

Packaging
Freight
- Road
- Sea
Facilities

Ordered & unorderedtype="ordered" for sequences; nested lists use withPadding. Pass listStyleType when a CSS reset strips markers.

Code & Kbd

Monospace for ids and payloads, keycaps for shortcuts.

⌘

K

Save record

Ctrl

S

Shortcuts

Shift

?

EscEscEscEscEsc

KbdKeyboard hints in menus, tooltips and the command palette. size xs – xl.

The status field moves from pending to approved when the last approver signs. Reference ord_8f3k2m1x in support tickets.

Inline CodeCode sets JetBrains Mono on a gray tint — ids, field keys and API values inside prose.

{
  "id": "ord_8f3k2m1x",
  "number": "PO-2040",
  "supplier": "Keystone Logistics",
  "status": "approved",
  "amount": 48200,
  "currency": "USD"
}

Code blockblock renders a pre — API payloads, webhook samples and config snippets.

NumberFormatter

Consistent money, percentages and units without hand-written formatting.

Use	Props	Output
Currency	`prefix="$" thousandSeparator`	$48,200
Cents	`decimalScale={2} fixedDecimalScale`	$7,425.50
Percentage	`suffix="%" decimalScale={1}`	79.3%
Units	`suffix=" pcs" thousandSeparator`	12,500 pcs
European	`thousandSeparator="." decimalSeparator=","`	€ 21.600,75
Negative	`value={-1250} prefix="$"`	-$1,250

FormatsNumberFormatter renders text only — pair it with tabular figures (ff="monospace") when values stack in a column.

ColorSwatch

A colour chip — label colour pickers and legend keys.

Preview

Urgent

Label colour pickercomponent="button" swatches filled with --mantine-color-*-filled, so they follow the dark-mode remap. Click one.

Sizes & radiussize in px; radius from the theme scale; withShadow (default) adds an inner ring for light colours.

Spoiler

Clips long notes behind a show more / show less link.

Keystone has handled our Rotterdam inbound freight since 2023. Pickups must be booked 48 hours ahead through their portal; same-day collection is available for an additional fee and needs approval from the Fulfilment lead. Customs paperwork is prepared by Keystone, but HS codes must be confirmed by us on every order.

Damaged pallets are reported within 24 hours of delivery with photos attached to the order. Credit notes usually arrive within 10 working days and should be matched against the original PO in Finance.

SpoilermaxHeight clips long text with a showLabel / hideLabel toggle (styled as a link, --ds-accent-text).

Image

Thumbnails and attachment previews, with a placeholder for missing media.

intake-form-draft.png · 412 KB

Imageradius="md", a fixed h and fit="cover" keep attachment thumbnails a consistent size.

No preview available

packing-list.pdf · 88 KB

PlaceholderNo media yet: an AspectRatio box on --ds-gray-50 with a dashed --ds-gray-300 border.