KQ-1344 · BANK/APP

Bank App

A complete mobile banking home framed as a phone: a balance card whose digits are wheels that roll down into dots on snap (or frost over, or are wiped out by a bar on glide) when the composed eye shuts, quick actions, a day-grouped activity list that filters with rows closing up on glide, a detail screen pushed on glide and dragged back 1:1 with a projected release, and a send sheet with an amount pad whose characters rise in on snap, with the composed settle button as Send. Wide, the phone unfolds into two panes. Rows rove with the arrow keys, Escape steps back, the sheet is a trapped dialog that digits type into from anywhere.

KQ-1344 · BANK/APP

Coldbrook Bank

Good morning, Ada

Everyday ··4821

Available balance

Activity

Today−$43.75

Yesterday−$68.59

Mon 28 Sep+$2,581.20

Sun 27 Sep−$65.10

Sat 26 Sep−$1,249.00

everyday ··4821 · balance $4,182.36 · 16 transactions

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/bank-app

Props

account: BankAccount; default defaultBankAccount; The account on the card: name, last four digits, opening balance and currency. The balance shown is the opening figure plus every transaction in the list.
transactions / defaultTransactions: BankTransaction[]; default — / defaultBankTransactions; The account's activity, any order; shown newest first, grouped by day.
onTransactionsChange: (transactions: BankTransaction[]) => void; default —; Fires with every transaction once a payment made in the sheet has landed.
contacts: BankContact[]; default defaultBankContacts; Who money can be sent to or asked from.
owner: string; default "Ada"; The first name in the greeting.
bank: string; default "Coldbrook Bank"; The bank's name, over the greeting and in the accessible name.
now: Date | number; default defaultBankNow; The current moment: the status bar's clock, Today and Yesterday.
zoneOffset: number; default 0; Minutes east of UTC that times are shown in, so server and browser agree.
hidden / defaultHidden: boolean; default — / false; Privacy: true hides the balance.
onHiddenChange: (hidden: boolean) => void; default —; Fires from the eye that hid or showed the balance.
balance: "roll" | "frost" | "redact"; default "roll"; How the balance hides: its digits roll down into dots, frost over, or a bar wipes across them.
sheet: "bottom" | "full" | "float"; default "bottom"; How the send sheet presents: rising while home recedes behind it, covering the screen, or as a floating card.
density: "compact" | "cozy" | "roomy"; default "cozy"; Row height 48, 56 or 64px, with avatars, paddings and the balance to match.
onSend: (payment: BankPayment) => Promise<unknown> | unknown; default —; Sends, requests or adds the money. A returned promise holds the button until it settles; a rejection leaves the sheet open on Retry.
onTransactionOpen: (id: string | null) => void; default —; A transaction's detail opened (its id) or closed (null).
locale: string; default "en-US"; The locale for amounts.
format: (amount: number, currency: string) => string; default Intl.NumberFormat; Formats an amount (always positive) for the card, the rows and the sheet.
status: "ready" | "loading" | "error"; default "ready"; Whether the activity has arrived: skeleton rows, or a message with Try again.
onRetry: () => void; default —; Try again was pressed after the activity failed to load.
label: string; default bank; The screen's accessible name.
sound: boolean; default false; Play the pad's ticks and the navigation; the composed eye and Send button play their own.
disabled: boolean; default false; Greys the screen out and makes it inert.
className: string; default —; Classes for the outer wrapper.

Prop	Type	Default	Description
account	BankAccount	defaultBankAccount	The account on the card: name, last four digits, opening balance and currency. The balance shown is the opening figure plus every transaction in the list.
transactions / defaultTransactions	BankTransaction[]	— / defaultBankTransactions	The account's activity, any order; shown newest first, grouped by day.
onTransactionsChange	(transactions: BankTransaction[]) => void	—	Fires with every transaction once a payment made in the sheet has landed.
contacts	BankContact[]	defaultBankContacts	Who money can be sent to or asked from.
owner	string	"Ada"	The first name in the greeting.
bank	string	"Coldbrook Bank"	The bank's name, over the greeting and in the accessible name.
now	Date \| number	defaultBankNow	The current moment: the status bar's clock, Today and Yesterday.
zoneOffset	number	0	Minutes east of UTC that times are shown in, so server and browser agree.
hidden / defaultHidden	boolean	— / false	Privacy: true hides the balance.
onHiddenChange	(hidden: boolean) => void	—	Fires from the eye that hid or showed the balance.
balance	"roll" \| "frost" \| "redact"	"roll"	How the balance hides: its digits roll down into dots, frost over, or a bar wipes across them.
sheet	"bottom" \| "full" \| "float"	"bottom"	How the send sheet presents: rising while home recedes behind it, covering the screen, or as a floating card.
density	"compact" \| "cozy" \| "roomy"	"cozy"	Row height 48, 56 or 64px, with avatars, paddings and the balance to match.
onSend	(payment: BankPayment) => Promise<unknown> \| unknown	—	Sends, requests or adds the money. A returned promise holds the button until it settles; a rejection leaves the sheet open on Retry.
onTransactionOpen	(id: string \| null) => void	—	A transaction's detail opened (its id) or closed (null).
locale	string	"en-US"	The locale for amounts.
format	(amount: number, currency: string) => string	Intl.NumberFormat	Formats an amount (always positive) for the card, the rows and the sheet.
status	"ready" \| "loading" \| "error"	"ready"	Whether the activity has arrived: skeleton rows, or a message with Try again.
onRetry	() => void	—	Try again was pressed after the activity failed to load.
label	string	bank	The screen's accessible name.
sound	boolean	false	Play the pad's ticks and the navigation; the composed eye and Send button play their own.
disabled	boolean	false	Greys the screen out and makes it inert.
className	string	—	Classes for the outer wrapper.