FlipStack

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

Installation

npx shadcn@latest add https://scrollxui.dev/registry/flipstack.json

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.