Metrics
One number and its change: ten exports — MetricsSimple, four icon and four chart cards, and the shared MetricChangeIndicator — on the same ringed chrome.
Metrics
One number and its change: ten exports — MetricsSimple, four icon and four chart cards, and the shared MetricChangeIndicator — on the same ringed chrome.
Demo
All nine cards under one component select, each exposing exactly the props the source gives it.
Active users
4,209
Up 9.2%
Component
Indicator type
trend
import { MetricsSimple } from "@/components/application/metrics/metrics";
<MetricsSimple
subtitle="Active users"
title="4,209"
type="simple"
trend="positive"
change="9.2%"
/>
What the controls reach
Chart 01, 03, and 04 feed
chartData a rising series on positive and a falling one on negative, and Chart 04’s snippet carries the chartColor a negative card needs. Chart 02’s sparkline is fixed in the source, and Icon 01 and 02 offer no change controls because their indicators are hardcoded positive. The footer is a slot rather than a boolean, so the copied snippet carries the buttons the preview shows; the sheet’s Mobile column is behavior, not a prop — the contextual demo and the “Below 768px” callout cover it.Contextual demo
A metric card earns its keep in a grid beside its peers. The preview puts the family in a real dashboard.
The family
Ten exports from one file: nine cards and the shared change indicator. The dots menu and highlight dot stay internal.
| Component | Description | Import from |
|---|---|---|
| MetricChangeIndicator | The change badge every card renders: a direction glyph, an sr-only “Up” or “Down”, and the value. Three types, from a bare arrow to the ringed modern chip. | @/components/application/metrics/metrics |
| MetricsSimple | The plainest card: subtitle, number, and the indicator, with the built-in dots menu and an optional footer. | @/components/application/metrics/metrics |
| MetricsIcon01 | A success featured icon above the number. Its modern positive 100% chip is hardcoded, so it cannot show a fall. | @/components/application/metrics/metrics |
| MetricsIcon02 | A brand featured icon beside the heading. Its simple positive 100% and “vs last month” are hardcoded too. | @/components/application/metrics/metrics |
| MetricsIcon03 | A gray modern featured icon above the number, with change, changeTrend, and an actions toggle all yours to set. | @/components/application/metrics/metrics |
| MetricsIcon04 | The compact card: the icon moves beside the copy at md, the chip is modern, and the card carries a 280px floor. | @/components/application/metrics/metrics |
| MetricsChart01 | The number beside a small sparkline, 96×48 below md and 112×56 from md up, with the one highlight-dot chart. | @/components/application/metrics/metrics |
| MetricsChart02 | An icon heading beside a fixed two-series sparkline; the number grows to display-md at lg only when there is no footer. | @/components/application/metrics/metrics |
| MetricsChart03 | The full-width chart card: a 72px area chart under the number, with chartData, chartColor, chartAreaFill, and chartCurveType as props. | @/components/application/metrics/metrics |
| MetricsChart04 | Chart 03 inside a titled gray frame: a heading strip on bg-secondary around an inner card with a 56px chart. | @/components/application/metrics/metrics |
Built from
Five pieces make up the family; three have their own docs page.
Component | Where it’s used here |
|---|---|
| Dropdown | The built-in actions menu on every card: Dropdown.Root around the 20px DotsButton (named “Open menu” by the base component), a popover, and a fixed three-item menu — View more, Share, Copy link. |
| FeaturedIcon | The art on five cards: success light lg on Icon 01, brand light lg on Icon 02, gray modern lg on Icon 03 and Chart 02, gray modern md on Icon 04. |
| @untitledui/icons | The direction glyphs (ArrowUp and ArrowDown, TrendUp01 and TrendDown01, ArrowUpRight and ArrowDownRight), the menu’s Eye, Share01, and Copy01, Icon 02’s fixed Zap, Chart 02’s Eye default, and the TrendUp01 default on Icon 03 and Icon 04. |
The variant space
All nine Type values, live with product-shaped numbers: open a dots menu, tab to a footer button, hover a card.
Active users
4,209
Up 9.2%
Sessions
12,940
Up 100%
New sign-ups
318
Up 100%
vs last monthMonthly recurring revenue
$42,580
Up 7.4%
vs last monthChurn
1.9%
Down 0.3%
Page views
48,290
Up 12%
vs last monthActive users
4,209
Up 9.2%
Monthly recurring revenue
$42,580
Up 7.4%
vs last monthConversion rate
3.6%
Down 0.4%
vs last monthBelow 768px
Read from the source: every card’s side padding steps from 16 to 20px at md, and the inner gaps step with it everywhere except Simple (a fixed 8px), Chart 01 (a fixed 20px), and Icon 04 (a fixed 16px); the dots menu’s inset moves from 16 to 20px too. Chart 01’s mini chart draws 96×48 below md and 112×56 from md up (2026-08-23, matching the sheet’s Mobile symbol), Icon 04 stacks its icon above the copy until md, and the number-and-badge rows on Icon 03, Icon 04, Chart 03, and Chart 04 wrap with a 12px gap when the card runs narrow. The sheet’s Mobile frames are 343px wide and state no switch width; the kit switches at its own md, 768px.
The highlight marker matches the sheet to the quarter-pixel
Read from the source against the sheet’s vector: Chart 01’s marker is a 19.25px ring (a 17.25px rect with a 2px stroke) at 0.2 opacity over a 10.5px dot (8.5 plus 2) filled
bg-primary, in the chart’s trend color — every one of those values matches the Figma drawing exactly. It renders on whichever chartData point carries highlight: true, and it is aria-hidden.The change indicator
Three types by two trends. The glyph is aria-hidden with an sr-only “Up” or “Down” spoken before the value.
Up 7.4%
Up 7.4%
Up 7.4%
Down 2.1%
Down 2.1%
Down 2.1%
Two cards cannot reach the negative column
MetricsIcon01 and MetricsIcon02 hardcode their indicators at positive 100%, so the negative variants the sheet draws for every type are unreachable on those two exports — recorded as Figma-only on the Code tab. The other seven cards take trend or changeTrend.