FlipStack

A stylish and animated card stack UI for showcasing content in layered views.

Installation

npx shadcn@latest add @scrollxui/flipstack

import FlipStack from '@/components/ui/flipstack';

<FlipStack
  cards={[
    { id: 1, content: 'Card One' },
    { id: 2, content: 'Card Two' },
    { id: 3, content: 'Card Three' },
  ]}
/>

Introduced a new mobileDirection prop ("top" | "bottom") to control the mobile bounce direction.

A stylish and animated card stack UI for showcasing content in layered views.

Property	Type	Default	Description
`cards`	FlipStackCard[]	`id`	Array of cards to display in the stack.
`FlipStackCard.id`	number	`required`	Unique identifier for the card. Used as React key and to manage animations.
`mobileDirection`	"top" \| "bottom"	`"top"`	Controls the bounce direction of the active card on mobile devices.
`FlipStackCard.content`	ReactNode	`optional`	Custom content to render inside the card. Can be text, images, or any JSX element.