components/ui/lumen/market-breadth.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

Market BreadthProv1.0.0

How broad is the growth? Every market that beat its weekly target drops in as a square, so a year of breadth reads in one look: tall columns, dips around an event, a traced market's streak. In parts, with the finished card as the recipe.

.md

Add to your project

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

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.

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

MarketBreadth data–
{ week: number; market: string; value: number }[]
value is % over the market's target that week (negative: a miss). Missing weeks count as a miss and break a streak.
markets / weeks / firstWeek–
string[] / number / ISO date
Plot order (default: order of appearance), columns (default: from the data) and week 0's date for labels (without it weeks are numbered).
strongAt / hotAt / runWeeks0.6 / 1.5 / 4
number
The bins' edges in % and the shortest streak for the runs mode.
mode / defaultMode / onModeChange"all"
"all" | "strong" | "streak"
Every beat, beats by strongAt% or more, or runs of runWeeks+.
pinned / defaultPinned / onPinnedChange–
string | null
The traced market, by name.
annotation–
{ label, fromWeek, toWeek } | null
An event band under the axis.
config–
ChartConfig
Colours by key: low, mid, high (the bins) and trace.
labels–
Partial<MarketBreadthLabels>
Every word, as plain strings with {placeholders}.

Show all 10 props

motion / speed / bounce"full" / 1 / 0.3
"full" | "subtle" | "off" / number / number
Off and reduced motion snap squares into place.
MarketBreadthPlot height–
number | string
Most the square grid may take; default from the width, up to 456px.

Anatomy

Parts on the Lumen Chart base: use the plot alone, or the whole card.
The model (buildMarketBreadth, marketBreadthStats) is server-safe.
Sample data only reaches the card and demo; your data never mixes with it.
The canvas loop pauses off screen and in background tabs.

MarketBreadthdata-slot="chart"
Holds the data, mode, trace and hover; every part reads it.
MarketBreadthPlotdata-slot="market-breadth-plot"
The canvas of squares, axis, months, event band and tooltip.
MarketBreadthReadoutdata-slot="market-breadth-readout"
The latest (or hovered) week's count, rolling.
MarketBreadthStatsdata-slot="market-breadth-stats"
Hit rate, best week, longest run, most consistent.
MarketBreadthModesdata-slot="chart-modes"
All beats, strong beats, runs.
MarketBreadthLegenddata-slot="chart-legend"
The three bins.
MarketBreadthReplay / MarketBreadthTracingdata-slot="—"
Drop again; the traced market's pill.
MarketBreadthTabledata-slot="chart-table"
The year as a table, on demand.
MarketBreadthCarddata-slot="chart-surface"
The recipe: every part on the sample data.
useMarketBreadthdata-slot="—"
The state, for parts of your own.

Part of

Market Breadth 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

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

v1.0.0 · 2026-09-29
Glass Market Breadth taken apart into parts on the Lumen Chart base; the card is now a recipe

Keyboard

← →: Previous or next week
↑ ↓: Up or down the week's squares
Home / End: First or last week
Enter / Space: Trace the focused square's market
Escape: Stop tracing, then leave the square

More in Charts

Stat Cards

Stat

Chart