Next.js Finance Dashboard Template

Shadcn Fintech is a free, open-source fintech dashboard template that helps you build finance, banking, crypto, budget, card, and investment dashboards with Next.js, shadcn/ui, Tailwind CSS, and TypeScript.

The template currently comes with 10+ finance-focused pages, Clerk auth screens, Recharts charts, Motion animations, dnd-kit drag layouts, Lucide icons, and reusable shadcn/ui components.

GitHub

Live Demo

Features

Includes 11 finance pages for dashboards, accounts, transactions, transfers, cards, crypto, analytics, investments, budgets, settings, and notifications.
Renders crypto portfolio data with candlestick charts, trade controls, and market cards.
Lets users rearrange dashboard widgets through drag and drop.
Stores dashboard widget order in localStorage.
Displays interactive credit cards with flip animation, freeze controls, and virtual card creation.
Shows investment movement through a simulated live ticker.
Visualizes spending activity with a 365 day heatmap.
Handles inline money request actions and device authorization prompts.
Tracks budgets with SVG progress rings, savings goals, and monthly projections.
Includes Clerk powered sign in and sign up pages.
Supports dark, light, and system theme modes.
Uses responsive layouts for desktop, tablet, and mobile screens.

How to Use It

Install the Template

The project uses a normal Next.js workflow. Clone the repository, install dependencies, and run the local development server.

# Clone the project from GitHub
git clone https://github.com/abderrahimghazali/shadcn-fintech.git
# Move into the project folder
cd shadcn-fintech
# Install the package dependencies
pnpm install
# Start the local Next.js development server
pnpm dev

Open http://localhost:3000 in your browser after the server starts.

Basic Usage

This minimal setup starts the dashboard in development mode and lets you review every included page before customization.

# Install all dependencies from package.json
pnpm install
# Run the App Router project locally
pnpm dev
# Open the local dashboard in your browser
# http://localhost:3000

Use the sidebar navigation to inspect /dashboard, /accounts, /transactions, /transfers, /cards, /analytics, /crypto, /investments, /budgets, /settings, and /notifications.

Change the Dashboard Theme

Edit src/app/globals.css when you need to match the dashboard colors to your product brand.

/* src/app/globals.css */
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-heading: var(--font-sans);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.985 0 0);
  --sidebar-primary-foreground: oklch(0.205 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@utility animate-marquee {
  animation: marquee 40s linear infinite;
}

Alternatives and Related Resources

FAQs

Q: Does Shadcn Fintech work as an npm package?
A: No. It works as a complete Next.js starter project. Clone the repository, install dependencies, and customize the files inside the project.

Q: Why does the dashboard fail after copying components into another app?
A: Check the import aliases, globals.css, shadcn/ui component paths, and Tailwind CSS v4 setup.

Q: Can I connect Shadcn Fintech to real banking or finance APIs?
A: Yes. Replace the mock data in src/data/seed.ts with API data. Use server components or route handlers for private credentials and pass normalized data into client widgets.

Q: Do I need a Clerk account to run the dashboard locally?
A: You only need Clerk keys if you want to test the /sign-in and /sign-up routes.

Q: Can I replace Recharts with a different chart library?
A: Yes. The chart components are located in their own component folders (e.g., src/components/crypto/candlestick-chart.tsx). Swap the Recharts implementation with your preferred library and match the props interface the parent page expects.