Sankey flow — Björk UI

Components•Sankey flow

Sankey flow

Flows between stages, sized by volume and laid out to keep ribbons from crossing. Hover a node or a ribbon and its whole path, upstream and down, lights in the accent while everything else steps back. Turn on flow for marching dashes that pause offscreen and under reduced motion.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/sankey-flow

How to use

import { SankeyFlow } from "@/components/bjork-ui/charts/sankey-flow";<SankeyFlow  nodes={[{ id: "search", label: "Search" }, { id: "paid", label: "Paid" }]}  links={[{ source: "search", target: "paid", value: 1200 }]}  flow/>

Signup funnel
From	To	Value
Search	Free trial	4.2K
Search	Pro trial	1.6K
Search	Team demo	300
Social	Free trial	2.9K
Social	Pro trial	500
Referral	Pro trial	1.3K
Referral	Team demo	700
Direct	Free trial	900
Direct	Team demo	600
Free trial	Paid	1.1K
Free trial	Churned	5.2K
Free trial	Still trialling	1.7K
Pro trial	Paid	1.9K
Pro trial	Churned	1.1K
Pro trial	Still trialling	400
Team demo	Paid	1.1K
Team demo	Churned	300
Team demo	Still trialling	200

Options

Flow