Feature Mini Diagram
Illustrate a feature in a compact diagram.
Preview
Import
import { FeatureMiniDiagram } from "@sigil-ui/components";Usage
<div className="grid w-full grid-cols-2 gap-[var(--s-space-4)] sm:grid-cols-4">
{["timeline-bars", "wave-state", "layer-stack", "hub-spoke"].map((variant) => (
<div key={variant} className="flex min-h-32 items-center justify-center border border-[var(--s-border)] bg-[var(--s-surface)]">
<FeatureMiniDiagram variant={variant === "timeline-bars" ? "timeline-bars" : variant === "wave-state" ? "wave-state" : variant === "layer-stack" ? "layer-stack" : "hub-spoke"} size={72} />
</div>
))}
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant (required) | FeatureMiniVariant | — | Selects a supported visual treatment. |
size | number | — | Sets the component's size. |
accentColor | string | — | Accent Color configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |
--s-border | Border |
--s-text-muted | Text muted |
--s-text | Text |
--s-surface | Surface |
--s-primary-contrast | Primary contrast |