Banking

For banks, credit unions and fintechs. Accounts with conditions, cards that turn over, fixed deposit rates, a savings goal and the account switch.

5 variants

Switch category

Accounts

Personal or business on a gliding switch, account models rise in, the most chosen one with a light on its border.

Open in Studio

Installv1.0.0

aiw add @ai-website/banking

Brings along utils, kit, button, icon, reveal, section, motion, slider

Usage

<Banking variant="accounts" accounts={[{ id, title, fee, free, features, audience, featured }]} />

Source

Cards

A card that tilts toward the pointer with a glint and turns over on a tap. Pick a card, its face and features change.

Open in Studio

Installv1.0.0

aiw add @ai-website/banking

Brings along utils, kit, button, icon, reveal, section, motion, slider

Usage

<Banking variant="cards" holder="…" cards={[{ id, name, kind, fee, face: ["#1d3b6e", "#3c6fb5", "#ffffff"], features: [{ icon, label }] }]} />

Source

Fixed deposit rates

Each term as a bar that grows in, pick one and set the amount. The interest earned glides, the balance at the end follows.

Open in Studio

Installv1.0.0

aiw add @ai-website/banking

Brings along utils, kit, button, icon, reveal, section, motion, slider

Usage

<Banking variant="rates" rates={[{ months: 0, rate: 2.1 }, { months: 12, rate: 2.8 }]} />

Source

Savings goal

Pick what you are saving for, set the target, the monthly amount and what is already there. A ring fills and the month you get there glides along.

Open in Studio

Installv1.0.0

aiw add @ai-website/banking

Brings along utils, kit, button, icon, reveal, section, motion, slider

Usage

<Banking variant="savings-goal" goals={[{ id, label, icon, target }]} planRate={2} />

Source

Account switch

Who does what when you switch banks, on a line that fills. Your own steps tick off with a pop, the progress beside them follows.

Open in Studio

Installv1.0.0

aiw add @ai-website/banking

Brings along utils, kit, button, icon, reveal, section, motion, slider

Usage

<Banking variant="account-switch" switchSteps={[{ title, text, who: "you" }]} />

Source

Details

What Banking brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.1.0
File: components/ui/banking.tsx
Brings along: utilskitbutton iconrevealsectionmotionslider
npm packages: None
Languages: English and German, 39 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The BankingProps interface from components/ui/banking.tsx, with the comments from the code.

variantoptional
BankingVariant
accountscardsratessavings-goalaccount-switch
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
accountsoptional
BankAccount[]
cardsoptional
BankCard[]
holderoptional
string
cards: the name printed on the card
ratesoptional
BankRate[]
goalsoptional
{ id: string; label: string; icon?: IconName; target: number }[]
savings-goal: goals to pick from, with an icon and a target
planRateoptional
number
savings-goal: interest of the savings plan in percent
startMonthoptional
string
savings-goal: the month to count from, YYYY-MM. Defaults to the browser date.
switchStepsoptional
{ title: string; text?: string; who: 'we' | 'you' }[]
account-switch: the steps, who does them
currencyoptional
string

Built-in texts

Banking writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 39 texts

Key	English	German
private	English Personal	German Privat
business	English Business	German Geschäftlich
perMonth	English / month	German / Monat
free	English Free	German Kostenlos
open	English Open {name}	German {name} eröffnen
popular	English Most chosen	German Am häufigsten gewählt
who	English For	German Für
cards	English Cards	German Karten
turn	English Turn the card	German Karte umdrehen
holder	English Card holder	German Karteninhaber
valid	English Valid	German Gültig bis
feeYear	English {price} a year	German {price} im Jahr
order	English Order {name}	German {name} bestellen
amount	English Amount	German Betrag
term	English Term	German Laufzeit
instant	English Instant access	German Täglich verfügbar
months	English {n} months	German {n} Monate
rate	English Interest {rate} p.a.	German Zins {rate} p. a.
interest	English Interest earned	German Zinsertrag
end	English Balance at the end	German Guthaben am Ende
insured	English Deposits protected up to €100,000	German Einlagen gesichert bis 100.000 €
openSavings	English Open fixed deposit	German Festgeld eröffnen
goal	English Your goal	German Dein Ziel
goalName	English What are you saving for?	German Wofür sparst du?
target	English Target	German Zielbetrag
monthly	English Monthly saving	German Monatliche Sparrate
start	English Already saved	German Schon gespart
reach	English You reach it in	German Du erreichst es in
reachN	English {n} months	German {n} Monaten
reachY	English {y} years {m} months	German {y} Jahren und {m} Monaten
by	English around {date}	German etwa {date}
never	English Raise the monthly amount to reach the goal.	German Erhöhe die Sparrate, um das Ziel zu erreichen.
plan	English Set up a savings plan	German Sparplan einrichten
steps	English Your move	German Dein Umzug
done	English Done	German Erledigt
progress	English {n} of {total} done	German {n} von {total} erledigt
weDo	English We do this	German Das machen wir
youDo	English You do this	German Das machst du
startSwitch	English Start the switch	German Kontowechsel starten

Read from the source of the component.

Banking handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-label, aria-live and aria-pressed, so screen readers announce purpose and state.
Uses the roles radio and radiogroup.
Announces changes through a live region without moving focus.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 5 places in the code switch motion off then.

Frequent questions

How do I install Banking?

With aiw add @ai-website/banking. The command puts components/ui/banking.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, section, motion and slider. It needs no further npm packages.

Which variants does Banking have?

5 variants, Accounts, Cards, Fixed deposit rates, Savings goal and Account switch. You pick one with the variant prop, for example variant="cards".

Can I translate the texts of Banking?

Yes. Banking carries 39 texts of its own in English and German, such as “Personal”, “Business” and “/ month”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Banking?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Banking with aiw_components and install it with aiw_add @ai-website/banking. Name the variant in your prompt, for example variant="accounts", and the assistant writes your content straight into the props.

Can I adjust Banking without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching Banking code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Banking on a page.

Banking

Accounts

Cards

Fixed deposit rates

Savings goal

Account switch

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with