OrganismsBalance Card

Balance Card

@velon-finance/ui · status: stable · organism · domain

Hero card for Wallet / Home / Dashboard pages. Combines the sanctioned card-surface gradient header (navy → azul profundo, fixed in both light and dark themes per VELON Manual da Marca v1.0 §6.2) with a MoneyAmount and an optional action row.

Overview

Available balance
$12,847.23
Updated 2 minutes ago

Just the header

Total custody
R$ 4.321,50
Saldo bloqueado em D+1

With Buttons instead of QuickActionButtons

Saldo USD
$1,000.00

Code

import { BalanceCard, QuickActionButton } from '@velon-finance/ui'
import { ArrowUp, ArrowDown } from 'lucide-react'
 
<BalanceCard
  title="Available balance"
  amount={merchant.balance}
  currency="USD"
  subtitle={`Updated ${formatRelative(merchant.updatedAt)}`}
  hideable
  actions={
    <>
      <QuickActionButton icon={<ArrowUp />} label="Send" onClick={openSend} />
      <QuickActionButton icon={<ArrowDown />} label="Receive" onClick={openReceive} />
    </>
  }
/>
SelectOverview