asafefe.dev

Card Stack

New

A deck you drag or flick away, card by card. Loops forever and works with arrow keys.

motionutils

Godot MCP Studio

AI tooling for Godot

drag me

PubRestore

Open .pub files again

drag me

İşlemde

Job tracking for shops

drag me

Installation

$ pnpm dlx shadcn@latest add @soultel/card-stack

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/card-stack.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion
  2. 2. Copy the source from the Code tab into components/card-stack.tsx.

Usage

example.tsx11 lines
import { CardStack } from "@/components/card-stack"

export function Example() {
  return (
    <CardStack
      items={["One", "Two", "Three", "Four"]}
      getKey={(s) => s}
      renderCard={(s) => <div className="p-6 text-xl">{s}</div>}
    />
  )
}

Props

PropTypeDefaultDescription
itemsT[]-Data for each card.
renderCard(item: T, index: number) => ReactNode-Card contents.
getKey(item: T) => string-Stable key per item.
visiblenumber3Cards peeking behind the top one.
onSwipe(item: T, dir: "left" | "right") => void-Called on each swipe.