Credit card
Premium card with metal finish, PAN reveal, and balance odometer.
Preview & code
GFA Studio CLI · Coming soon
Card number
Name
Balance
$,.
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
Artifact JSON
https://ui.gkhn.dev/gfa/credit-card.jsonManual
- Download the component source from https://ui.gkhn.dev/gfa/credit-card.json (or copy from this repo: apps/web/src/blocks/gfa/credit-card.tsx).
- Place it in your project (for example: ./src/blocks/gfa/credit-card.tsx) and adjust imports/aliases.
- Ensure cn from @/lib/utils exists.
- Theme tokens and utilities should align with globals.css.
- Studio JSON ships credit-card.tsx, chip/PAN/balance/logo helpers, credit-card-fonts.ts, and credit-card.css—keep imports and paths together.
- Register creditCardDisplay and creditCardMono on your root html element (see app/layout.tsx in this repo) so --font-gfa-cc-display and --font-gfa-cc-mono exist.
- credit-card.tsx imports ./credit-card.css; ensure that file is bundled (or paste its rules into your global stylesheet under [data-gfa-credit-card]).
Dependencies
Uses motion/react (balance odometer + client helpers), next/font/google (Outfit + DM Mono via credit-card-fonts.ts), and scoped styles in credit-card.css. Payment logos are simplified/demo marks—not official brand assets.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| holderName | string | "Gokhan Akman" | Cardholder name shown on the front. |
| lastFour | string | "4149" | Last four digits of the PAN (non-digits are stripped). |
| balance | number | 46917.37 | USD balance rendered with an odometer roll-in on first paint. |
| className | string | — | Optional classes on the root article (e.g. max width). |