Customer SwarmFreev1.0.0

Every customer on one axis, so you can see where the revenue really sits. Tiles stack where each customer lands, lanes split by plan or region, and a drag across the axis tells you which plan earns more than its share. In parts, with the finished card as the recipe.

.md

Add to your project

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

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

CustomerSwarm customers–
{ id; name; plan; region?; [metric]: number }[]
plan is a config key; metrics read numeric fields by key.
config–
ChartConfig
Plans in lane order, with labels and colours (shadcn's shape).
metrics–
{ key; label; scale?; domain; ticks?; format? }[]
One tab each. format is a serialisable StatFormat; log scales need a positive minimum.
metric / group / selection / hiddenPlans–
controlled or default*
Each with an on…Change. group is "all" | "plan" | "region"; selection is [low, high] in metric units.
revenueKey / revenueFormat–
string / StatFormat
What the totals, lanes and split bars sum, and how they read.
onCustomerClick / onCustomerHover–
(id) => void
A tile clicked or Enter pressed; the hovered or focused customer changed.
labels / motion–
Partial<CustomerSwarmLabels> / "full" | "subtle" | "off"
Every word ({placeholders}); the intro rain plays only at full.

Anatomy

Parts on the Lumen Chart base: the plot alone, or the whole card.
Plans are shadcn ChartConfig keys; metrics carry serialisable formats.
The layout maths (swarmLayout, swarmScale) is server-safe.
No canvas and no loop: every motion is a CSS transition.

CustomerSwarmdata-slot="chart"
Holds data, metric, grouping, range, hidden plans and hover.
CustomerSwarmPlotdata-slot="customer-swarm-plot"
Tiles, lanes, brackets, brush, crosshair, tooltip.
CustomerSwarmMetrics / CustomerSwarmGroupsdata-slot="chart-modes"
The metric and grouping switches.
CustomerSwarmInsightdata-slot="chart-description"
The sentence the selection tells.
CustomerSwarmLegenddata-slot="chart-legend"
Plan chips with counts; hide or show.
CustomerSwarmSummary / CustomerSwarmSplitdata-slot="customer-swarm-summary"
Count and revenue; the split bars.
CustomerSwarmKeydata-slot="customer-swarm-key"
Bracket key, hint, scale, Clear.
CustomerSwarmTabledata-slot="chart-table"
Every customer, on demand.
CustomerSwarmCarddata-slot="chart-surface"
The recipe on the sample.
useCustomerSwarmdata-slot="—"
The state, for parts of your own.

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
Glass Customer Swarm taken apart into parts on the Lumen Chart base; the card is now a recipe

Keyboard

← →: Previous or next customer along the axis
Shift + ← →: Select a range
Enter: Open the customer (onCustomerClick)
Escape: Clear the range

More in Charts

Stat Cards

Stat

Chart