Skip to content
UI Kit
Accent color

Fintech website sections

Product sections for finance apps and digital accounts. The app on a drawn phone, spending against budgets, card controls that act at once, payment approval as steps and a tour of the features.

5 variants
Switch category

Show the app before the download

A finance app sells trust and everyday ease, and both show best in the app itself. These sections put a live app on a drawn phone, let visitors try spending analysis and card controls right on the page and explain payment approval step by step.

Account in the app shows a payment arriving as a message, the balance counting up and transactions filtered by category, each opening a sheet with details, receipt and split. Spending analysis compares the month with the one before and draws categories against their budget, amber when close, red when over. Card control tilts a drawn card, freezes it under frost and puts online, abroad, contactless and cash on switches with a limit slider. Security in steps plays the approval of a payment from checkout to the tick. App tour connects features left and right with their own screen on the phone.

Let visitors touch the app on the landing page, a working demo answers more questions than a feature list. Put security in steps close to the sign up, that is where people decide to trust. Keep the app tour to five or six features, the strongest one first.

Finance app

Account in the appNew in 1.2

A drawn phone with the live app. Once in view a payment arrives as a message and the balance counts up. Categories filter the transactions, a transaction opens a sheet with details, receipt and split.

Spending analysisNew in 1.2

Months on a switch, the total glides with a comparison to the month before. Categories as bars against their budget mark, close to it amber, over it red. Pick one for the course of the month and the top merchants.

Card controlNew in 1.2

A drawn card that tilts with the pointer. Freeze it and frost covers the face, the switches rest. Online, abroad, contactless and cash each on a switch, the limit on a slider, a virtual card slides in behind the first.

Security in stepsNew in 1.2

How a payment is approved, in four steps that play by themselves once in view. The phone shows checkout, the message, the face check and the tick. Tap a step or the button in the phone to go on, the protections sit underneath.

App tourNew in 1.2

Features left and right of a drawn phone, a line reaches the phone from the active one. Each has its own screen that slides in, the tour plays by itself and stops once you pick a feature.

Details

What Finance app brings along, read from the registry and the source.

Area
Industries
Variants
5
Version
1.0.0 · since 1.2.0
File
components/ui/fintech.tsx
Brings along
utilskitbuttoniconsectionmotionsliderswitch
npm packages
None
Languages
English and German, 68 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The FintechProps interface from components/ui/fintech.tsx, with the comments from the code.

  • variantoptional
    FintechVariant

    accountspendingcard-controlsecurityapp-tour

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • categoriesoptional
    FinCategory[]

    account, spending

  • transactionsoptional
    FinTransaction[]
  • balanceoptional
    number

    account

  • incomingoptional
    { merchant: string; amount: number }

    account: the money in that arrives as a message

  • featuresoptional
    FinFeature[]

    account, security: points next to the phone or under the steps

  • monthsoptional
    FinMonth[]

    spending: the months, the last one is shown first

  • cardoptional
    FinCard

    card-control

  • virtualFaceoptional
    [string, string, string]
  • limitoptional
    number

    card-control: the monthly limit, what is spent and the highest limit

  • spentoptional
    number
  • limitMaxoptional
    number
  • stepsoptional
    FinFeature[]

    security: the approval in four steps, the phone shows checkout, message, check and done

  • paymentoptional
    { merchant: string; amount: number }
  • touroptional
    FinTourItem[]

    app-tour

  • useroptional
    string

    First name shown in the app

  • linksoptional
    { open?: string }
  • currencyoptional
    string

Built-in texts

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

Show all 68 texts
accountEnglish Main accountGerman Hauptkonto
balanceEnglish BalanceGerman Kontostand
sendEnglish SendGerman Senden
requestEnglish RequestGerman Anfordern
topUpEnglish Top upGerman Aufladen
allEnglish AllGerman Alle
categoriesEnglish CategoriesGerman Kategorien
categoryEnglish CategoryGerman Kategorie
detailsEnglish Details of {name}German Details zu {name}
closeEnglish CloseGerman Schließen
receiptEnglish Add a receiptGerman Beleg hinzufügen
splitEnglish Split the billGerman Rechnung teilen
incomingEnglish Money inGerman Geldeingang
dismissEnglish DismissGerman Ausblenden
monthEnglish MonthGerman Monat
spentTotalEnglish Spent in {month}German Ausgaben im {month}
vsLastEnglish {n} vs. last monthGerman {n} zum Vormonat
ofBudgetEnglish of {budget}German von {budget}
leftEnglish {n} left this monthGerman Noch {n} in diesem Monat
overEnglish {n} over budgetGerman {n} über dem Budget
noBudgetEnglish No budget setGerman Kein Budget gesetzt
courseEnglish Over the monthGerman Verlauf im Monat
legendBudgetEnglish BudgetGerman Budget
legendNearEnglish Almost used upGerman Fast ausgeschöpft
legendOverEnglish Over budgetGerman Über dem Budget
topMerchantsEnglish Where it wentGerman Wohin es ging
cardEnglish CardGerman Karte
physicalEnglish CardGerman Karte
virtualEnglish Virtual cardGerman Virtuelle Karte
freezeEnglish Freeze cardGerman Karte sperren
freezeHintEnglish Nobody can pay with it until you switch this offGerman Niemand kann damit zahlen, bis du das wieder ausschaltest
frozenEnglish FrozenGerman Gesperrt
frozenNoteEnglish Card frozen. Payments are declined until you unfreeze it.German Karte gesperrt. Zahlungen werden abgelehnt, bis du sie entsperrst.
activeNoteEnglish Card active. Changes apply at once.German Karte aktiv. Änderungen gelten sofort.
onlineEnglish Online paymentsGerman Online-Zahlungen
abroadEnglish Payments abroadGerman Zahlungen im Ausland
contactlessEnglish ContactlessGerman Kontaktlos
atmEnglish Cash at ATMsGerman Bargeld am Automaten
limitEnglish Monthly limitGerman Monatslimit
usedEnglish {spent} of {limit} usedGerman {spent} von {limit} genutzt
createVirtualEnglish Create a virtual cardGerman Virtuelle Karte erstellen
virtualReadyEnglish Virtual card ready to useGerman Virtuelle Karte ist bereit
holderEnglish Card holderGerman Karteninhaber
validEnglish ValidGerman Gültig bis
stepEnglish StepGerman Schritt
stepOfEnglish Step {n} of {total}German Schritt {n} von {total}
payEnglish Pay {amount}German {amount} bezahlen
approveQEnglish Approve this payment?German Diese Zahlung freigeben?
approveEnglish ApproveGerman Freigeben
declineEnglish DeclineGerman Ablehnen
verifyingEnglish Checking it is youGerman Wir prüfen, ob du es bist
approvedEnglish Payment approvedGerman Zahlung freigegeben
sentToEnglish {amount} to {name}German {amount} an {name}
replayEnglish Show againGerman Noch einmal zeigen
pauseEnglish Pause the tourGerman Rundgang anhalten
playEnglish Play the tourGerman Rundgang abspielen
featuresEnglish FeaturesGerman Funktionen
sendToEnglish Send to {name}German An {name} senden
perPersonEnglish per personGerman pro Person
sendRequestsEnglish Send {n} requestsGerman {n} Anfragen senden
goalEnglish Goal {goal}German Ziel {goal}
thisMonthEnglish This monthGerman Diesen Monat
nowEnglish nowGerman jetzt
openEnglish Open an accountGerman Konto eröffnen
totalEnglish TotalGerman Summe
shippingEnglish DeliveryGerman Versand
shippingFreeEnglish FreeGerman Kostenlos
secureEnglish Secured by the app on your phoneGerman Abgesichert über die App auf deinem Telefon

Accessibility

Read from the source of the component.

  • Finance app handles the keys Escape, Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-checked, aria-label, aria-live and aria-modal, so screen readers announce purpose and state.
  • Uses the roles dialog, radio, radiogroup and status.
  • 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. 9 places in the code switch motion off then.

Frequent questions

How do I install Finance app?

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

Which variants does Finance app have?

5 variants, Account in the app, Spending analysis, Card control, Security in steps and App tour. You pick one with the variant prop, for example variant="spending".

Can I translate the texts of Finance app?

Yes. Finance app carries 68 texts of its own in English and German, such as “Main account”, “Balance” and “Send”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Finance app?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Finance app on a page.

Often searched

Jump to

Copied to the clipboard