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 |
| 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
- 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