Click Stack

A stack of cards you click through

click-stack-tw

Customize

Card Width

250

Card Height

300

Spread X

Spread Y

-20

Visible Count

Border Radius

Shadow Blur

Shadow Opacity

0.30

Opacity

1.00

Card Color

Duration

0.35

Depth Scale

0.08

Depth Opacity

0.00

Props

Name	Type	Default	Description
`items`	ReactNode[]	`built-in cards`	Renderable content for each card: images, text, JSX, or any React node
`cardWidth`	number	`250`	Width of each card in pixels
`cardHeight`	number	`300`	Height of each card in pixels
`spreadX`	number	`20`	Horizontal offset between stacked depth levels
`spreadY`	number	`-20`	Vertical offset between stacked depth levels
`duration`	number	`0.35`	Transition duration in seconds (0.1–2.0)
`ease`	string	`"power3.out"`	GSAP easing string for card repositioning
`borderRadius`	number	`24`	Card corner radius in pixels (0–50)
`shadowBlur`	number	`30`	Card shadow blur radius (0–100)
`shadowOpacity`	number	`0.3`	Card shadow opacity (0–1)
`cardColor`	string	`"#ffffff"`	Fallback background color for card surfaces
`visibleCount`	number	`5`	Maximum number of cards shown in the stack (1–10)
`depthScale`	number	`0.08`	Scale reduction per depth level (0–0.3)
`depthOpacity`	number	`0`	Opacity reduction per depth level (0–1)
`className`	string	`""`	CSS class for the outer container
`cardClassName`	string	`""`	CSS class applied to each card wrapper
`opacity`	number	`1`	Overall container opacity (0–1)

itemsReactNode[]

Renderable content for each card: images, text, JSX, or any React node

Defaultbuilt-in cards

cardWidthnumber

Width of each card in pixels

Default250

cardHeightnumber

Height of each card in pixels

Default300

spreadXnumber

Horizontal offset between stacked depth levels

Default20

spreadYnumber

Vertical offset between stacked depth levels

Default-20

durationnumber

Transition duration in seconds (0.1–2.0)

Default0.35

easestring

GSAP easing string for card repositioning

Default"power3.out"

borderRadiusnumber

Card corner radius in pixels (0–50)

Default24

shadowBlurnumber

Card shadow blur radius (0–100)

Default30

shadowOpacitynumber

Card shadow opacity (0–1)

Default0.3

cardColorstring

Fallback background color for card surfaces

Default"#ffffff"

visibleCountnumber

Maximum number of cards shown in the stack (1–10)

Default5

depthScalenumber

Scale reduction per depth level (0–0.3)

Default0.08

depthOpacitynumber

Opacity reduction per depth level (0–1)

Default0

classNamestring

CSS class for the outer container

Default""

cardClassNamestring

CSS class applied to each card wrapper

Default""

opacitynumber

Overall container opacity (0–1)

Default1

Name

Type

Default

Description

items

ReactNode[]

built-in cards

Renderable content for each card: images, text, JSX, or any React node

cardWidth

number

250

Width of each card in pixels

cardHeight

number

300

Height of each card in pixels

spreadX

number

20

Horizontal offset between stacked depth levels

spreadY

number

-20

Vertical offset between stacked depth levels

duration

number

0.35

Transition duration in seconds (0.1–2.0)

ease

string

"power3.out"

GSAP easing string for card repositioning

borderRadius

number

24

Card corner radius in pixels (0–50)

shadowBlur

number

30

Card shadow blur radius (0–100)

shadowOpacity

number

0.3

Card shadow opacity (0–1)

cardColor

string

"#ffffff"

Fallback background color for card surfaces

visibleCount

number

5

Maximum number of cards shown in the stack (1–10)

depthScale

number

0.08

Scale reduction per depth level (0–0.3)

depthOpacity

number

0

Opacity reduction per depth level (0–1)

className

string

""

CSS class for the outer container

cardClassName

string

""

CSS class applied to each card wrapper

opacity

number

1

Overall container opacity (0–1)