components/ui/lumen/trend.tsx

The source ships with Pro.

The preview above is the real component. Its source installs into your repo with one command once you own it.

78 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

TrendProv2.0.0

One number over time, built around a playhead: scrub the line and the big number rolls to that point; round-number milestones and dated events light up as the playhead passes; the line is lit behind it and dim ahead. The insight says how growth changed after the last event. Metric and period tabs, editable markers, and missing values kept as gaps. In parts.

Built on shadcn/ui chart conventions

.md

Add to your project

pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-trend

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

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

metrics / periodsActive and Paid teams / 30D, 90D, 12M
{ id, label, unit?, noun? }[] / { id, label }[]
The tabs. unit reads under the number ("weekly active teams"); noun in sentences ("Active teams").
seriesa year of Lumen's numbers
Record<metricId, Record<periodId, { date, value }[]>>
Points oldest first, dates as YYYY-MM-DD. null is missing: the line breaks there. Weekly points read "Wk of Sep 27", monthly ones "Sep 2026".
metric / period (+ default*, on*Change)–
string
The shown metric and period (default: the first metric and the last period).
events / defaultEvents / onEventsChange–
{ id?, date, label }[]
Dated markers. Each one's growth before and after is worked out for the insight.
editablefalse
boolean
Adds a marker field (at the playhead) and remove buttons on markers; changes go to onEventsChange.
pinnedDate / defaultPinnedDate / onPinnedDateChange–
string | null
The parked playhead's date (a deep link); null is now.
config–
ChartConfig
Colours by metric id (shadcn's shape).
title / eyebrow / labels–
string / string / Partial<TrendLabels>
The accessible name and table caption, the label above the number, and every sentence for i18n.

Show all 11 props

formatValue / locale–
(v) => string / string
The big number and the table (grouped whole numbers by default); ticks and milestones are compact.
motion"full"
"full" | "subtle" | "off"
full: the playhead sweeps in on each metric or period; subtle: a shorter sweep; off (and reduced motion): no sweep.
Parts–
TrendValue · Delta · Plot · Milestones · AddMarker · Insight · Metrics · Periods · Replay · Table · Card
Arrange them inside <Trend>, or use TrendCard; useTrend() reads the state.

Anatomy

Beautiful UI original: measured SVG, no chart library.
On Lumen's chart core (ChartContainer with shadcn ChartConfig, Modes, Table, Live, size hook) and Lumen Stat's rolling digits.
The model (lumen/lib/trend-model) is plain data: milestones, event rates, cadence and the insight.

Trenddata-slot="chart"
Data, metric, period, events and the playhead.
TrendValuedata-slot="trend-value"
The number at the playhead, with the delta and date.
TrendPlotdata-slot="trend-plot"
The line, milestones, events and playhead.
TrendInsightdata-slot="chart-description"
Growth after the last event, or over the period.
TrendTabledata-slot="chart-table"
Every point for screen readers.

Part of

Trend is part of

Get it with any of these. Pro pieces are not sold one at a time.

Lumen HaloSystem · 121 piecesIncluded in All-Access
All-Access LifetimeEvery system and pack, up to 10 developers$79 launch price

Compare options

Changelog

v2.0.0 · 2026-09-30All 1 entries

v2.0.0 · 2026-09-30
Rebuilt as Lumen parts on the chart core (was glass-trend, still installable as an alias)

Keyboard

← / →: Move the playhead one point
Page Up / Page Down: Move a week (daily) or four points
Home / End / Escape: First point / now / back to now

More in Charts

Stat Cards

Stat

Chart