Platform Hub Diagram
Connect platform capabilities around a central hub.
Preview
Import
import { PlatformHubDiagram } from "@sigil-ui/components";Usage
<PlatformHubDiagram
left={[{ label: "Inputs", items: [{ label: "DESIGN.md" }, { label: "Preset" }] }]}
center={{ label: "Sigil", items: [{ label: "compile" }, { label: "validate" }] }}
right={[{ label: "Outputs", items: [{ label: "CSS" }, { label: "Components" }] }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
left (required) | PlatformGroup[] | — | Left configuration. |
center (required) | { label: string; icon?: ReactNode; items?: { label: string; icon?: ReactNode }[] } | — | Center configuration. |
right (required) | PlatformGroup[] | — | Right configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text-muted | Text muted |
--s-font-mono | Font mono |
--s-radius-sm | Radius sm |
--s-border-muted | Border muted |
--s-background | Background |
--s-text | Text |
--s-radius-card | Radius card |
--s-border | Border |
--s-surface | Surface |
--s-border-strong | Border strong |
--s-radius-lg | Radius lg |
--s-primary | Primary |