YourBanK logoYourBanK

BankCard

A card component for displaying bank account information and balances.

Usage

Savings Account

$45,750.00

John Doe

●● / ●●

●●●● ●●●● ●●●● 8448

paymastercard
lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { BankCard } from "@/components/bank/bank-card"

export default function AccountPage() {
  const account = {
    id: "acc-1",
    name: "Main Checking",
    mask: "4567",
    institutionId: "chase",
    currentBalance: 12345.67,
    availableBalance: 12345.67,
    type: "depository",
    subtype: "checking",
    officialName: "Chase Total Checking",
  }

  return (
    <BankCard
      account={account}
      userName="John Doe"
    />
  )
}

Props

account

The bank account object containing account details.

Type: BankAccount

userName

The name of the account holder.

Type: string

showBalance

Whether to show the account balance initially.

Type: boolean (optional, defaults to true)

className

Additional CSS classes to apply to the card.

Type: string (optional)

Features

Balance Toggle

Users can show/hide the balance amount by clicking the eye icon, enhancing privacy when needed.

Responsive Design

The card adapts to different screen sizes while maintaining readability and visual appeal.

Animated Transitions

Smooth animations when the card mounts and when toggling the balance visibility.