Ecosystem Diagram
A radial ecosystem layout with a center node and ring nodes connected by dashed lines.
Preview
Import
import { EcosystemDiagram } from "@sigil-ui/components";Usage
<EcosystemDiagram
center={{ label: "Platform", sublabel: "Core" }}
ring={[
{ label: "Auth" },
{ label: "Storage" },
{ label: "Compute" },
{ label: "CDN" },
{ label: "Search" },
]}
/>Custom size with icons
<EcosystemDiagram
size={360}
center={{ label: "Sigil", icon: <LogoIcon /> }}
ring={[
{ label: "Tokens", icon: <PaletteIcon /> },
{ label: "Components", icon: <BoxIcon /> },
{ label: "CLI", icon: <TerminalIcon /> },
{ label: "Presets", icon: <SlidersIcon /> },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
center | { label, icon?, sublabel? } | — | Center node (required) |
ring | EcosystemNode[] | — | Array of { label, icon? } placed around the ring (required) |
size | number | 280 | Diagram diameter in pixels |
className | string | — | Additional CSS classes |
Plus all standard <div> HTML attributes.