Mercury Fintech Dashboard

Mercury Fintech Dashboard

A premium fintech dashboard overview with a liquid mercury aesthetic.

Features

• Balance header — Real-time balance display with notification and settings buttons
• Metric cards — 4 KPI cards (Revenue, Expenses, Net Profit, Growth) with change badges
• Transactions table — 5 recent transactions with ID, date, merchant, amount, and status
• Portfolio allocation — Donut chart visualization with 5 asset classes and progress bars
• Metallic aesthetic — Silver-gray palette with subtle gradient overlays on cards
• Instrument Sans — Premium heading font for the mercury theme
• Dark mode — Full dark variant with deep navy-black background
• Responsive — Stacks to single column on mobile

Dependencies

• @/components/vue-ui/card — Card, CardHeader, CardTitle, CardDescription, CardContent
• @/components/vue-ui/badge — Badge
• @/components/vue-ui/button — Button
• @/components/vue-ui/separator — Separator
• @/components/vue-ui/table — Table, TableHeader, TableBody, TableRow, TableHead, TableCell
• lucide-vue-next — Wallet, TrendingUp, TrendingDown, ArrowUpRight, ArrowDownRight, Receipt, PieChart, MoreHorizontal, Bell, Settings

Customization

• Metrics: Replace the metrics array with live data from your API
• Transactions: Replace the transactions array with real transaction data
• Portfolio: Modify portfolio segments and colors to match actual asset distribution