A premium, open-source fintech dashboard built with Next.js, shadcn/ui, and Tailwind CSS.
- 11 fully built pages — Dashboard, Accounts, Transactions, Transfers, Cards, Crypto, Analytics, Investments, Budgets, Settings, Notifications
- Crypto dashboard — Candlestick chart, live portfolio, trade form, market overview with 8 coins
- Drag-and-drop dashboard — Rearrange widgets with dnd-kit, persisted to localStorage
- Interactive credit cards — 3D flip animation, freeze toggle, virtual card generator
- Live investment ticker — Simulated real-time price updates with flash animations
- Spending heatmap — GitHub-style 365-day calendar visualization
- Actionable notifications — Accept/decline money requests and device authorization inline
- Smart analytics — Category drill-down donuts, recurring charge detector, AI insights
- Budget tracking — Animated SVG progress rings, savings goals, month projection
- Quick transfers — Contact selector with send simulation
- Auth pages — Sign in / sign up with animated 3D globe, powered by Clerk
- Dark mode — Full dark/light/system theme support
- Responsive — Works on desktop, tablet, and mobile
| Page | Description |
|---|---|
/dashboard |
Financial overview, wallet cards, quick transfer, spending limit, money movement |
/accounts |
Linked bank accounts with balances, add account flow |
/transactions |
Searchable table with filters, expandable rows, bulk CSV export |
/transfers |
Send/receive/scheduled transfers with stats and quick send |
/cards |
3D flip card, freeze/unfreeze, spending controls, virtual card creator |
/analytics |
Spending heatmap, category breakdown, recurring charges, AI insights |
/crypto |
Candlestick chart, portfolio balance, top coins, trade form, market overview |
/investments |
Portfolio allocation, holdings with sparklines, live ticker, watchlist |
/budgets |
Budget rings, savings goals, spending calendar, month projection |
/settings |
Profile, security, notifications, billing, appearance |
/notifications |
Filterable notification feed with dismiss animations |
/sign-in |
Auth page with animated 3D globe, social login, powered by Clerk |
/sign-up |
Registration with name, email, password, terms acceptance |
| Technology | |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | shadcn/ui |
| Styling | Tailwind CSS v4 |
| Charts | Recharts |
| Animations | Motion |
| Drag & Drop | @dnd-kit |
| Auth | Clerk |
| 3D Globe | three-globe + Aceternity UI |
| Icons | Lucide React |
| Language | TypeScript |
git clone https://github.com/Weebapp003/shadcn-fintech-template.git
cd shadcn-fintech
pnpm install
pnpm devOpen http://localhost:3000 to see the dashboard.
Redis backs the /api/market/ticker cache when REDIS_URL is set:
docker compose up -dCopy .env.example to .env.local and set REDIS_URL=redis://localhost:6379. Without Redis, the ticker API still works but skips caching.
Check connectivity with GET /api/health — it reports Redis configuration and ping latency when available.
Theme — Edit src/app/globals.css to customize colors. Full dark mode support via CSS variables.
Mock Data — All demo data lives in src/data/seed.ts. Replace with your own data or connect to a real API.
Dashboard Layout — Click "Customize" on the dashboard to drag and rearrange widgets. Persists to localStorage.
This project is free and open-source. If it helped you build something, saved you time, or you just think it's cool — consider supporting its development. Your sponsorship helps keep this project maintained, improved, and free for everyone.
Every star, share, and contribution also goes a long way. Thank you for your support!
Licensed under the MIT License.