Stack Diagram
A vertical stack of labeled layers with optional 3D tilt, hatching, and interactive hover states.
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 }]} />With title and tilt
<StackDiagram
title="Architecture"
tilt
layers={[
{ label: "CDN" },
{ label: "App", hatched: true },
{ label: "Cache" },
{ label: "Storage", accent: true },
]}
/>Non-interactive
<StackDiagram interactive={false} layers={[{ label: "A" }, { label: "B" }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers | StackLayer[] | — | Array of { label, children?, hatched?, accent? } (required) |
title | string | — | Heading above the stack |
gap | string | "0.5rem" | CSS gap between layers |
tilt | boolean | false | Apply 3D perspective tilt |
interactive | boolean | true | Enable hover highlight on layers |
className | string | — | Additional CSS classes |
Plus all standard <div> HTML attributes.