GitHub Hot Board

GitHub Hot Board · Archiwum repozytorium

abderrahimghazali/shadcn-fintech

A premium open-source fintech dashboard built with Next.js, shadcn/ui, and Tailwind CSS. 9 pages, drag-and-drop layout, interactive cards, live ticker, spending heatmap, and more. (Opis pochodzi z samego repozytorium.)

TypeScript#dashboard#finance#fintech

Dane na October 29abderrahimghazali

Najlepsze miejsce

#117

Niedoceniane perełki

100

Wszystkich gwiazdek

25

Wszystkich forków

1

Dni w rankingach (30 d)

Licencja: MITOstatni push: October 24Otwarte issues (z PR): 1Zbierane od 2026-10-25; nieznane = jeszcze nie zebrane

Dokumentacja projektu

Warning

Security notice: malicious third-party copy

The official repository is abderrahimghazali/shadcn-fintech. A third-party re-upload named Weebapp003/shadcn-fintech-template adds dependencies associated with malware, including oscar-redis and oracle-redis. Do not install or run that copy. These packages are not dependencies of the official project.

See issue #3, the oscar-redis malware advisory, and the oracle-redis malware advisory for details. If you installed or ran the malicious copy, treat the machine as potentially compromised and rotate exposed credentials from a clean device. Removing the package alone may not remove the malware.

Shadcn Fintech

A premium, open-source fintech dashboard built with Next.js, shadcn/ui, and Tailwind CSS.

CI License: MIT Next.js shadcn/ui Tailwind CSS TypeScript

Live Demo · Report Bug · Request Feature

Shadcn Fintech Dashboard

Features

  • 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

Pages

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

Tech Stack

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

Getting Started

git clone https://github.com/abderrahimghazali/shadcn-fintech.git
cd shadcn-fintech
pnpm install
pnpm dev

Open http://localhost:3000 to see the dashboard.

Customization

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.

Sponsor this project

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.

Sponsor on GitHub Buy Me a Coffee

Every star, share, and contribution also goes a long way. Thank you for your support!

License

Licensed under the MIT License.

Author

Created with ❤️ by Abderrahim Ghazali

Need help getting started or have a question? Feel free to reach out — I'm happy to help.

Book a call

Aktualne miejsca

  • 117

    Niedoceniane perełki

    100 gwiazdek · 25 fork · Gwiazdki ogółem (rosnąco)

    Niedoceniane →

Przebieg z 30 dni

Skumulowane gwiazdki

Przebieg miejsc

Wklej odznakę do swojego README · abderrahimghazali/shadcn-fintech[![Wklej odznakę do swojego README](https://git.vaiox.xyz/api/badge/abderrahimghazali/shadcn-fintech.svg)](https://git.vaiox.xyz/pl/repo/abderrahimghazali/shadcn-fintech)

Badge · 任何仓库都可以挂 —— 未上榜的仓库显示灰章,上完榜会自动点亮。

<a href="https://git.vaiox.xyz/pl/repo/abderrahimghazali/shadcn-fintech"><img src="https://git.vaiox.xyz/api/badge/abderrahimghazali/shadcn-fintech.svg" alt="Wklej odznakę do swojego README" height="20"></a>

← Powrót do rankingów

GitHub Hot BoardWehikuł czasuOdkrywaj联系我们 · Contact