Hub Spoke Diagram
A hub-and-spoke layout with a central node connected to left and right spoke nodes.
Preview
Import
import { HubSpokeDiagram } from "@sigil-ui/components";Usage
<HubSpokeDiagram hub={{ label: "Design tokens", sublabel: "Shared source" }} spokes={[{ id: "forms", label: "Forms", side: "left" }, { id: "navigation", label: "Navigation", side: "left" }, { id: "charts", label: "Charts", side: "right" }, { id: "layout", label: "Layout", side: "right" }]} />With icons
<HubSpokeDiagram
hub={{ label: "Core", icon: <CpuIcon /> }}
spokes={[
{ id: "db", label: "Database", icon: <DatabaseIcon />, side: "left" },
{ id: "cache", label: "Cache", icon: <ZapIcon />, side: "right" },
]}
connector="solid"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
hub | { label, icon?, sublabel? } | — | Central hub node (required) |
spokes | SpokeNode[] | — | Array of { id, label, icon?, side } (required) |
connector | "solid" | "dashed" | "dashed-animated" | "dashed" | Spoke connector style |
className | string | — | Additional CSS classes |
Plus all standard <div> HTML attributes.