# Wallet, card and currencies

An isometric shadcn/ui hero illustration for fintech sites: a stitched wallet in your brand colour, the brand card sliding out, and currency coins following it, in ink.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Fintech and neobank hero sections; Wallet, savings and payments feature sections; Pricing and onboarding pages for banking apps; Empty states for balances and transactions
- **Category:** Finance · **Type:** Scenes · **Style:** Flat, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/isometric/wallet-coins) · [Screenshot](https://www.craftui.space/llms.md/preview/wallet-coins.4c75217d.jpg)

![Wallet, card and currencies](https://www.craftui.space/llms.md/preview/wallet-coins.4c75217d.jpg)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/wallet-coins.json
```

This is a paid item (ISO-A0SDZZ): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

```tsx
import WalletCoins from "@/components/isometric/wallet-coins";

export default function Page() {
  return <WalletCoins />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `IsoTone` | `"primary"` | Brand colour: a theme token name (primary, chart-2…) or any CSS colour. The wallet is a pastel of it. |
| `accent` | `IsoTone` | — | Colour of the card and strap, at full strength. Defaults to `tone`. |
| `variant` | `IsoVariant` | `"ink"` | Flat ink drawing (default), soft tint, full colour, or blueprint outline. |
| `strokeWidth` | `number` | `0.3` | Line weight: in `ink` 0.3 is a 1.3 px outline at any size. |
| `cardName` | `string` | `"Jane Doe"` | Name printed on the card, up to about 14 characters. |
| `last4` | `string` | `"4242"` | Last four digits printed on the card. |
| `currencies` | `readonly string[]` | `built-in demo content` | Currency glyphs on the coins, up to three (one character each). |
| `autoPlay` | `boolean` | `true` | Card and coins come out of the wallet when the scene scrolls into view. Off holds their places. |
| `idle` | `boolean` | `true` | After coming out, the coins keep swaying and bobbing on a sine, out of phase; the card breathes. |
| `shadow` | `"soft" \| "none"` | `"none"` | No shadow (default), or the soft cast shadow. |
| `grid` | `boolean` | `false` | Dashed construction grid on the floor. Off by default for a hero. |
| `rotate` | `IsoRotate` | `"pointer"` | Let the viewer turn the scene: "pointer" (leans toward the pointer and settles back), "drag" (drag sideways or use the arrow keys), or "off". |
| `orbit` | `IsoOrbit` | `22` | How far it turns, in degrees: a number for both ways, or [min, max]. Default 22. |
| `title` | `string` | — | Accessible description. Without it the scene is decorative. |
| `className` | `string` | — | Classes for the wrapper; size the scene with width (it keeps its aspect ratio). |

## Files

The install adds:

- `components/isometric/wallet-coins.tsx`
- `components/isometric/iso-core.tsx`

npm dependencies (installed for you): `motion`.