Motion UIComponentsComponent

Card stack

A fanned card stack navigated with carousel controls and a top-left pop between cards.

API reference

Components

`<CardStackCard />`

One card in the stack. Must be rendered inside CardStack.

`children?`

ReactNode

Card face content.

`className?`

string

Merged onto the card face.

`<CardStack />`

Stack stage with keyboard-reachable carousel group and fan geometry.

`state`

CardStackHandle

Card-stack controller from useCardStack.

`children?`

ReactNode

CardStackCard children, one per card.

`visibleBehind?`

number = 2

Cards behind the front that stay visible. Defaults to 2.

`cardGap?`

number = 16

Vertical push per step back, in px. Defaults to 16.

`cardScaleStep?`

number = 0.05

Scale shed per step back. Defaults to 0.05.

`fanRotation?`

number = 4

Fan rotation per step back, in degrees. Defaults to 4.

`cardMinHeight?`

string = "19rem"

Front card min-height for stage sizing. Defaults to "19rem".

`label?`

string = "Card stack"

aria-label for the carousel group. Defaults to "Card stack".

`className?`

string

Merged onto the stack group element.

Hooks

`useCardStack`

Headless controller for front-card index and movement direction.

useCardStack(options: { total: number }): CardStackHandle

Returns

`index`

number

Current front-card index (0-based), wrapped into [0, total).

`direction`

number

Direction of the last move: 1 forward, -1 backward.

`movement`

number

Monotonically increasing movement count.

`total`

number

Total number of cards.

`advance`

(dir: number) => void

Advance the stack by dir (1 next, -1 previous).

`next`

() => void

Advance to the next card.

`prev`

() => void

Return to the previous card.

Featured in

See the card stack composed into full sections.

Testimonials card stackAn example of a draggable testimonial card stack that re-fans as you flick the top card away in Motion for React.