Browse components
Layer Stack
Translucent design layers stacked in isometric view that fan apart on hover, with a layers panel to spotlight each one.
Installation
npx shadcn@latest add @glint-ui/layer-stackFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/layer-stack.json
Usage
import { LayerStack } from "@/components/ui/layer-stack";
<LayerStack
layers={[
{ label: "Text", content: <h3>Hello</h3> },
{ label: "Image", content: <img src="/photo.jpg" alt="" /> },
{ label: "Background", content: <div className="size-full bg-gradient-to-br from-violet-500 to-cyan-400" /> },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layers | ReactNode | — | Array of { label, content, icon? }. First item is the top layer. |
| width | number | 260 | Layer width in px. |
| height | number | 180 | Layer height in px. |
| spread | number | 56 | Px between layers when fanned out. |
| restGap | number | 6 | Px between layers at rest. |
| pitch | number | 56 | Camera pitch in degrees. |
| expanded | boolean | false | Keep the stack fanned out. |
| showPanel | boolean | true | Show the layers panel. |
| className | string | — | Extra classes for the root element. |