Getting Started with Trading Dashboard Kit
Last updated on 2026-05-31
The Trading Dashboard Kit is a production-ready Next.js template for building a professional trading and investment dashboard. It includes 39 screens covering portfolio tracking, order management, market analysis, stock research, social trading, risk analytics, and more -- all built with Tailwind CSS v4 and shadcn/ui.
What's Included
- 70+ UI components -- primitives, trading composites, chart components, analytics components, and layout components
- 39 pages -- dashboard, watchlist, portfolio, trading, markets, research, social, analytics, settings, auth, and utility pages
- 3 route groups --
(app)for the main trading dashboard,(auth)for login and registration,(utility)for onboarding and maintenance - Light & dark mode -- oklch design tokens with teal/green theme (hue 160)
Prerequisites
- Node.js 18.17 or later
- pnpm (recommended) or npm
- A code editor -- VS Code recommended
Quick Start
# 1. Clone the repository (use the URL from your purchase email)
git clone <your-repo-url> trading-dashboard-kit
cd trading-dashboard-kit
# 2. Install dependencies
pnpm install
# 3. Start the dev server
pnpm dev
Open http://localhost:3000 to browse the trading dashboard.
Kit Overview
| Area | Screens | Key Features |
|---|---|---|
| Dashboard | 1 | Portfolio overview, market indices, watchlist widget, activity feed |
| Watchlist | 1 | Multi-watchlist tabs, add symbol dialog, real-time quotes table |
| Portfolio | 6 | Holdings, allocation charts, performance vs benchmark, transactions, dividends, tax lots |
| Trading | 5 | Order entry, order book, market depth chart, options chain, positions, trade history |
| Markets | 4 | Stock screener, market scanner signals, sector heatmap, economic calendar |
| Research | 4 | Stock detail, fundamentals, analyst ratings, technical indicators |
| Social | 4 | Social feed, leaderboard, copy trading, strategy marketplace |
| Analytics | 3 | P&L analysis, risk metrics, backtesting |
| Settings | 5 | Profile, security, API keys, notifications, billing |
| Auth | 3 | Login, register, forgot password |
| Utility | 4 | 404 page, onboarding wizard, maintenance page, mobile prompt |
Tech Stack
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 19 | UI library |
| Tailwind CSS v4 | Utility-first styling with oklch tokens |
| shadcn/ui | Component primitives |
| Recharts | Portfolio, analytics, and market charts |
| react-resizable-panels | Resizable layout panels |
| date-fns | Date formatting and utilities |
| Lucide React | Icon library |
| next-themes | Dark mode support |
| sonner | Toast notifications |
Next Steps
- Installation -- detailed setup and configuration
- Project Structure -- understand the directory layout
- Design Tokens -- oklch color system and theming
- Accessibility -- WCAG AA compliance and keyboard support