Dashboard & charts

8 min · Pattern

Dashboards combine KPI stat rows, time-range filters, charts, and activity tables. The harness gold example shows the Once UI recipe — static surfaces for stats, interactive Card only when the tile is clickable.

Dashboard anatomy

A typical analytics dashboard has four zones:

Page header — eyebrow, title, time-range filter
KPI row — 3–4 stat cards in a responsive Grid
Chart area — trend lines or bar charts
Activity table — recent events with status tags

Task bundle: packages/core/ai/tasks/dashboard.json
Gold example: packages/core/ai/examples/dashboard.tsx
Pro block: packages/core/ai/examples/blocks/Dashboard1.tsx

Page header with filter

Stack the title and SegmentedControl on mobile, side-by-side on desktop:

<Row
  fillWidth
  horizontal="between"
  vertical="end"
  gap="24"
  s={{ direction: "column", horizontal: "start" }}
>
  <Column gap="8">
    <Text variant="label-default-s" onBackground="brand-medium">
      Analytics
    </Text>
    <Heading as="h1" variant="display-strong-s">
      Overview
    </Heading>
  </Column>
  <SegmentedControl
    selected={range}
    onToggle={setRange}
    buttons={[
      { value: "7d", label: "7 days" },
      { value: "30d", label: "30 days" },
      { value: "90d", label: "90 days" },
    ]}
  />
</Row>

KPI stat cards — static surface, not Card

This is the #1 dashboard mistake: wrapping KPI numbers in Card. Stat tiles are read-only panels. Use the static surface recipe:

<Column
  background="surface"
  border="neutral-alpha-weak"
  radius="l"
  padding="24"
  gap="16"
>
  <Row fillWidth horizontal="between" vertical="center">
    <Text variant="label-default-s" onBackground="neutral-weak">
      Revenue
    </Text>
    <Icon name="trendUp" size="s" />
  </Row>
  <Heading variant="display-strong-xs">$128,400</Heading>
  <Text variant="body-default-s" onBackground="success-weak">
    +12.4%
  </Text>
</Column>

For animated numbers, swap the Heading for CountFx in your TSX — drive value from a useInViewport latch so the count starts when the row scrolls into view. Reserve Card for tiles that are clickable links to a detail view.

Staggered reveal

Wrap each stat in RevealFx with incremental delay for a polished entrance:

<RevealFx fill trigger={seen} translateY="8" delay={index * 0.1}>
  <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16">
    <Text variant="label-default-s" onBackground="neutral-weak">Revenue</Text>
    <Heading variant="display-strong-xs">$128,400</Heading>
  </Column>
</RevealFx>

<Card
  fillWidth
  paddingX="20"
  paddingTop="20"
  paddingBottom="80"
  radius="l"
  border="neutral-alpha-weak"
  background="transparent"
  href="/analytics/revenue"
>
  <LineChart
    position="absolute"
    left="0"
    bottom="0"
    height={6}
    pointerEvents="none"
    opacity={30}
    axis="none"
    tooltip={false}
    legend={{ display: false }}
    grid="none"
    series={[{ key: "Current period", color: "green" }]}
    data={sparkData}
  />
  <Column fillWidth gap="12">
    <Heading variant="display-strong-xs">$128,400</Heading>
  </Column>
</Card>

Check	Rule
Stat surfaces	Column with background="surface" — not Card
KPI numbers	CountFx with viewport latch, or display-strong-s static
Grid	columns="4" m={{ columns: 2 }} s={{ columns: 1 }}
Chart overlay	pointerEvents="none", axis="none" for sparklines
App shell	Compose Header1 + Sidebar1 from Pro blocks

Dashboard anatomy

Page header with filter

KPI stat cards — static surface, not Card

Staggered reveal

Dashboard anatomy

Page header with filter

KPI stat cards — static surface, not Card

Staggered reveal

Charts and sparklines

Activity table

Quality checklist

Agent note

Dashboard & charts

Dashboard anatomy

Page header with filter

KPI stat cards — static surface, not Card

Staggered reveal

Dashboard anatomy

Page header with filter

KPI stat cards — static surface, not Card

Staggered reveal

Charts and sparklines

Activity table

Quality checklist

Agent note

Related