A multi-stage flow diagram laid out from plain nodes and links: gradient ribbons draw left to right stage by stage. Hovering or focusing a node lights its whole upstream and downstream path, and each ribbon shows its share in a tooltip.
npx shadcn@latest add https://hyperblur.dev/r/chart-sankey-flow.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/chart-sankey-flow.tsx.
import { ChartSankeyFlow } from "@/components/hyperblur/chart-sankey-flow"
<ChartSankeyFlow height={280} onNodeSelect={(node) => console.log(node?.label)} />| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | { id: string; label: string; color?: string }[] | 10 trial journey nodes | Nodes in display order. Columns are derived from the links. |
| links | { source: string; target: string; value: number }[] | 16 links | Flows between node ids. Band thickness is proportional to value. |
| height | number | 260 | Plot height in pixels. |
| title | string | "Trial journeys, Q3" | Accessible title of the chart. |
| summary | string | Accessible description. Built from sources and final outcomes when omitted. | |
| format | (value: number) => string | Value formatter. Defaults to grouped thousands. | |
| nodeGap | number | 10 | Vertical gap between nodes in the same column, in viewBox units. |
| accent | string | "#2f7bff" | Fallback color for nodes without their own color. |
| onNodeSelect | (node: SankeyNode | null) => void | Called when a node is clicked or activated to pin its path, and with null when unpinned. |