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-blog.vercel.app/r/stack.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/stack.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/stack.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/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

randomRotation

Type: boolean
Default: false
Description: Whether to rotate cards randomly.

sensitivity

Type: number
Default: 200
Description: Drag distance required to send card back.

sendToBackOnClick

Type: boolean
Default: false
Description: Whether clicking moves a card back.

cards

Type: React.ReactNode[]
Default: built-in cards
Description: Custom card nodes.

autoplay

Type: boolean
Default: false
Description: Whether the stack cycles automatically.

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