Zum Inhalt springen
UI Kit
Accent

Bank

Für Banken, Genossenschaftsbanken und Fintechs. Konten mit Konditionen, Karten zum Umdrehen, Festgeldzinsen, ein Sparziel und der Kontowechsel.

5 Variants
Kategorie wechseln

Bank

Konten

Privat oder geschäftlich auf einem gleitenden Schalter, die Kontomodelle steigen auf, das beliebteste mit einem Licht am Rand.

Im Studio öffnen

Karten

Eine Karte, die sich zum Zeiger neigt und glänzt und sich auf Tipp umdreht. Eine Karte wählen, Gestaltung und Leistungen wechseln.

Im Studio öffnen

Festgeldzinsen

Jede Laufzeit als Balken, der hineinwächst, eine wählen und den Betrag einstellen. Der Zinsertrag gleitet mit, das Endguthaben folgt.

Im Studio öffnen

Sparziel

Wählen, wofür du sparst, Zielbetrag, Sparrate und schon Gespartes einstellen. Ein Ring füllt sich, der Monat, in dem du ankommst, gleitet mit.

Im Studio öffnen

Kontowechsel

Wer was beim Kontowechsel erledigt, auf einer Linie, die sich füllt. Die eigenen Schritte haken sich mit einem kleinen Sprung ab, der Fortschritt daneben folgt.

Im Studio öffnen

Details

Was Bank mitbringt, aus Registry und Quellcode gelesen.

Bereich
Industries
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/banking.tsx
Bringt mit
utilskitbuttoniconrevealsectionmotionslider
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 39 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • 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

Eingebaute Texte

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

Alle 39 Texte anzeigen
privateEnglisch PersonalDeutsch Privat
businessEnglisch BusinessDeutsch Geschäftlich
perMonthEnglisch / monthDeutsch / Monat
freeEnglisch FreeDeutsch Kostenlos
openEnglisch Open {name}Deutsch {name} eröffnen
popularEnglisch Most chosenDeutsch Am häufigsten gewählt
whoEnglisch ForDeutsch Für
cardsEnglisch CardsDeutsch Karten
turnEnglisch Turn the cardDeutsch Karte umdrehen
holderEnglisch Card holderDeutsch Karteninhaber
validEnglisch ValidDeutsch Gültig bis
feeYearEnglisch {price} a yearDeutsch {price} im Jahr
orderEnglisch Order {name}Deutsch {name} bestellen
amountEnglisch AmountDeutsch Betrag
termEnglisch TermDeutsch Laufzeit
instantEnglisch Instant accessDeutsch Täglich verfügbar
monthsEnglisch {n} monthsDeutsch {n} Monate
rateEnglisch Interest {rate} p.a.Deutsch Zins {rate} p. a.
interestEnglisch Interest earnedDeutsch Zinsertrag
endEnglisch Balance at the endDeutsch Guthaben am Ende
insuredEnglisch Deposits protected up to €100,000Deutsch Einlagen gesichert bis 100.000 €
openSavingsEnglisch Open fixed depositDeutsch Festgeld eröffnen
goalEnglisch Your goalDeutsch Dein Ziel
goalNameEnglisch What are you saving for?Deutsch Wofür sparst du?
targetEnglisch TargetDeutsch Zielbetrag
monthlyEnglisch Monthly savingDeutsch Monatliche Sparrate
startEnglisch Already savedDeutsch Schon gespart
reachEnglisch You reach it inDeutsch Du erreichst es in
reachNEnglisch {n} monthsDeutsch {n} Monaten
reachYEnglisch {y} years {m} monthsDeutsch {y} Jahren und {m} Monaten
byEnglisch around {date}Deutsch etwa {date}
neverEnglisch Raise the monthly amount to reach the goal.Deutsch Erhöhe die Sparrate, um das Ziel zu erreichen.
planEnglisch Set up a savings planDeutsch Sparplan einrichten
stepsEnglisch Your moveDeutsch Dein Umzug
doneEnglisch DoneDeutsch Erledigt
progressEnglisch {n} of {total} doneDeutsch {n} von {total} erledigt
weDoEnglisch We do thisDeutsch Das machen wir
youDoEnglisch You do thisDeutsch Das machst du
startSwitchEnglisch Start the switchDeutsch Kontowechsel starten

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Bank reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
  • Setzt aria-checked, aria-label, aria-live und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio und radiogroup.
  • 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. 5 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Bank?

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

Welche Varianten hat Bank?

5 Varianten, Konten, Karten, Festgeldzinsen, Sparziel und Kontowechsel. Du wählst sie mit der Prop variant, zum Beispiel variant="cards".

Kann ich die Texte von Bank übersetzen?

Ja. Bank bringt 39 eigene Texte auf Deutsch und Englisch mit, etwa „Privat“, „Geschäftlich“ und „/ Monat“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Bank einbauen?

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

Kann ich Bank ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Banking-Code zum Kopieren.

Ähnliche Components

Mehr aus Industries, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Bank stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert