shadcn Dashboard

A modern, full-featured dashboard application built with Next.js 14, shadcn/ui, and Chart.js.

Features

Modern Stack: Next.js 14 App Router, TypeScript, Tailwind CSS v4
UI Components: shadcn/ui component library with custom theming
Dark Mode: Full dark/light theme support with system detection
Data Visualization: Interactive charts using Chart.js
Responsive Design: Mobile-first responsive layout
Sidebar Navigation: Collapsible sidebar with nested navigation
Dashboard Components:
- 4 metric cards with trend indicators
- Revenue overview line chart
- Sales activity bar chart
- Recent payments table with status badges
- Team members table with avatars

Getting Started

Development

# Install dependencies
pnpm install

# Run development server
pnpm run dev

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

Build

# Create production build
pnpm run build

# Start production server
pnpm start

Project Structure

shadcn-dashboard/
├── app/
│   ├── layout.tsx              # Root layout with providers
│   ├── page.tsx                # Main dashboard page
│   └── globals.css             # Global styles
├── components/
│   ├── ui/                     # shadcn/ui components
│   ├── layout/
│   │   ├── app-sidebar.tsx     # Navigation sidebar
│   │   ├── header.tsx          # Top header
│   │   ├── theme-toggle.tsx    # Theme switcher
│   │   └── user-nav.tsx        # User profile dropdown
│   ├── dashboard/
│   │   ├── metric-card.tsx     # Metric display cards
│   │   ├── revenue-chart.tsx   # Revenue line chart
│   │   ├── sales-chart.tsx     # Sales bar chart
│   │   ├── payments-table.tsx  # Payments data table
│   │   ├── team-table.tsx      # Team members table
│   │   └── dashboard-tabs.tsx  # Tab navigation
│   ├── charts/
│   │   ├── line-chart.tsx      # Line chart wrapper
│   │   └── bar-chart.tsx       # Bar chart wrapper
│   └── theme-provider.tsx      # Theme context provider
├── lib/
│   ├── utils.ts                # Utility functions
│   ├── mock-data.ts            # Mock dashboard data
│   └── chart-config.ts         # Chart.js configuration
└── types/
    └── dashboard.ts            # TypeScript interfaces

Tech Stack

Framework: Next.js 14 (App Router)
Language: TypeScript
Styling: Tailwind CSS v4
UI Components: shadcn/ui
Charts: Chart.js + react-chartjs-2
Theme: next-themes
Icons: Lucide React
Package Manager: pnpm

Features Implemented

Phase 1: Project Foundation ✅

Next.js 14 project initialization
shadcn/ui setup
All required dependencies installed

Phase 2: Theme & Layout ✅

Theme provider with dark/light mode
Collapsible sidebar navigation
Header with search and theme toggle
User profile dropdown

Phase 3: Data Layer ✅

TypeScript interfaces for all data types
Mock data generation
Type-safe data handling

Phase 4: Charts ✅

Chart.js configuration with theme support
Line chart component
Bar chart component
Theme-aware color schemes

Phase 5: Dashboard Components ✅

Metric cards with trend indicators
Revenue overview chart
Sales activity chart
Payments table with actions
Team members table

Phase 6: Assembly & Polish ✅

Complete dashboard page layout
Responsive grid system
Custom scrollbar styling
Inter font integration

Phase 7: Testing ✅

Development server verified
Production build successful
No TypeScript errors
All components rendering correctly

Development Notes

See CLAUDE.md for development-specific notes.

See PLAN.md for the detailed implementation plan.

License

MIT

4.2 KiB Raw Blame History