Wallet Pass
Free Wallet React component — WalletPassCard. MIT licensed, copy-paste ready for Next.js and Tailwind CSS.
Flippable membership pass — gradient front with tier and expiry, QR grid on the back. Tap or hover to flip between sides.
Preview
Setup
How to use
Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.
- 1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react - 2
Copy
lib/cn.tsbelow. Skip if you already havecn(). - 3
Copy the code below and create
components/wallet/wallet-pass-card.tsxin your project. - 4
Import and render:
Exampleimport { WalletPassCard } from "@/components/wallet/wallet-pass-card";
lib/cn.ts
components/wallet/wallet-pass-card.tsx