Four connected nodes for input, process, review and output, with packets traveling along the paths, a skip route and a loop back. Hovering or focusing a node shows its details below.
Ledgerline reads, matches and routes bills on its own. People only see the few that need a decision.
Line items are read, coded to the right GL account and matched against open purchase orders.
npx shadcn@latest add https://hyperblur.dev/r/how-flow-diagram.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/how-flow-diagram.tsx.
import { HowFlowDiagram } from "@/components/hyperblur/how-flow-diagram"
<HowFlowDiagram title="How a request moves" onNodeActive={(i) => console.log(i)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Under the hood" | Mono label above the headline. Empty string hides it. |
| title | string | "Every invoice takes the same four-stop route" | Section headline. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| live | string | "1,284 invoices processed today" | Status pill with a pulsing dot. Empty string hides it. |
| nodes | { stage: string; title: string; metric: string; description: string; stats?: { label: string; value: string }[] }[] | 4 sample nodes | Exactly four nodes in flow order. Up to three stats show in the detail panel. |
| skipLabel | string | "Auto-approved 82%" | Label on the route that jumps from node 2 to node 4. |
| loopLabel | string | "Sent back 3%" | Label on the route that returns from node 3 to node 2. |
| defaultActive | number | 1 | Node highlighted before any interaction. |
| onNodeActive | (index: number) => void | Called when a node is hovered, focused or clicked. | |
| accent | string | "#22d3ee" | Color of packets, flow dashes and the active node. |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |