Vault Banking Dashboard

Production-ready banking dashboard built with Next.js 16, React 19, and Tailwind CSS v4. Includes accounts, transactions, cards, transfers, bill payments, analytics, and a full auth flow.

Overview

Vault is designed for fintech startups, neobank teams, and agencies who need a modern banking dashboard with account management, transaction tracking, card controls, and financial analytics — all with light and dark mode support.

Live Preview: View Demo

Tech Stack

Technology	Version	Purpose
Next.js	16.1.6	React framework (App Router)
React	19.2.3	UI library
TypeScript	5.x	Type safety
Tailwind CSS	4.x	Styling
Framer Motion	12.x	Animations & transitions
Recharts	3.x	Charts & data visualization
Phosphor Icons	2.x	Icon library
next-themes	0.4.x	Light/dark mode
clsx + tailwind-merge	—	Class name utilities

Quick Start


cd vault
npm install
npm run dev
# Open http://localhost:3000

Pages Included (19+)

Auth Pages

Page	Route	Description
Login	`/login`	Email/password with social login (Google, Apple)
Sign Up	`/signup`	Registration with password confirmation
Forgot Password	`/forgot-password`	Password reset request
Reset Password	`/reset-password`	New password form
Verify Email	`/verify-email`	Email verification screen
Onboarding	`/onboarding`	Financial profile setup wizard

Dashboard Pages

Page	Route	Description
Overview	`/dashboard/overview`	Stats, balance chart, spending breakdown, recent transactions
Accounts	`/dashboard/accounts`	8 accounts (checking, savings, investment, credit)
Account Detail	`/dashboard/accounts/[id]`	Balance history, transactions, interest rate
Transactions	`/dashboard/transactions`	Full transaction table with filters & pagination
Transaction Detail	`/dashboard/transactions/[id]`	Transaction metadata, reference, notes
Cards	`/dashboard/cards`	Bank cards with Visa/Mastercard themes
Card Detail	`/dashboard/cards/[id]`	Card controls, spending limits, freeze/unfreeze
Transfers	`/dashboard/transfers`	Internal, external, and wire transfers
Payments	`/dashboard/payments`	Bill payments with auto-pay toggles
Beneficiaries	`/dashboard/beneficiaries`	Saved recipients (personal & business)
Analytics	`/dashboard/analytics`	12-month balance history, spending by category, top merchants
Settings	`/dashboard/settings`	User settings & preferences

Project Structure


