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.

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

Props, events, and slots for each sub-component.

Stack

Props

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.

Slots

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

Spinner Status Indicator