StatCard

One number with its label, for the row of figures at the top of a dashboard. Give it href or onPress when the number leads to the full list.

StatCard

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, StatCard

Agents working now
2
Waiting for your decision
1
Open tasks
12
Up 4%vs last week
Your commits in 7 days
Loading
Agent tokens
Could not load the usage.

Dark theme, StatCard

Agents working now
2
Waiting for your decision
1
Open tasks
12
Up 4%vs last week
Your commits in 7 days
Loading
Agent tokens
Could not load the usage.

High contrast theme, StatCard

Agents working now
2
Waiting for your decision
1
Open tasks
12
Up 4%vs last week
Your commits in 7 days
Loading
Agent tokens
Could not load the usage.

UsageLink to the section Usage

tsx

import { StatCard } from '@skribly/ui/surfaces'

tsx

<StatCard
  label="Open tasks"
  value={12}
  icon={<ListTodo />}
  hint="Across 3 projects"
  href="/tasks"
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The label is read before the value.
With href or onPress the label becomes the link and the whole card is the target; the value is read as its description, and the focus ring surrounds the card.
The icon is hidden and its tone colours only its tile. loading marks the card busy and reads loadingLabel; error shows a glyph and text in place of the value.

This demo runs through axe in all three themes on every test run. See what the tests check.