Browse components
Radial Flow
A hub-and-spoke diagram where glowing data pulses stream along curved links between a central node and its connected services.
Installation
npx shadcn@latest add @glint-ui/radial-flowFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/radial-flow.json
Usage
import { RadialFlow } from "@/components/ui/radial-flow";
<RadialFlow
hub={{ label: "API Gateway", icon: <Zap /> }}
nodes={[
{ label: "Postgres", hint: "Primary DB", icon: <Database /> },
{ label: "Stripe", hint: "Payments", icon: <CreditCard /> },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hub | ReactNode | — | Center node: { label, icon? }. |
| nodes | ReactNode | — | Array of { label, icon?, hint? } placed around the hub. |
| accent | string | "#a3e635" | Pulse and highlight color. |
| duration | number | 2.6 | Seconds for one pulse to travel a link. |
| pulses | number | 1 | Pulses in flight per link. |
| direction | "both" | "in" | "out" | "both" | Which way data flows; both alternates per link. |
| curvature | number | 0.18 | How much links bow, as a fraction of their length. |
| className | string | — | Extra classes for the root element. |