Ribbon Flow Sankey Chart React component
A Sankey chart with flowing ribbon textures, animated period comparisons, linked node highlighting and a shared scale across views.
About the Ribbon Flow Sankey Chart component
Ribbon Flow Sankey Chart shows weighted movement between ordered stages. Ribbon thickness uses the same scale across periods, while fine moving stripes suggest direction. Flows into the goal node take the indigo accent.
When to use it
Compare acquisition and conversion paths across periods.
Follow volumes through a staged workflow.
Installation
Add the Ribbon Flow Sankey Chart component to your project with the shadcn CLI. It lands in components/ribbon-flow-sankey-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/ribbon-flow-sankey-chartProps
<RibbonFlowSankeyChart /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Visitor flow" |
| subtitle | string | "Where people come from, what they read and how it ends." |
| nodes | { id: string; label: string; column: number }[] | NODES |
| views Sets of flows to switch between. They should list the same links in the same order. | { label: string; links: FlowLink[] }[] | VIEWS |
| defaultView Index of the view shown first. | number | 1 |
| goal The node that counts as success. Flows into it take the accent. | string | "signed-up" |
| color Colour of the flows into the goal. | string | — |
| height Height of the plot, in px. | number | 300 |
| formatValue | (value: number) => string | FORMAT |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Visitor flow"
- subtitlestringDefault: "Where people come from, what they read and how it ends."
- nodes{ id: string; label: string; column: number }[]Default: NODES
- views
Sets of flows to switch between. They should list the same links in the same order.
{ label: string; links: FlowLink[] }[]Default: VIEWS - defaultView
Index of the view shown first.
numberDefault: 1 - goal
The node that counts as success. Flows into it take the accent.
stringDefault: "signed-up" - color
Colour of the flows into the goal.
string - height
Height of the plot, in px.
numberDefault: 300 - formatValue(value: number) => stringDefault: FORMAT
Ribbon Flow Sankey Chart FAQ
- What graph shape is supported?
- Nodes have an id, label and zero-based column. Links must point to a later column and have a positive finite value. Unknown endpoints, backwards links and duplicate edges are omitted. Supply every destination, including exits, when you want each stage to conserve its incoming volume.
- Does the first drawing depend on an entrance animation?
- No. The initial values render immediately. Switching views interpolates values; reduced motion skips this interpolation and disables moving stripes. Nodes and ribbons can be inspected by keyboard focus, hover or tap.
