Getting Started with CRM Dashboard Kit

Last updated on 2026-03-22

The CRM Dashboard Kit is a production-ready Next.js template for building a modern customer relationship management dashboard. It includes 35+ screens covering sales pipelines, contact management, deal tracking, reporting, email, and more -- all built with Tailwind CSS v4 and shadcn/ui.

What's Included

  • 50+ UI components -- primitives, CRM composites, pipeline components, chart components, and layout components
  • 35+ pages -- dashboard, contacts, companies, deals, tasks, reports, email, settings, auth, and utility pages
  • 2 route groups -- (dashboard) for the main CRM app, (auth) for login and registration
  • Light & dark mode -- oklch design tokens with indigo/violet theme (hue 270)

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> crm-dashboard-kit
cd crm-dashboard-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the sales dashboard.

Kit Overview

Area Screens Key Features
Dashboard 3 Sales dashboard, activity feed, notifications
Contacts 4 List, detail, create/edit, CSV import wizard
Companies 3 List, detail, create/edit
Deals 5 Kanban pipeline, detail, create/edit, pipeline settings, forecasting
Tasks 4 Task list, calendar, activity log, email templates
Reports 4 Sales overview, pipeline analytics, team performance, revenue breakdown
Email 3 Inbox, compose, sequences
Settings 4 General, team, integrations, billing
Auth 3 Login, register, forgot password
Utility 2 404, onboarding wizard

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 Dashboard and reporting charts
@hello-pangea/dnd Drag-and-drop for Kanban pipeline
date-fns Date formatting and utilities
Zod Schema validation for forms
Lucide React Icon library
next-themes Dark mode support
sonner Toast notifications

Next Steps