Data & Chartsregistry/ui/metric.tsx/r/metric.json

Metric

Headline KPI display with stepped count-up on twos, screen-reader polite live region, directional marker delta, and optional ToneSpark slot.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Recovered revenue

$32,805

Up 17.3% vs prior 7 days

Margin on recovered orders

Dark · Flashback.f12-theme-dark

Interactive preview

Recovered revenue

$32,805

Up 17.3% vs prior 7 days

Margin on recovered orders

Install & copy-in source

shadcn CLI (metric.json)

npx shadcn@latest add https://frame12.dev/r/metric.json

Usage example (Metric)

import { Metric, fmtCurrency } from '@/components/frame12';

export function HeroKpi() {
  return (
    <Metric
      label="Recovered revenue"
      value={120054}
      format={fmtCurrency}
      delta={0.114}
      deltaKind="pct"
      range={30}
      big
    />
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Exposes the final formatted value inside .f12-sr-only while hiding intermediate count-up frames with aria-hidden="true" so screen readers announce the change once.
Includes "Up" or "Down" screen-reader text alongside the ▲ / ▼ delta symbol.

GrammarFRAME/12 rules

Design grammar

Uses tabular-nums so numerals never jitter horizontally while counting on twos.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/metric.tsx)
Prop	Type	Default	Description
`label`	`string`	`required`	Uppercase monospace metric heading (.f12-m-label).
`value`	`number`	`required`	Numeric metric value interpolated on twos via useCountUp.
`format`	`(value: number) => string`	`fmtCurrency`	Formatter function converting numeric values to display strings.
`delta`	`number`	`undefined`	Optional relative change (percentage or percentage points).
`deltaKind`	`'pct' \| 'pp'`	`'pct'`	Formats delta as percentage (%) or percentage points (pp).
`big`	`boolean`	`false`	Uses fluid clamp(36px, 6cqi, 56px) display scale for establishing C-01 panels.
`spark`	`React.ReactNode`	`undefined`	Optional bottom slot for a ToneSpark daily bar strip.