Hub Spoke Diagram
Show relationships around a central node.
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" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
hub (required) | { label: string; icon?: ReactNode; sublabel?: string } | — | Hub configuration. |
spokes (required) | SpokeNode[] | — | Spokes configuration. |
connector | "solid" | "dashed" | "dashed-animated" | — | Connector configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-border | Border |
--s-surface | Surface |
--s-text | Text |
--s-text-muted | Text muted |
--s-border-strong | Border strong |
--s-radius-lg | Radius lg |
--s-primary | Primary |
--s-primary-muted | Primary muted |