Stat CardsFreev1.2.0

Liquid-glass KPI cards in dark and light, in hero, default and compact sizes: the number, whether the change is good or bad, and whether the data can be trusted, with a headline that names what moved the wrong way, period tabs, rolling digits, cell trends and a drill-in.

Sound by @web-kits/audio

.md

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/glass-stat-cards.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/glass-stat-cards.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Preview

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

metricsLumen workspace pulse
GlassStatMetric[]
{ id, label, name?, unit?, format?, suffix?, goodDirection?, updatedAt?, trackingSince?, staleAfterMs?, data: { [periodId]: { value, previous?, trend?, goal?, updatedAt? } } }. value null reads "—". format / suffix cover custom units (ms, GB, NPS points).
periods["7D", "30D", "90D"]
(string | { id; label?; name? })[]
Period tabs. name ("30 days") is derived from the label when omitted.
period / defaultPeriod"30D"
string
Controlled or starting period id.
onPeriodChange–
(period: string) => void
A tab was picked.
herofirst metric with a goal
string | null
Metric id shown as the hero card; null for none.
sizesall three
("hero" | "default" | "compact")[]
Which renditions to show: the hero, a row of default cards, a compact row.
eyebrow"WORKSPACE · PULSE"
string
Mono label above the headline; the section's accessible name. The headline is computed from the tones.
openId / defaultOpenIdnull
string | null
Controlled or starting drill-in (a metric id, or null for closed). Open a metric from a URL, close it from outside.

Show all 24 props

onOpenChange–
(id: string | null) => void
The user opened a card's drill-in or closed it (×, Escape, the card again).
formatValue–
(value: number, metric: GlassStatMetric) => string
Formats every metric without its own format (the value, absolute changes, goal and drill-in values).
currency"USD" ($)
string
ISO code for unit "currency"; its narrow symbol replaces $ ("EUR" → €2.41M).
locale"en-US"
string
Grouping in counts and the currency symbol's locale. Compact forms (2.41M) keep the design's notation; pass formatValue for fully localised numbers.
formatDate"09:00" / "Sep 4"
(date: Date, style: "time" | "day") => string
Dates in the notes: No data since …, Tracking since ….
labelsdefaultGlassStatCardsLabels
Partial<GlassStatCardsLabels>
Every string for i18n: verdicts, change line (vsPrev, points), headline sentences, freshness notes, goal notes, the hero sentence (heroSentence gets { tone, up, unit, amount, prior }), aria text and the drill-in. The defaults are the design's wording.
nowthe browser clock after mount
Date | number | string
Clock for "Updated 2 min ago" and staleness. Pass it for deterministic renders; the designed data brings its own.
motion"full"
"full" | "subtle" | "off"
full: the designed motion. subtle: 30% shorter, calm curve, no staggers. off: instant. prefers-reduced-motion: 150ms fades, no rolling digits.
layout"auto"
"auto" | "desktop" | "mobile"
auto goes 2×2 and stacks the hero in narrow containers; desktop / mobile force one.
theme"system"
"system" | "dark" | "light"
system follows a .dark / .light class or data-theme on an ancestor (next-themes, shadcn), else the OS.
soundtrue
boolean | "subtle"
Built-in sound: true plays Lumen cues when a GlassSoundProvider (glass-sound) enables sound; false silences this instance (its cues and its clicks); "subtle" plays at 55%. Without a provider it is silent.
className / style–
string / CSSProperties
On the root. The section is width 100% up to max-width var(--glass-max-width, 1120px): override with the variable, style or a max-w-* class.
ref–
Ref<HTMLDivElement>
The root element (React 19 ref prop).
...rest–
HTML attributes
id, data-*, aria-* and event handlers go to the root; aria-label names the section instead of the eyebrow; onKeyDown runs before the built-in Escape (preventDefault skips it).
CSS variables–
--glass-accent, --glass-good, --glass-bad, --glass-warn (+ -text, -dark / -light), --glass-max-width
Set on the cards or any ancestor to recolour the accent (goal bar, selection, focus), good / bad tones (fills, glows; -text for the change text) and stale amber. --glass-max-width caps the section width.
GlassStatCard–
{ label, value, previous?, unit?, format?, suffix?, locale?, currency?, formatDate?, labels?, goodDirection?, periodLabel?, periodName?, trend?, goal?, updatedAt?, trackingSince?, staleAfterMs?, now?, size?, selected?, onOpen?, controls?, motion?, layout?, theme?, className?, style?, ref? }
One card on its own, with the same format and label overrides. onOpen makes it a button (selected drives the ring and aria-expanded). HTML attributes go to its root.

Anatomy

Ships 2 named parts: the board, and the card on its own.
Plays Lumen sound cues on the period tabs and drill-in.
Passes anything it doesn't read straight through.
Dark and light, designed separately.

GlassStatCardsdata-slot="stat-cards"
The KPI board: header, period tabs, hero, default and compact rows, and the drill-in.
GlassStatCarddata-slot="stat-card"
One stat card on its own, at hero, default or compact size.

Part of

This is free. The full Lumen Halo has 120 more pieces.See the theme

Changelog

v1.2.0 · 2026-09-28All 3 entries

v1.2.0 · 2026-09-28
Built-in sound: open / close on the drill-in, select on metric tabs (with a GlassSoundProvider); the sound prop silences or softens one instance
v1.1.0 · 2026-09-27
Developer-friendly API: labels for every string (i18n), currency, locale, formatValue and per-metric format / suffix, formatDate, controlled drill-in (openId / defaultOpenId), className / style / ref / HTML attributes on both components, --glass-accent / good / bad / warn and --glass-max-width; the wording and formats are unchanged
v1.0.0 · 2026-09-27
First release, dark and light

Keyboard

Tab: Move through the period tabs, the cards and the drill-in's close button
← / → · Home / End (tabs): Switch the period
Enter / Space (card): Open its drill-in, or close it if open
Escape: Close the drill-in and return focus to its card

More in Charts

Stat

Chart

Market Breadth