GitHub
abderrahimghazali's avatar

Shadcn Fintech

by abderrahimghazali

Premium fintech dashboard with 10 pages, drag-and-drop layout, 3D credit cards, live investment ticker, spending heatmap, and dark mode. Built with Next.js 16, shadcn/ui, and Tailwind CSS v4.

0
Apr 13, 2026
open-source
admin
WebsiteGitHub
Shadcn Fintech screenshot

Overview

Shadcn Fintech is a premium, open-source fintech dashboard template built with Next.js 16, shadcn/ui, and Tailwind CSS v4. It features 10 fully interactive pages designed for financial applications with real-world components, rich animations, and polished dark mode support. The dashboard includes drag-and-drop widget customization, 3D credit card management, live investment price tracking, spending analytics with heatmaps, and actionable notification workflows.

Features

  • 10 fully built pages — Dashboard, Accounts, Transactions, Transfers, Cards, Analytics, Investments, Budgets, Settings, Notifications
  • 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
  • Smart analytics — Category drill-down donuts, recurring charge detector, AI insights
  • Budget tracking — Animated SVG progress rings, savings goals, month projection
  • Dark mode — Full dark/light/system theme support
  • 37 company logos — Served locally, no external API calls

Installation

  1. Clone the repository: git clone https://github.com/abderrahimghazali/shadcn-fintech.git
  2. Install dependencies: pnpm install
  3. Start the dev server: pnpm dev
  4. Open http://localhost:3000

Summary

Shadcn Fintech fills a gap in the shadcn ecosystem — there are no high-quality fintech dashboard templates. It provides production-ready UI patterns for banking, payments, investments, and budgeting applications. Built with Next.js 16 App Router, TypeScript, Recharts, Motion, and @dnd-kit. MIT licensed and enabled as a GitHub template repository for one-click cloning.