Stream Flow Diagram
Visualize data moving through a connected stream.
Preview
Import
import { StreamFlowDiagram } from "@sigil-ui/components";Usage
<StreamFlowDiagram
source={{ label: "DESIGN.md" }}
tokens={["primary", "radius-md", "duration-fast"]}
output="CSS variables"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
source (required) | { label: string; icon?: ReactNode } | — | Source configuration. |
tokens | string[] | — | Tokens configuration. |
output | string | — | Output configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-card | Radius card |
--s-border | Border |
--s-surface | Surface |
--s-radius-md | Radius md |
--s-primary | Primary |
--s-primary-muted | Primary muted |
--s-text | Text |
--s-chart-axis | Chart axis |
--s-radius-sm | Radius sm |
--s-font-mono | Font mono |
--s-background | Background |