StatFreev1.0.0

The number, whether it's good news, and where it's heading, in one glance. Digits roll like an odometer, the change takes its tone, and a spark of cells lights its last column to match. The KPI every Lumen chart and dashboard is built on.

Built on shadcn/ui

.md

Add to your project

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

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-stat.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

Stat variant / size / tone / motion"card" / "default" / from StatDelta / "full"
"card" | "plain" / "sm" | "default" | "lg" / StatTone / "full" | "subtle" | "off"
The tile (or none), the scale, the spark and glow tone (default: the StatDelta's), and the motion level.
StatValue value / format–
number | null / StatFormat
Formats with Intl: { style: "currency" | "number" | "percent" | "unit" | "duration", currency, unit, notation, maximumFractionDigits, locale }. null shows "—". Or pass preformatted text as children.
StatDelta value / previous / goodDirection— / — / "up"
number / number / "up" | "down"
The change and its tone: relative for counts and money, points for percents, the difference for durations. "down" when a fall is good (churn, latency).
StatDelta mode / change / children–
"relative" | "absolute" / string / ReactNode
Absolute change (+$231K); a preformatted change; context after it ("vs last 30 days").
StatSpark data / rows / columns— / 5 / 12
(number | null)[] / number / number
Oldest first; the last point is now. Nulls are gaps. Give it an aria-label to be announced.
StatNote stale–
boolean
Amber with a dot: the data is old or missing.

Anatomy

Parts, not props: arrange them, leave any out, or add your own between.
Server-safe: no hooks, no client JavaScript; the motion is CSS.
Tone flows from StatDelta to the spark and glow through CSS, with no wiring.
The KPI inside Lumen's story charts and blocks.

Statdata-slot="stat"
The tile (or a plain group) that carries the tone.
StatLabeldata-slot="stat-label"
The mono eyebrow.
StatValuedata-slot="stat-value"
The number on rolling reels.
StatDeltadata-slot="stat-delta"
The change in its tone, with context.
StatSparkdata-slot="stat-spark"
Twelve columns of cells, the last in the tone.
StatNotedata-slot="stat-note"
Freshness: updated, stale, missing.
formatStatValue / statChange / statCellsdata-slot="—"
The maths, server-safe, for your own parts.

Part of

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

Changelog

v1.0.0 · 2026-09-29All 1 entries

v1.0.0 · 2026-09-29
First release: Glass Stat Cards taken apart into shadcn-style parts, server-safe

Keyboard

—: Not focusable; wrap it in a link or button to make it one

More in Charts

Stat Cards

Chart

Market Breadth