Stack

Isometric 3D card-stack illustration. Layers lift apart on hover and assemble on entrance; the thickness, outline, and motion all follow the chosen recede direction.

Default

A three-layer stack with an icon on the front layer - the empty-state illustration.

Usage

Import the parts you need from the component's folder.

import { Stack } from "@/components/ui/stack";

Directions

Six recede directions. The slab thickness, outline, and the hover lift-apart adapt to each angle - never hardcoded to one pose.

br → tl

bl → tr

tl → br

tr → bl

b → t

t → b

Layer count

Any number of layers; depth spacing and the opacity fade derive automatically.

2 layers

4 layers

5 layers

Size & aspect ratio

Tune the card edge with size, or pass width + aspect for non-square slabs.

2rem

4rem

5rem · 4/3

Per-layer content

Fill individual layers via #layer-N slots (1 = front, ascending = receding back).

Done

Interactive

interactive toggles the hover lift-apart. Turn it off for a purely static mark.

interactive (hover)

static

Entrance

The stack fades and rises in on mount. Remount to replay it.

In an Empty state

Composed inside Empty / EmptyMedia - the real-world usage this extracts from.

It's empty here

You are all caught up. New messages will land here.

API Reference

Stack

Prop	Type	Default	Description
`direction`	`"br-tl" \| "bl-tr" \| "tl-br" \| "tr-bl" \| "b-t" \| "t-b"`	`"br-tl"`	Recede direction / pose. Front layer points toward the FROM edge, stack recedes toward the TO edge.
`layers`	`number`	`3`	Number of stacked slabs.
`gap`	`number`	`59`	Depth (scene-Z) spacing between adjacent layers, in px.
`thickness`	`number`	`0.5`	Slab side-wall depth scale (drives the box-shadow thickness).
`size`	`string`	`"3rem"`	Card edge length (any CSS length).
`width`	`string`	—	Optional non-square layer width (overrides the square size).
`aspect`	`string`	—	Optional layer aspect-ratio, e.g. "4 / 3".
`interactive`	`boolean`	`true`	Lift the layers apart on hover.
`class`	`string`	—	Merged onto the root box.

Slot	Description
`default`	Front-layer content (e.g. an icon).
`layer-N`	Per-layer content; 1 = front, ascending = receding back.

Separator Surface Header