Account Dashboard

Full banking account dashboard with balance, transactions, and card management.

Preview · Account Dashboard

Code

HTML · @primus/ui-core

<div class="card stat" style="max-width:280px">
  <span class="card-label">Total Balance</span>
  <span class="card-value">$48,291.50</span>
  <span class="card-delta up">+$1,240 this month</span>
</div>

React

import { PrimusAccountCard } from '@/components/ui/primus-account-card';
import { PrimusTransactionList } from '@/components/ui/primus-transaction-list';

<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
  <PrimusAccountCard
    account={{
      id: 'acc-1',
      accountNumber: '4242424242424242',
      accountType: 'checking',
      balance: 24891,
      currency: 'USD',
      status: 'active',
    }}
    onViewDetails={(account) => console.log(account)}
    onTransfer={(account) => console.log('Transfer from', account.accountNumber)}
  />
  <PrimusTransactionList
    transactions={recentTransactions}
    onTransactionClick={(tx) => console.log(tx)}
  />
</div>

Angular

<primus-account-dashboard [apiUrl]="'https://api.yourdomain.com'">
</primus-account-dashboard>

Components

The Account Dashboard is composed from two independent registry components:

Component	Install command	Purpose
PrimusAccountCard	npx primus-ui add primus-account-card	Account summary card
PrimusTransactionList	npx primus-ui add primus-transaction-list	Transaction list

Version history

See the Changelog for version history and breaking changes.