Exploded View
Reveal the layers that make up an object or interface.
Preview
Import
import { ExplodedView } from "@sigil-ui/components";Usage
<ExplodedView
gap="var(--s-space-3)"
layers={[
{ label: "Experience", children: <div className="text-sm text-[var(--s-text)]">Components and blocks</div> },
{ label: "Constraints", children: <div className="text-sm text-[var(--s-text)]">519 design tokens</div> },
{ label: "Foundation", children: <div className="text-sm text-[var(--s-text)]">CSS custom properties</div>, hatched: true },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
layers | ExplodedViewLayer[] | — | Layers to display from top to bottom. |
gap | string | 2rem | Gap between layers. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-border | Border |
--s-surface | Surface |
--s-text | Text |
--s-font-mono | Font mono |
--s-text-muted | Text muted |