Wallet Stack, animated React component

Payment cards tucked into a leather wallet, each peeking out a little higher than the one in front. Picking a card slides it out while the others sink, then turns it over in 3D to show the back; picking it again puts it away.

Pro
Cards
Hover
Spring
3D

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Pick a card.

Props

Prop	Type	Default	What it does
cards	WalletCard[]	DEFAULT_WALLET_CARDS	Cards from back to front, each { id, name, last, bg, ink, brand, expires? }. Four fit best.
label	string	"Wallet"	Word stamped on the wallet; also the group's accessible name.
hint	string	"Pick a card."	Hint under the wallet. An empty string hides it.
onSelect	(id: string \| null) => void	—	Called with the card id when one slides out, and null when it is put back.
autoplay	boolean	false	Takes each card out, flips it and puts it back in turn until someone touches it.
className	string	—	Extra classes for the root.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/wallet-stack
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
wallet-stack/
index.ts
wallet-stack.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { WalletStack } from "@/components/wallet-stack";

export default function Page() {
  return (
    <main>
      <WalletStack />
    </main>
  );
}

Wallet Stack, animated React component

Play with it

Props

More cards