The Trading Dashboard Kit uses Next.js App Router with route groups to separate the main trading dashboard, authentication flow, and utility pages.
Directory Overview
trading-dashboard-kit/
├── app/
│ ├── (app)/ # Main trading pages
│ │ ├── layout.tsx # Sidebar + AppHeader
│ │ ├── page.tsx # Dashboard
│ │ ├── watchlist/page.tsx # Watchlist with tabs
│ │ ├── portfolio/
│ │ │ ├── page.tsx # Holdings overview
│ │ │ ├── allocation/page.tsx # Asset allocation
│ │ │ ├── performance/page.tsx # Performance vs benchmark
│ │ │ ├── transactions/page.tsx # Transaction history
│ │ │ ├── dividends/page.tsx # Dividend tracker
│ │ │ └── tax/page.tsx # Tax lot report
│ │ ├── trading/
│ │ │ ├── order-entry/page.tsx # Order form + mini book
│ │ │ ├── market-depth/page.tsx # Full order book + depth chart
│ │ │ ├── options/page.tsx # Options chain table
│ │ │ ├── positions/page.tsx # Open positions
│ │ │ └── history/page.tsx # Trade history
│ │ ├── markets/
│ │ │ ├── screener/page.tsx # Stock screener
│ │ │ ├── scanner/page.tsx # Market scanner signals
│ │ │ ├── heatmap/page.tsx # Sector heatmap
│ │ │ └── calendar/page.tsx # Economic & earnings calendar
│ │ ├── research/
│ │ │ ├── detail/page.tsx # Stock detail (overview, chart, financials, news)
│ │ │ ├── fundamentals/page.tsx # Fundamental analysis
│ │ │ ├── ratings/page.tsx # Analyst ratings & price targets
│ │ │ └── technical/page.tsx # Technical indicators
│ │ ├── social/
│ │ │ ├── feed/page.tsx # Social trading feed
│ │ │ ├── leaderboard/page.tsx # Trader leaderboard
│ │ │ ├── copy-trading/page.tsx # Copy trading management
│ │ │ └── marketplace/page.tsx # Strategy marketplace
│ │ ├── analytics/
│ │ │ ├── pnl/page.tsx # P&L analysis
│ │ │ ├── risk/page.tsx # Risk metrics dashboard
│ │ │ └── backtesting/page.tsx # Backtesting engine
│ │ └── settings/
│ │ ├── page.tsx # Profile & trading preferences
│ │ ├── security/page.tsx # Security & 2FA
│ │ ├── api-keys/page.tsx # API key management
│ │ ├── notifications/page.tsx # Notification preferences
│ │ └── billing/page.tsx # Plans & billing
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── (utility)/ # Utility pages
│ │ ├── onboarding/page.tsx # Onboarding wizard
│ │ ├── maintenance/page.tsx # Maintenance page
│ │ └── mobile/page.tsx # Mobile app prompt
│ ├── not-found.tsx # 404 page
│ ├── globals.css # Design tokens
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/ # shadcn/ui primitives (~30 components)
│ ├── dashboard/ # Dashboard composites (4 components)
│ ├── trading/ # Trading components (8 components)
│ ├── portfolio/ # Portfolio components (3 components)
│ ├── markets/ # Market components (8 components)
│ ├── research/ # Research components (11 components)
│ ├── social/ # Social trading components (6 components)
│ ├── analytics/ # Analytics components (9 components)
│ ├── watchlist/ # Watchlist components (1 component)
│ ├── settings/ # Settings components (8 components)
│ ├── shared/ # Shared composites (2 components)
│ ├── layout/ # Layout components (4 components)
│ └── a11y/ # Accessibility components (2 components)
├── data/
│ ├── seed.ts # Mock data for all pages
│ └── seed-social.ts # Social feed mock data
├── types/
│ └── index.ts # TypeScript interfaces (~100 types)
├── hooks/
│ ├── use-mobile.ts # Mobile viewport detection
│ ├── use-announce.ts # Screen reader announcements
│ ├── use-focus-trap.ts # Focus trap for modals
│ ├── use-keyboard-navigation.ts # Keyboard nav support
│ └── use-reduced-motion.ts # Reduced motion preference
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Static images
Route Groups
| Group |
Layout |
Purpose |
(app) |
Sidebar + AppHeader |
Main trading pages (dashboard, watchlist, portfolio, trading, markets, research, social, analytics, settings) |
(auth) |
Centered card |
Login, register, forgot password |
(utility) |
Standalone |
Onboarding wizard, maintenance page, mobile app prompt |
Note: The (utility) route group uses standalone layouts for each page, outside of the main dashboard and auth layouts.
Component Organization
Primitives (components/ui/)
Approximately 30 shadcn/ui components: AlertDialog, Avatar, Badge, Breadcrumb, Button, Card, Chart, Checkbox, Collapsible, Command, Dialog, DropdownMenu, Input, InputGroup, Label, Popover, Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Skeleton, Sonner, Switch, Table, Tabs, Textarea, and Tooltip.
Dashboard Composites (components/dashboard/)
| Component |
Used In |
portfolio-chart |
Dashboard (portfolio value area chart) |
watchlist-widget |
Dashboard (compact watchlist preview) |
activity-feed |
Dashboard (recent notifications feed) |
market-strip |
Dashboard (market indices ticker strip) |
Trading Components (components/trading/)
| Component |
Used In |
order-form |
Order Entry (buy/sell form with order type selection) |
order-book-mini |
Order Entry (compact order book preview) |
full-order-book |
Market Depth (full bid/ask order book) |
depth-chart |
Market Depth (cumulative depth area chart) |
options-chain-table |
Options (calls/puts chain with Greeks) |
positions-table |
Positions (open positions data table) |
stock-info-bar |
Trading pages (stock quote info bar) |
trade-history-table |
History (executed trades table) |
Portfolio Components (components/portfolio/)
| Component |
Used In |
holdings-table |
Portfolio overview (positions data table) |
allocation-chart |
Portfolio, Allocation (sector/asset donut chart) |
performance-chart |
Portfolio, Performance (portfolio vs benchmark line chart) |
Markets Components (components/markets/)
| Component |
Used In |
screener-filters |
Screener (filter panel with metric selectors) |
screener-table |
Screener (filtered stocks data table) |
signal-card |
Scanner (market signal alert cards) |
heatmap-grid |
Heatmap (sector/stock heatmap grid) |
sector-table |
Heatmap (sector performance table) |
earnings-table |
Calendar (upcoming earnings table) |
economic-table |
Calendar (economic events table) |
ipo-cards |
Calendar (upcoming IPO cards) |
Research Components (components/research/)
| Component |
Used In |
stock-header |
Stock Detail (ticker, price, change hero) |
key-stats |
Stock Detail (key statistics grid) |
price-chart |
Stock Detail (candlestick/line price chart) |
news-list |
Stock Detail (related news articles) |
fundamentals-grid |
Fundamentals (financial metrics grid) |
financials-chart |
Fundamentals (revenue/income bar charts) |
ratings-table |
Ratings (analyst recommendations table) |
consensus-bar |
Ratings (buy/hold/sell consensus bar) |
price-target-gauge |
Ratings (price target range gauge) |
indicator-chart |
Technical (RSI, MACD, Bollinger charts) |
indicator-panel |
Technical (indicator values panel) |
Social Components (components/social/)
| Component |
Used In |
post-card |
Social Feed (individual post with likes, comments, reposts) |
post-composer |
Social Feed (create new post) |
leaderboard-table |
Leaderboard (ranked traders table) |
podium |
Leaderboard (top 3 traders podium) |
copy-card |
Copy Trading (copy trading configuration card) |
strategy-card |
Marketplace (strategy listing card) |
Analytics Components (components/analytics/)
| Component |
Used In |
pnl-chart |
P&L (daily P&L bar chart) |
equity-curve |
Backtesting (equity curve line chart) |
drawdown-chart |
Backtesting, Risk (drawdown area chart) |
monthly-returns |
Backtesting (monthly returns heatmap) |
win-loss-stats |
P&L, Backtesting (win/loss statistics) |
pnl-by-sector |
P&L (P&L breakdown by sector) |
risk-metrics-grid |
Risk (risk metrics cards grid) |
concentration-card |
Risk (portfolio concentration card) |
backtest-trades |
Backtesting (trade log table) |
Settings Components (components/settings/)
| Component |
Used In |
profile-form |
Settings (profile and preferences form) |
trading-preferences |
Settings (chart style, order defaults) |
two-factor-card |
Security (2FA setup card) |
sessions-table |
Security (active sessions table) |
api-keys-table |
API Keys (key management table) |
notification-channel |
Notifications (per-channel toggle grid) |
plan-card |
Billing (subscription plan card) |
invoices-table |
Billing (invoice history table) |
Shared Components (components/shared/)
| Component |
Purpose |
page-header |
Consistent page title, description, and action slot |
stat-card |
KPI card with value, change indicator, and icon |
Layout Components (components/layout/)
| Component |
Purpose |
app-header |
Top bar with search, notifications, theme toggle, user menu |
sidebar |
Collapsible sidebar navigation with trading sections |
skip-link |
Skip-to-content accessibility link |
theme-toggle |
Light/dark mode switch |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (portfolio, positions, stocks, orders, order book, watchlists, market indices, screener stocks, earnings, news, options, analyst ratings, technical indicators, P&L, risk metrics, backtest results, settings, billing) |
data/seed-social.ts |
Social feed posts, leaderboard entries, copy trading configs, and strategies |
types/index.ts |
TypeScript interfaces for all domain objects (~100 types: Stock, StockQuote, Position, Order, OrderBook, Watchlist, OptionContract, SectorPerformance, TraderProfile, SocialPost, RiskMetrics, BacktestResult, etc.) |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors with teal hue 160, spacing, typography, animations) |