Components
StackDiagram
A vertical stack of labeled layers with optional 3D tilt, hatching, and interactive hover states.
Import
import { StackDiagram } from "@sigil-ui/components";Preview
Usage
<StackDiagram
layers={[
{ label: "UI" },
{ label: "API" },
{ label: "DB", accent: 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.