Metric
Displays a numeric reading with tabular figures and aligned units.
Preview
Estimated range
386km
In action
Estimated range
386km
Ready for your next journey
18 km more than yesterday
When to use
Use it for
- Dashboard readings, vehicle status, and concise numeric comparisons.
Not for
- Full data series; use Charts.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Metric } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/metric.
2. Vendor the source
npx @noorddev/vlak-cli add metric
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/metric.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Metric } from "@noorddev/vlak-react";
<Metric label="Estimated range" value={386} unit="km" description="Ready for your next journey" comparison="18 km more than yesterday" />Props
Metric
A numeric reading with stable baseline, tabular figures, and an explicit unit.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | ||
valuerequired | string | number | ||
unit | ReactNode | ||
description | ReactNode | ||
comparison | ReactNode | ||
trend | ReactNode | Optional trend visualization, for example an existing Sparkline. | |
locale | string | "en" | |
formatOptions | Intl.NumberFormatOptions |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "children">.
Keyboard
| Keys | Does |
|---|---|
| None | Static reading; no additional keyboard stop. |
Accessibility
- The label, formatted value, and unit are readable text. Provide a text equivalent for an optional trend graphic.
Markup
<div class="rs-metric"><p class="rs-metric-label">Estimated range</p><div class="rs-metric-reading"><span class="rs-metric-value">386</span><span class="rs-metric-unit">km</span></div></div>
Classes
.rs-metric.rs-metric-label.rs-metric-reading.rs-metric-value.rs-metric-unit.rs-metric-detail