Sankey ChartProv1.0.0
Where things go, from sources through steps to outcomes: each flow is a band as thick as its value, shading from its source's colour to its target's. Point at a flow to isolate it, or at a step to light every flow through it; arrow keys walk the flows with the tooltip following.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-sankey-chartNeeds 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.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { SankeyChart } from "@/components/ui/lumen/charts/sankey-chart";
const flows = [
{ source: "search", target: "trial", value: 1840 },
{ source: "search", target: "demo", value: 260 },
{ source: "referral", target: "trial", value: 720 },
{ source: "referral", target: "demo", value: 310 },
{ source: "trial", target: "paid", value: 610 },
{ source: "trial", target: "left", value: 1950 },
{ source: "demo", target: "paid", value: 330 },
{ source: "demo", target: "left", value: 240 },
];
const config = {
search: { label: "Search", color: "var(--chart-1)" },
referral: { label: "Referral", color: "var(--chart-2)" },
trial: { label: "Trial", color: "var(--chart-3)" },
demo: { label: "Demo", color: "var(--chart-4)" },
paid: { label: "Paid", color: "var(--chart-2)" },
left: { label: "Left", color: "var(--chart-5)" },
};
export function SignupFlows() {
return <SankeyChart links={flows} config={config} label="Sign-ups by source and outcome" />;
}Props
links–{ source, target, value }[]The flows between step ids. Values must be more than zero; zero flows are skipped.
nodes–{ id, label? }[]Labels and the order of steps within each column. Default: ids in order of first appearance.
config–ChartConfigColour and label per step id; flows shade from source to target colour. Unlisted steps take the series colours.
valueFormat–StatFormat | (n) => stringNumbers on steps, tooltip, table and summary.
active / onActiveChange–number | null / (index) => voidThe flow in focus (its index in links), controlled; omit for uncontrolled.
onSelect–(link, index) => voidA flow was clicked, or Enter pressed on the focused flow.
Show all 11 propsShow fewer
labels–{ share?, source?, target?, value? }Words for i18n: share(percent, source) in the tooltip, and the table's column names.
nodeWidth / nodePadding / height10 / 14 / 340numberStep bar width, space between steps, and plot height in px.
tooltiptruebooleanThe flow's value and its share of its source.
motion"full""full" | "subtle" | "off"Flows draw from left to right in turn; reduced motion always wins.
loading / error / emptyText / label–boolean / string / string / stringStates in words with the height held, and the chart's accessible name.
Source
components/ui/lumen/charts/sankey-chart.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