vault/
├── app/
│   ├── layout.tsx                     # Root layout (fonts, ThemeProvider)
│   ├── page.tsx                       # Redirects to /dashboard/overview
│   ├── globals.css                    # Theme variables & Tailwind
│   ├── (auth)/                        # Auth route group
│   │   ├── layout.tsx                 # Split-panel auth layout
│   │   ├── login/page.tsx             # Login page
│   │   ├── signup/page.tsx            # Registration page
│   │   ├── forgot-password/page.tsx   # Forgot password
│   │   ├── reset-password/page.tsx    # Reset password
│   │   ├── verify-email/page.tsx      # Email verification
│   │   └── onboarding/page.tsx        # Financial profile setup
│   └── dashboard/
│       ├── layout.tsx                 # Dashboard layout (sidebar + header)
│       ├── overview/page.tsx          # Main dashboard
│       ├── accounts/
│       │   ├── page.tsx               # Accounts list
│       │   └── [id]/page.tsx          # Account detail
│       ├── transactions/
│       │   ├── page.tsx               # Transaction history
│       │   └── [id]/page.tsx          # Transaction detail
│       ├── cards/
│       │   ├── page.tsx               # Cards management
│       │   └── [id]/page.tsx          # Card detail & controls
│       ├── transfers/page.tsx         # Send money
│       ├── payments/page.tsx          # Bill payments
│       ├── beneficiaries/page.tsx     # Saved recipients
│       ├── analytics/page.tsx         # Financial analytics
│       └── settings/page.tsx          # Settings
├── components/
│   ├── ui/                            # Base UI primitives
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Select.tsx
│   │   ├── Textarea.tsx
│   │   ├── Modal.tsx
│   │   ├── Drawer.tsx
│   │   ├── Dropdown.tsx
│   │   ├── Badge.tsx
│   │   ├── Avatar.tsx
│   │   ├── Checkbox.tsx
│   │   ├── Toggle.tsx
│   │   ├── RadioGroup.tsx
│   │   ├── TagInput.tsx
│   │   ├── Card.tsx
│   │   ├── Table.tsx
│   │   ├── Tabs.tsx
│   │   ├── Skeleton.tsx
│   │   ├── ProgressBar.tsx
│   │   ├── Toast.tsx
│   │   ├── IconButton.tsx
│   │   ├── ActionMenu.tsx
│   │   ├── FormSection.tsx
│   │   ├── DeleteConfirmModal.tsx
│   │   ├── GoBackButton.tsx
│   │   ├── EmptyState.tsx
│   │   └── SocialIcons.tsx
│   ├── dashboard/                     # Dashboard-specific components
│   │   ├── StatCard.tsx               # Metric cards with trends
│   │   ├── BalanceChart.tsx           # Balance line chart
│   │   ├── BalanceTrendChart.tsx      # Balance trend over time
│   │   ├── AccountBalanceChart.tsx    # Per-account balance history
│   │   ├── SpendingChart.tsx          # Spending donut chart
│   │   ├── IncomeExpenseChart.tsx     # Income vs expense bars
│   │   ├── AccountCard.tsx            # Account summary card
│   │   ├── BeneficiaryCard.tsx        # Recipient card
│   │   ├── BillCard.tsx               # Bill payment card
│   │   ├── TransactionTable.tsx       # Transaction data table
│   │   ├── RecentTransactions.tsx     # Latest transactions widget
│   │   ├── TransactionFilters.tsx     # Filter controls
│   │   ├── SpendingLimitCard.tsx      # Card spending limits
│   │   ├── Pagination.tsx            # Table pagination
│   │   ├── PageHeader.tsx            # Page title + actions
│   │   ├── SkeletonStatCard.tsx      # Loading placeholder
│   │   ├── SkeletonChart.tsx         # Chart loading placeholder
│   │   └── SkeletonTable.tsx         # Table loading placeholder
│   ├── features/                      # Feature-specific components
│   │   ├── BankCard.tsx               # Visa/Mastercard rendering
│   │   ├── CardControls.tsx           # Card freeze, contactless, etc.
│   │   ├── NotificationsDropdown.tsx  # Notifications panel
│   │   ├── ProfileMenu.tsx            # User profile dropdown
│   │   └── CommandPalette.tsx         # ⌘K command palette
│   └── layout/                        # Layout components
│       ├── Sidebar.tsx               # Desktop sidebar navigation
│       ├── MobileSidebar.tsx         # Mobile slide-out sidebar
│       ├── Header.tsx                # Top header bar
│       ├── SearchBar.tsx             # Global search
│       ├── VaultLogo.tsx             # Brand logo
│       ├── ThemeProvider.tsx         # Dark/light mode provider
│       ├── SidebarContext.tsx        # Sidebar state
│       └── HeaderContext.tsx         # Header state
├── hooks/
│   ├── useClickOutside.ts            # Click outside handler
│   └── usePageHeader.ts             # Page header helper
├── lib/
│   ├── utils.ts                      # cn(), formatCurrency(), formatDate(), etc.
│   └── data/                         # Mock data
│       ├── accounts.ts               # 8 bank accounts
│       ├── transactions.ts           # 32 transactions
│       ├── cards.ts                  # 4 bank cards
│       ├── beneficiaries.ts          # 10 saved recipients
│       ├── transfers.ts              # 21 transfers
│       ├── bills.ts                  # 10 recurring bills
│       └── analytics.ts             # 12-month financial history
└── public/
    └── images/                       # Static assets

Fonts

Vault uses two Google Fonts loaded via next/font:

Font	CSS Variable	Usage
Figtree	`--font-figtree`	Primary sans-serif (body text, UI)
Onest	`--font-onest`	Headings & financial figures

Dark Mode

Vault includes full dark mode support powered by next-themes:


// app/layout.tsx
import { ThemeProvider } from "@/components/layout";
 
<ThemeProvider
  attribute="class"
  defaultTheme="system"
  enableSystem
  disableTransitionOnChange
>
  {children}
</ThemeProvider>

The theme toggle is built into the dashboard header. All components use CSS variables for theming.

Components

UI Components (25+)

Base primitives used throughout the application:


import {
  Button,
  Input,
  Select,
  Textarea,
  Modal,
  Drawer,
  Dropdown,
  Badge,
  Avatar,
  Checkbox,
  Toggle,
  RadioGroup,
  TagInput,
  Card,
  Table,
  Tabs,
  Skeleton,
  ProgressBar,
  ToastProvider,
  useToast,
  IconButton,
  ActionMenu,
  FormSection,
  DeleteConfirmModal,
  GoBackButton,
  EmptyState,
} from "@/components/ui";

Dashboard Components

Financial widgets and data display:


