Zum Inhalt springen
UI Kit
Accent

Fintech Website Sections

Produktseiten für Finanz-Apps und digitale Konten. Die App am gezeichneten Telefon, Ausgaben gegen Budgets, Kartensteuerung, die sofort wirkt, die Freigabe einer Zahlung in Schritten und ein Rundgang durch die Funktionen.

5 Variants
Kategorie wechseln

Zeig die App vor dem Download

Eine Finanz-App verkauft Vertrauen und Leichtigkeit im Alltag, und beides zeigt sich am besten in der App selbst. Diese Sections setzen eine lebendige App auf ein gezeichnetes Telefon, lassen Besucher Ausgaben-Analyse und Kartensteuerung direkt auf der Seite ausprobieren und erklären die Zahlungsfreigabe Schritt für Schritt.

„Konto in der App“ lässt eine Zahlung als Mitteilung eintreffen, den Kontostand hochzählen und Umsätze nach Kategorie filtern, jeder öffnet ein Sheet mit Details, Beleg und Teilen. Die „Ausgaben-Analyse“ vergleicht den Monat mit dem Vormonat und zeichnet Kategorien gegen ihr Budget, nah dran bernsteinfarben, darüber rot. Die „Kartensteuerung“ neigt eine gezeichnete Karte, friert sie unter Frost ein und legt Online, Ausland, kontaktlos und Bargeld auf Schalter mit einem Limit-Regler. „Sicherheit in Schritten“ spielt die Freigabe einer Zahlung vom Bezahlen bis zum Haken durch. Der „App-Rundgang“ verbindet Funktionen links und rechts mit ihrem eigenen Bildschirm im Telefon.

Lass Besucher die App schon auf der Landingpage anfassen, eine funktionierende Demo beantwortet mehr Fragen als eine Funktionsliste. Stell „Sicherheit in Schritten“ nah an die Registrierung, dort entscheiden Menschen, ob sie vertrauen. Halte den Rundgang bei fünf oder sechs Funktionen, die stärkste zuerst.

Finanz-App

Konto in der AppNeu in 1.2

Ein gezeichnetes Telefon mit der App. Sobald es im Bild ist, kommt ein Geldeingang als Mitteilung und der Kontostand zählt hoch. Kategorien filtern die Umsätze, ein Umsatz öffnet ein Blatt mit Details, Beleg und Teilen.

AusgabenanalyseNeu in 1.2

Monate auf einem Schalter, die Summe gleitet mit dem Vergleich zum Vormonat. Kategorien als Balken gegen ihre Budgetmarke, knapp davor bernsteinfarben, darüber rot. Eine wählen für den Verlauf im Monat und die größten Händler.

KartensteuerungNeu in 1.2

Eine gezeichnete Karte, die sich mit dem Zeiger neigt. Sperren legt Frost über die Karte, die Schalter ruhen. Online, Ausland, Kontaktlos und Bargeld je auf einem Schalter, das Limit auf einem Regler, eine virtuelle Karte schiebt sich hinter die erste.

Sicherheit in SchrittenNeu in 1.2

Wie eine Zahlung freigegeben wird, in vier Schritten, die sich im Bild von selbst abspielen. Das Telefon zeigt Kasse, Mitteilung, Gesichtsprüfung und Haken. Einen Schritt oder den Knopf im Telefon antippen, um weiterzugehen, darunter die Schutzfunktionen.

App-RundgangNeu in 1.2

Funktionen links und rechts eines gezeichneten Telefons, von der aktiven reicht eine Linie zum Telefon. Jede hat ihren eigenen Bildschirm, der hereingleitet, der Rundgang spielt sich selbst ab und stoppt, sobald du eine Funktion wählst.

Details

Was Finanz-App mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.2.0
Datei
components/ui/fintech.tsx
Bringt mit
utilskitbuttoniconsectionmotionsliderswitch
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 68 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle FintechProps aus components/ui/fintech.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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

Eingebaute Texte

Diese Texte schreibt Finanz-App selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 68 Texte anzeigen
accountEnglisch Main accountDeutsch Hauptkonto
balanceEnglisch BalanceDeutsch Kontostand
sendEnglisch SendDeutsch Senden
requestEnglisch RequestDeutsch Anfordern
topUpEnglisch Top upDeutsch Aufladen
allEnglisch AllDeutsch Alle
categoriesEnglisch CategoriesDeutsch Kategorien
categoryEnglisch CategoryDeutsch Kategorie
detailsEnglisch Details of {name}Deutsch Details zu {name}
closeEnglisch CloseDeutsch Schließen
receiptEnglisch Add a receiptDeutsch Beleg hinzufügen
splitEnglisch Split the billDeutsch Rechnung teilen
incomingEnglisch Money inDeutsch Geldeingang
dismissEnglisch DismissDeutsch Ausblenden
monthEnglisch MonthDeutsch Monat
spentTotalEnglisch Spent in {month}Deutsch Ausgaben im {month}
vsLastEnglisch {n} vs. last monthDeutsch {n} zum Vormonat
ofBudgetEnglisch of {budget}Deutsch von {budget}
leftEnglisch {n} left this monthDeutsch Noch {n} in diesem Monat
overEnglisch {n} over budgetDeutsch {n} über dem Budget
noBudgetEnglisch No budget setDeutsch Kein Budget gesetzt
courseEnglisch Over the monthDeutsch Verlauf im Monat
legendBudgetEnglisch BudgetDeutsch Budget
legendNearEnglisch Almost used upDeutsch Fast ausgeschöpft
legendOverEnglisch Over budgetDeutsch Über dem Budget
topMerchantsEnglisch Where it wentDeutsch Wohin es ging
cardEnglisch CardDeutsch Karte
physicalEnglisch CardDeutsch Karte
virtualEnglisch Virtual cardDeutsch Virtuelle Karte
freezeEnglisch Freeze cardDeutsch Karte sperren
freezeHintEnglisch Nobody can pay with it until you switch this offDeutsch Niemand kann damit zahlen, bis du das wieder ausschaltest
frozenEnglisch FrozenDeutsch Gesperrt
frozenNoteEnglisch Card frozen. Payments are declined until you unfreeze it.Deutsch Karte gesperrt. Zahlungen werden abgelehnt, bis du sie entsperrst.
activeNoteEnglisch Card active. Changes apply at once.Deutsch Karte aktiv. Änderungen gelten sofort.
onlineEnglisch Online paymentsDeutsch Online-Zahlungen
abroadEnglisch Payments abroadDeutsch Zahlungen im Ausland
contactlessEnglisch ContactlessDeutsch Kontaktlos
atmEnglisch Cash at ATMsDeutsch Bargeld am Automaten
limitEnglisch Monthly limitDeutsch Monatslimit
usedEnglisch {spent} of {limit} usedDeutsch {spent} von {limit} genutzt
createVirtualEnglisch Create a virtual cardDeutsch Virtuelle Karte erstellen
virtualReadyEnglisch Virtual card ready to useDeutsch Virtuelle Karte ist bereit
holderEnglisch Card holderDeutsch Karteninhaber
validEnglisch ValidDeutsch Gültig bis
stepEnglisch StepDeutsch Schritt
stepOfEnglisch Step {n} of {total}Deutsch Schritt {n} von {total}
payEnglisch Pay {amount}Deutsch {amount} bezahlen
approveQEnglisch Approve this payment?Deutsch Diese Zahlung freigeben?
approveEnglisch ApproveDeutsch Freigeben
declineEnglisch DeclineDeutsch Ablehnen
verifyingEnglisch Checking it is youDeutsch Wir prüfen, ob du es bist
approvedEnglisch Payment approvedDeutsch Zahlung freigegeben
sentToEnglisch {amount} to {name}Deutsch {amount} an {name}
replayEnglisch Show againDeutsch Noch einmal zeigen
pauseEnglisch Pause the tourDeutsch Rundgang anhalten
playEnglisch Play the tourDeutsch Rundgang abspielen
featuresEnglisch FeaturesDeutsch Funktionen
sendToEnglisch Send to {name}Deutsch An {name} senden
perPersonEnglisch per personDeutsch pro Person
sendRequestsEnglisch Send {n} requestsDeutsch {n} Anfragen senden
goalEnglisch Goal {goal}Deutsch Ziel {goal}
thisMonthEnglisch This monthDeutsch Diesen Monat
nowEnglisch nowDeutsch jetzt
openEnglisch Open an accountDeutsch Konto eröffnen
totalEnglisch TotalDeutsch Summe
shippingEnglisch DeliveryDeutsch Versand
shippingFreeEnglisch FreeDeutsch Kostenlos
secureEnglisch Secured by the app on your phoneDeutsch Abgesichert über die App auf deinem Telefon

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Finanz-App reagiert selbst auf die Tasten Escape, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-checked, aria-label, aria-live und aria-modal, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen dialog, radio, radiogroup und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 9 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Finanz-App?

Mit aiw add @ai-website/fintech. Der Befehl legt die Datei components/ui/fintech.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section, motion, slider und switch. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Finanz-App?

5 Varianten, Konto in der App, Ausgabenanalyse, Kartensteuerung, Sicherheit in Schritten und App-Rundgang. Du wählst sie mit der Prop variant, zum Beispiel variant="spending".

Kann ich die Texte von Finanz-App übersetzen?

Ja. Finanz-App bringt 68 eigene Texte auf Deutsch und Englisch mit, etwa „Hauptkonto“, „Kontostand“ und „Senden“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Finanz-App einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Finanz-App mit aiw_components und installieren sie mit aiw_add @ai-website/fintech. Nenn im Prompt die Variante, etwa variant="account", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Finanz-App stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert