Stack Diagram
Illustrate the layers of a system.
Preview
Import
import { StackDiagram } from "@sigil-ui/components";Usage
<StackDiagram title="Application layers" layers={[{ label: "Interface", children: "Pages and reusable components" }, { label: "Services", children: "Business logic and workflows", accent: true }, { label: "Storage", children: "Persistent application data", hatched: true }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers (required) | StackLayer[] | — | Layers configuration. |
title | string | — | Heading displayed in the component. |
gap | string | — | Gap configuration. |
tilt | boolean | — | Tilt configuration. |
interactive | boolean | — | Interactive configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-text-muted | Text muted |
--s-font-mono | Font mono |
--s-radius-md | Radius md |
--s-duration-fast | Duration fast |
--s-primary | Primary |
--s-border | Border |
--s-primary-contrast | Primary contrast |
--s-surface | Surface |
--s-border-muted | Border muted |