import {
  StatCard,
  BalanceChart,
  SpendingChart,
  IncomeExpenseChart,
  AccountCard,
  BeneficiaryCard,
  BillCard,
  TransactionTable,
  RecentTransactions,
  Pagination,
  PageHeader,
} from "@/components/dashboard";

Feature Components


import {
  BankCard,
  CardControls,
  NotificationsDropdown,
  ProfileMenu,
  CommandPalette,
} from "@/components/features";

Layout Components


import { Sidebar, MobileSidebar } from "@/components/layout";
import { Header } from "@/components/layout";
import { SearchBar } from "@/components/layout";

Icons

Vault uses Phosphor Icons v2 imported directly:


import {
  MagnifyingGlass,
  Plus,
  ArrowRight,
  CurrencyDollar,
  CreditCard,
  Bank,
  ChartLine,
  GearSix,
  Bell,
  // ... and more
} from "@phosphor-icons/react";

Browse available icons at phosphoricons.com .

Data Layer

Vault uses TypeScript mock data files in lib/data/ that simulate a real banking backend. Replace these with your actual API calls when connecting to a backend.

Accounts (`lib/data/accounts.ts`)


import { accounts } from "@/lib/data/accounts";
// 8 accounts: checking, savings, investment, credit
// Each includes 6-month balance history

Transactions (`lib/data/transactions.ts`)


import { transactions, getTransactionStats } from "@/lib/data/transactions";
// 32 transactions with categories, status, and computed stats

Cards (`lib/data/cards.ts`)


import { cards } from "@/lib/data/cards";
// 4 bank cards: Visa/Mastercard, debit/credit, themed

Beneficiaries (`lib/data/beneficiaries.ts`)


import { beneficiaries, getBeneficiaryStats } from "@/lib/data/beneficiaries";
// 10 saved recipients (personal & business)

Transfers (`lib/data/transfers.ts`)


import { transfers } from "@/lib/data/transfers";
// 21 transfers: internal, external, wire

Bills (`lib/data/bills.ts`)


import { bills, scheduledPayments, getBillStats } from "@/lib/data/bills";
// 10 recurring bills with auto-pay settings

Analytics (`lib/data/analytics.ts`)


import {
  getPeriodStats,
  getSpendingByCategory,
  getTopMerchants,
} from "@/lib/data/analytics";
// 12-month financial history, spending breakdown, top merchants

Styling

Theme Variables (`app/globals.css`)


:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --border: #e5e5e5;
  --muted: #737373;
  --surface: #fafafa;
}
 
.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #111111;
  --border: #262626;
  --muted: #a3a3a3;
  --surface: #171717;
}

Tailwind v4 Theme


@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-border: var(--border);
  --color-muted: var(--muted);
  --color-surface: var(--surface);
}

Vault uses a clean neutral palette with indigo accents for interactive elements, green for income, and red for expenses.

Key Features

Banking Dashboard

4 Stat Cards with trend indicators: Total Balance, Monthly Income, Monthly Expenses, Savings Rate
Balance Trend Chart — 8-month line chart with period filters (1M, 3M, 6M, 12M)
Spending by Category — donut chart with 10+ categories
Loading States — skeleton loaders on first load

Account Management

8 pre-built accounts across 4 types:

Checking — Primary & Business accounts
Savings — High Yield & Emergency Fund
Investment — Portfolio tracking
Credit — Credit card balance tracking

Each account includes balance history, interest rates, and transaction filtering.

Bank Cards

4 themed cards (dark, blue, green, purple) with:

Freeze/unfreeze controls
Spending limits (monthly & daily)
Toggle online payments, contactless, international
Masked card number reveal

Financial Analytics

12-month balance history chart
Spending by category breakdown
Income vs. expense comparison
Top merchants ranking

Auth Flow

Complete authentication screens including:

Login with social providers (Google, Apple)
Registration with password validation
Email verification
Password recovery flow
Financial profile onboarding

Customization Checklist

☐ app/layout.tsx — Update metadata (title, description)
☐ app/globals.css — Brand colors and theme variables
☐ lib/data/*.ts — Replace mock data with real API calls
☐ components/layout/Sidebar.tsx — Navigation items and branding
☐ components/layout/VaultLogo.tsx — Replace with your logo
☐ components/layout/Header.tsx — Header branding
☐ app/(auth)/*.tsx — Auth pages branding and copy
☐ public/images/ — Replace placeholder images

Deployment

Vault works with any Next.js hosting:

Vercel — Recommended
Netlify — Great alternative
Self-hosted — Full control


npm run build
npm start

Support

General Next.js help: Troubleshooting →
Customization: Customization Guide →
Vault-specific questions: support@capricorn.engineering

Quick Links: