An animated flow diagram that visualizes how values move between nodes (e.g. traffic sources through landing pages to checkout), with hover highlighting and tooltips.
"use client";
import { SankeyChart } from "@/components/ui/sankey-chart";
import { SankeyLink } from "@/components/ui/sankey-chart-utils/sankey-link";
import { SankeyNode } from "@/components/ui/sankey-chart-utils/sankey-node";
import { SankeyTooltip } from "@/components/ui/sankey-chart-utils/sankey-tooltip";
const data = {
nodes: [
{ name: "Ads" },
{ name: "Organic" },
{ name: "Landing" },
{ name: "Product" },
{ name: "Checkout" },
],
links: [
{ source: 0, target: 2, value: 40 },
{ source: 1, target: 2, value: 30 },
{ source: 2, target: 3, value: 50 },
{ source: 3, target: 4, value: 35 },
],
};
export default function Component() {
return (
<main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
<div className="w-full max-w-3xl">
<SankeyChart data={data} aspectRatio="16 / 9">
<SankeyLink />
<SankeyNode />
<SankeyTooltip />
</SankeyChart>
</div>
</main>
);
}
Part of Bklit — browse the full library on 21st.dev.