Card Stack

A swipeable deck: drag the top card and fling it — it flies off with spin and returns to the back. Keys and buttons too.

dragwaapi2 files · 149 locdeps: clsx, tailwind-merge

Mali, 27

Product designer

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/card-stack.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs card-stack

import { CardStack } from "@/components/opus/three/card-stack";

<CardStack onSwipe={(i, dir) => …}>{cards}</CardStack>

Prop	Type	Default	Description
depth	number	3	Visible cards behind the top one.
threshold	number	110	Drag distance for a throw (px).
onSwipe	(index, "left" \| "right") => void	—	Called after a throw.