Content Display

Swipe Card Stack

드래그한 카드를 뒤로 보내며 순환시키는 카드 스택입니다.

Preview

content stack

Swipe Card Stack

click cards to send back

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/stack.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/stack.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/stack.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/stack.json

Code

typescript

Copied

1import { Stack } from "@/components/stack"23export default function Example() {4  return (5    <div className="h-64 w-64">6      <Stack randomRotation />7    </div>8  )9}

Props

Prop	Type	Default	Description
randomRotation	boolean	false	Whether to rotate cards randomly.
sensitivity	number	200	Drag distance required to send card back.
sendToBackOnClick	boolean	false	Whether clicking moves a card back.
cards	React.ReactNode[]	built-in cards	Custom card nodes.
autoplay	boolean	false	Whether the stack cycles automatically.

Reference

ReactBits Swipe Card Stack