Isometric Stack
An exploded isometric layer diagram for architecture and platform sections — extruded plates hover apart on staggered springs, and a leader-line label ignites beside each layer.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/isometric-stack.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/isometric-stack.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| layers | IsometricStackLayer[] | — | Layers, top of the stack first — label, optional sublabel, optional accent. |
| size | number | 380 | Rendered width in px. |
| defaultExpanded | boolean | false | Start pinned open (also the reduced-motion state). |
| gap | number | 44 | Vertical gap between plates when expanded, in px. |
| stiffness | number | 240 | Base explode-spring stiffness (deeper plates get a softer spring). |
| damping | number | 26 | Explode-spring damping. |
| className | string | — | Additional CSS classes. |