Wallet Stack

Interactive

A Family-wallet-style deck of gradient credit-card faces; click or press Enter/Space to spring the front card up and tuck it to the back while the rest advance.

Inspired by Family wallet (Benji Taylor) — via Skiper UI recreation — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/wallet-stack.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/wallet-stack.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex min-h-[440px] w-full items-center justify-center bg-[#0f0f10] p-8">
    <WalletStack
      cards={[
        { id: "personal", label: "Personal", number: "•••• 4242", holder: "A. MORGAN" },
        { id: "business", label: "Business", number: "•••• 8817", holder: "A. MORGAN", gradient: ["#22d3ee", "#8b5cf6"] },
        { id: "travel", label: "Travel", number: "•••• 0093", holder: "A. MORGAN", gradient: ["#f5a623", "#ec4899"] },
        { id: "savings", label: "Savings", number: "•••• 5501", holder: "A. MORGAN", gradient: ["#ec4899", "#8b5cf6"] },
      ]}
    />
  </div>

Props

WalletStackProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">

Prop	Type	Default	Description
cards*	WalletCard[]	—	Cards, front-to-back. Three to five read best; any length is handled.
onFrontChange	(id: string) => void	—	Fires with the new front card's `id` after each cycle.
className	string	—	—

npm dependencies

motion