Sable

A charcoal wallet interface with an orange card stack, per-currency balances and transaction breakdowns. Card freezes, limits, transfers and activity use one browser-side model.

• Best forDevelopers building wallet, neobank and card-issuing interfaces with transparent movement and fee breakdowns.

• Wallet

  Explore the card carousel, per-currency balances, income line, exchange module and savings target. Open a ledger row to inspect its amount, fee, total and status timeline.

• Cards

  Switch among three demo cards, freeze one and adjust its monthly spending limit. A test-spend simulation, recent usage and upcoming charges explain the current available amount.

• Transfers

  Validate a transfer from a wallet to a recipient, savings pot or another wallet, review its details and confirm it locally. Consolidated totals display the fixture exchange rates used.

• Activity

  Search and filter the year's movements by type, status, wallet, card and period. Inspect transaction details and session card-control changes, or export the displayed records as CSV.

• A physical card presentation

  The CSS-drawn card stack uses restrained pointer tilt and a moving light. Freezing applies a frost treatment and changes the same card's status throughout the wallet, controls and activity.

• Limits and authorisation feedback

  Adjust spending limits with a slider, steps or presets. Remaining limit and available funds stay distinct, and local test spends explain declines caused by frozen cards or insufficient capacity.

• Fees and currencies kept explicit

  Transaction drawers separate amount, fee and total, with the fee rule, original currency and conversion. Consolidated balances name their fixed exchange rates instead of silently adding unlike currencies.

• A complete local transfer flow

  Choose the source, destination, amount and reference, then review and confirm. Validation, processing states, the recipient list and the activity ledger share the same model, with CSV export for displayed records.

• Choreographed views and accessible controls

  Wallet sections, the card stack and chart lines replay their entrances on each view visit. Restrained card tilt and the freeze treatment preserve the dark wallet composition. Phone layouts, keyboard navigation and initial or late reduced-motion preferences are supported; state stays shared across all four views.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

Money, card controls, authorisations, recipients, exchanges, FX rates and transfers are deterministic local demonstrations. No bank, card network, FX provider, payment service, backend or persistence is connected. Data resets on reload or Reset; fixture conversion rates are not live quotes.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Lucide icons
• FontsManrope
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.