A modern dashboard starter template built with Next.js 15, TypeScript, and Tailwind CSS 4. Perfect for users new to Next.js who want to quickly build rich, interactive dashboards.
- Next.js 15 with App Router
- TypeScript with strict configuration
- Tailwind CSS 4 with dark mode support
- Turbopack for fast development
- Geist fonts optimized with
next/font - ESLint with Next.js configuration
- Dashboard-ready structure and components
- Fork this repository
- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 to see your dashboard
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
├── app/ # Next.js App Router pages
│ ├── layout.tsx # Root layout with fonts and metadata
│ ├── page.tsx # Homepage - start building here
│ └── globals.css # Global styles
├── components/ # Reusable UI components (create as needed)
├── lib/ # Utility functions
├── public/ # Static assets
└── hooks/ # Custom React hooks
- Start with the homepage: Modify
app/page.tsxto create your main dashboard view - Add new pages: Create folders in
/app(e.g.,/app/analytics/page.tsx) - Create components: Add reusable components to
/components - Style with Tailwind: Use utility classes and dark mode variants
This template is optimized for pair programming with Claude Code:
- Small, focused components for easy iteration
- TypeScript interfaces for clear data structures
- Tailwind utilities for rapid styling
- Hot reload for immediate feedback
- Next.js Documentation - Learn about Next.js features and API
- Tailwind CSS - Utility-first CSS framework
- TypeScript - Typed JavaScript
Click the button to clone this repository and deploy it on Squadbase.