Diagram
Provide a shared canvas for token-styled diagrams.
Preview
Import
import { Diagram } from "@sigil-ui/components";Usage
<Diagram><div className="flex flex-wrap items-center justify-center gap-4"><DiagramNode label="Client" /><DiagramConnector direction="horizontal" length={80} /><DiagramNode label="API" /></div></Diagram>Props
| Prop | Type | Default | Description |
|---|---|---|---|
showGrid | boolean | — | Show Grid configuration. |
gridVariant | DiagramGridVariant | — | Grid Variant configuration. |
gridSize | number | — | Grid Size configuration. |
children | ReactNode | — | Content rendered inside the component. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border-muted | Border muted |
--s-radius-card | Radius card |
--s-border | Border |
--s-surface | Surface |