Hub Route Diagram
Connect multiple routes through a central hub.
Preview
Import
import { HubRouteDiagram } from "@sigil-ui/components";Usage
<HubRouteDiagram source={{ label: "Application" }} hub={{ label: "Gateway", layers: [{ label: "Authenticate" }, { label: "Route" }, { label: "Observe" }] }} leftTargets={[{ label: "Database" }, { label: "Storage" }]} rightTargets={[{ label: "Search" }, { label: "Events" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
source (required) | { label: string; icon?: ReactNode } | — | Source configuration. |
hub (required) | { label: string; layers: HubRouteLayer[] } | — | Hub configuration. |
leftTargets (required) | HubRouteNode[] | — | Left Targets configuration. |
rightTargets (required) | HubRouteNode[] | — | Right Targets configuration. |
leftLabel | string | — | Left Label configuration. |
rightLabel | string | — | Right Label configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-card | Radius card |
--s-border | Border |
--s-surface | Surface |
--s-border-muted | Border muted |
--s-radius-md | Radius md |
--s-background | Background |
--s-text | Text |
--s-border-strong | Border strong |
--s-radius-lg | Radius lg |
--s-primary | Primary |
--s-primary-muted | Primary muted |
--s-font-mono | Font mono |