Ecosystem Diagram
Map relationships between a product and its integrations.
Preview
Import
import { EcosystemDiagram } from "@sigil-ui/components";Usage
<EcosystemDiagram
center={{ label: "Sigil core" }}
ring={[
{ label: "Tokens" },
{ label: "Components" },
{ label: "Presets" },
{ label: "CLI" },
{ label: "Docs" },
{ label: "Demos" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
center (required) | { label: string; icon?: ReactNode; sublabel?: string } | — | Center configuration. |
ring (required) | EcosystemNode[] | — | Ring configuration. |
size | number | — | Sets the component's size. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border-muted | Border muted |
--s-radius-full | Radius full |
--s-primary | Primary |
--s-background | Background |
--s-text | Text |
--s-text-muted | Text muted |
--s-border | Border |
--s-surface | Surface |