Data flowPro
Data flow illustration. Sources (app, database, events) are on the left, a processing core with a live count sits in the middle, and destinations (warehouse, dashboard, alerts) are on the right. Records leave as hollow dots and travel curved paths. In the core they turn into solid accent squares, then fan out to each destination; alerts receives about every third record.
Live · keyboard ready
- A hero or feature section explaining how data moves through a product.
- Docs pages introducing an ingestion, transform, or routing concept.
- Integration pages that show which sources feed which destinations.
- Use sankey-flow to show real volumes between stages.
- Use pipeline-status for the live state of a CI or data job.
- Use a table or list when people need to act on individual records.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { DataFlow } from "@/registry/components/data-flow/data-flow";import { AppWindow, LayoutDashboard, Warehouse } from "lucide-react"; // Image URLs keep full brand color; lucide icons follow the muted text color.const sources = [ { label: "App", meta: "Web and iOS", icon: <AppWindow /> }, { label: "Database", meta: "Supabase", icon: "/logos/supabase-color.svg" }, { label: "Events", meta: "Stripe webhooks", icon: "/logos/stripe-color.svg" },];const destinations = [ { label: "Warehouse", meta: "Every record", icon: <Warehouse /> }, { label: "Dashboard", meta: "Live metrics", icon: <LayoutDashboard /> }, { label: "Alerts", meta: "Slack", icon: "/logos/slack-color.svg", share: 0.34 },]; export function PipelineHero() { return <DataFlow sources={sources} destinations={destinations} core={{ label: "Transform" }} />;}DataFlow
An animated data flow illustration. Sources sit on one side, a processing core in the middle, and destinations on the other. Raw records leave the sources as hollow dots, travel curved paths into the core, turn into solid accent squares as they are processed, and fan out to every destination that takes them. A live count under the core ticks up as records are processed, and hovering a node highlights its path and records with a one line tag.
PropTypeDefaultDescription
sources{ id?: string; label: string; meta?: string; detail?: string; icon?: string | ReactNode; color?: string }[]App, Database, EventsWhere records come from. Three read best. meta is the second line (hidden on narrow layouts), detail is the hover tag. icon is SVG path data on a 24 by 24 viewBox painted in color, an image URL for a full color logo, or any ReactNode.destinations{ id?: string; label: string; meta?: string; detail?: string; icon?: string | ReactNode; color?: string; share?: number }[]Warehouse, Dashboard, AlertsWhere processed records go. share (0 to 1) thins out a destination evenly, so 0.34 sends about every third record, as alerts do in the default.core{ label?: string; detail?: string; countLabel?: string; countStart?: number }{ label: "Transform", countLabel: "processed", countStart: 12480 }The processing step: its name, hover tag, the word after the live count, and the number the count starts from.speednumber1Multiplies the flow speed. At 1 a record takes about four seconds end to end. 0 holds still.pausedbooleanfalseHolds the flow still where it is, easing to rest instead of stopping in one frame.accentstring–Color of processed records, trails, and active paths. Defaults to the accent token.labelstring–Accessible description of the diagram. Built from the source, core, and destination labels when left out.captionReactNode–Optional visible caption under the diagram, rendered as a figcaption.classNamestring–Extra class on the root figure.styleCSSProperties–Inline styles on the root figure.- The diagram is one element with role="img" and an aria-label that describes the whole flow, built from the labels unless label is passed.
- Nodes are not controls, so nothing enters the tab order; hover tags repeat detail that is optional.
- Raw and processed records differ in shape (hollow dot, solid square), not only color.
- Pass caption for a visible explanation under the diagram.
- No focus ring is drawn.
- One rAF loop writes SVG transforms, opacity, and dash offsets straight to the DOM, and only when a value changed; React does not render per frame.
- Records travel along real cubic paths at an even pace from an arc length table, eased in and out on each leg, with a short trail that stops at the core outline.
- In the core each record swells slightly as it morphs from a hollow dot into an accent square, the core outline widens and fades, and the dashed ring quickens for a moment. On the way out one copy carries the record while the others fade in as they split off, so the fan out never clumps.
- Six records per 6.6 second cycle are a pure function of time, so the loop repeats seamlessly; ports and node borders light up as records leave and land.
- Speed changes, pausing, and hover (which slows the flow a little) ease on a critically damped spring.
- The loop stops off screen, in hidden tabs, and when paused. Reduced motion shows a still frame: a raw record on each in path and a processed record on each out path.
- From 600px wide the flow runs left to right with two line nodes; below that it stacks top to bottom with sources in a row above the core and destinations below.
- The diagram is measured in real pixels and drawn in an SVG viewBox of that size, so text and hairlines stay crisp at any width.
- Hover tags only appear for a mouse; touch shows the same diagram without them.
- About forty SVG elements move, from a single loop that caches every written value.
- Paths are sampled once per layout into a small length table; nothing is measured per frame.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use it to explain a pipeline on a landing page or in docs: ingestion, ETL, event routing, sync.
- Keep labels to one or two words and put the product in meta, such as Database with Supabase.
- Use real brand logos only where the product matters to the story; keep generic roles on lucide icons.
- Use share on destinations that receive a subset, such as alerts, so the fan out tells the truth.
The full library index for assistants is at /llms.txt.