Pulse CRM Dashboard

Production-ready CRM dashboard template built with Next.js 16, React 19, and Tailwind CSS v4. Includes sales pipeline, lead management, customer CRUD, and a full auth flow.

Overview

Pulse is designed for SaaS founders, developers, and agencies who need a modern CRM dashboard with complete sales pipeline management, lead tracking, customer management, and team collaboration features — all with light and dark mode support.

Live Preview: View Demo

Tech Stack

Technology	Version	Purpose
Next.js	16.1.6	React framework (App Router)
React	19.2.3	UI library
TypeScript	5.x	Type safety
Tailwind CSS	4.x	Styling
Framer Motion	12.x	Animations & transitions
Recharts	3.x	Charts & data visualization
Phosphor Icons	2.x	Icon library
next-themes	0.4.x	Light/dark mode
clsx + tailwind-merge	—	Class name utilities

Quick Start


cd pulse-crm
npm install
npm run dev
# Open http://localhost:3000

Pages Included (20+)

Auth Pages

Page	Route	Description
Login	`/login`	Email/password with social login (Google, GitHub, Facebook)
Sign Up	`/signup`	Registration with terms acceptance
Forgot Password	`/forgot-password`	Password reset request
Reset Password	`/reset-password`	New password form
Verify Email	`/verify-email`	Email verification screen
Onboarding	`/onboarding`	4-step guided setup wizard

Dashboard Pages

Page	Route	Description
Overview	`/dashboard/overview`	Revenue chart, stats, active deals, latest leads, activity feed
Leads	`/dashboard/leads`	Lead list with filtering, search, and status management
Lead Detail	`/dashboard/leads/[id]`	Individual lead view with drawer
Sales	`/dashboard/sales`	Sales pipeline with deal stages and filtering
Sale Detail	`/dashboard/sales/[id]`	Individual deal view with drawer
Customers	`/dashboard/customers`	Customer table with search, filter, sort, and pagination
Customer Detail	`/dashboard/customers/[id]`	Full customer profile
Edit Customer	`/dashboard/customers/[id]/edit`	Customer edit form
Add Customer	`/dashboard/customers/add`	New customer form
Calendar	`/dashboard/calendar`	Interactive calendar view
Activity	`/dashboard/activity`	Activity log with filtering
Settings	`/dashboard/settings`	App settings page

Project Structure


pulse-crm/
├── app/
│   ├── layout.tsx                     # Root layout (fonts, ThemeProvider)
│   ├── page.tsx                       # Redirects to /login
│   ├── (auth)/                        # Auth route group
│   │   ├── layout.tsx                 # Auth layout wrapper
│   │   ├── login/page.tsx             # Login page
│   │   ├── signup/page.tsx            # Registration page
│   │   ├── forgot-password/page.tsx   # Forgot password
│   │   ├── reset-password/page.tsx    # Reset password
│   │   ├── verify-email/page.tsx      # Email verification
│   │   └── onboarding/page.tsx        # 4-step onboarding wizard
│   └── dashboard/
│       ├── layout.tsx                 # Dashboard layout (sidebar + header)
│       ├── overview/page.tsx          # Main dashboard
│       ├── leads/
│       │   ├── page.tsx               # Leads list
│       │   └── [id]/page.tsx          # Lead detail
│       ├── sales/
│       │   ├── page.tsx               # Sales pipeline
│       │   └── [id]/page.tsx          # Deal detail
│       ├── customers/
│       │   ├── page.tsx               # Customers table
│       │   ├── [id]/page.tsx          # Customer profile
│       │   ├── [id]/edit/page.tsx     # Edit customer
│       │   └── add/page.tsx           # Add customer
│       ├── calendar/page.tsx          # Calendar view
│       ├── activity/page.tsx          # Activity log
│       └── settings/page.tsx          # Settings
├── components/
│   ├── ui/                            # Base UI primitives
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Select.tsx
│   │   ├── Textarea.tsx
│   │   ├── Modal.tsx
│   │   ├── Drawer.tsx
│   │   ├── Dropdown.tsx
│   │   ├── Badge.tsx
│   │   ├── Avatar.tsx
│   │   ├── Checkbox.tsx
│   │   ├── Toggle.tsx
│   │   ├── RadioGroup.tsx
│   │   ├── TagInput.tsx
│   │   ├── Progress.tsx
│   │   ├── Toast.tsx
│   │   ├── IconButton.tsx
│   │   ├── ActionMenu.tsx
│   │   ├── FormSection.tsx
│   │   ├── DeleteConfirmModal.tsx
│   │   └── Icons.tsx                  # Phosphor icon re-exports
│   ├── dashboard/                     # Dashboard-specific components
│   │   ├── StatCard.tsx               # Metric cards
│   │   ├── RevenueChart.tsx           # Revenue line/bar chart
│   │   ├── ActiveDeals.tsx            # Deals summary widget
│   │   ├── LatestLeads.tsx            # Recent leads widget
│   │   ├── ActivityFeed.tsx           # Activity timeline
│   │   ├── PageHeader.tsx             # Page title + breadcrumbs
│   │   ├── PageHeaderActions.tsx      # Header action buttons
│   │   ├── FilterBar.tsx              # Table filter controls
│   │   ├── CustomersTable.tsx         # Customers data table
│   │   ├── CustomerDrawer.tsx         # Customer detail drawer
│   │   ├── LeadDrawer.tsx             # Lead detail drawer
│   │   ├── Pagination.tsx             # Table pagination
│   │   ├── ActivityRow.tsx            # Activity list item
│   │   ├── TableHeader.tsx            # Sortable table header
│   │   ├── TableFooter.tsx            # Table footer with stats
│   │   └── EmptyState.tsx             # Empty state placeholder
│   ├── features/                      # Feature-specific components
│   │   ├── ThemeProvider.tsx           # Dark/light mode provider
│   │   ├── CommandPalette.tsx          # ⌘K command palette
│   │   ├── NotificationsDropdown.tsx   # Notifications panel
│   │   ├── CalendarDropdown.tsx        # Mini calendar widget
│   │   ├── UpgradeCard.tsx             # Sidebar upgrade CTA
│   │   ├── AddLeadModal.tsx            # Create new lead
│   │   ├── ConvertLeadModal.tsx        # Convert lead to customer
│   │   ├── AddDealModal.tsx            # Create new deal
│   │   ├── DealDrawer.tsx              # Deal detail drawer
│   │   ├── FilterDealsModal.tsx        # Deal filtering modal
│   │   ├── MarkDealWonModal.tsx        # Mark deal as won
│   │   ├── MarkDealLostModal.tsx       # Mark deal as lost
│   │   ├── LogActivityModal.tsx        # Log an activity
│   │   ├── ScheduleMeetingModal.tsx    # Schedule a meeting
│   │   ├── CompleteMeetingModal.tsx    # Complete meeting details
│   │   ├── CreateTaskModal.tsx         # Create a task
│   │   ├── CreateInvoiceModal.tsx      # Create an invoice
│   │   └── ActivityDetailDrawer.tsx    # Activity detail view
│   └── layout/                        # Layout components
│       ├── Sidebar.tsx                # Collapsible sidebar + mobile
│       ├── Header.tsx                 # Top header bar
│       ├── SearchBar.tsx              # Global search (⌘K trigger)
│       ├── HeaderContext.tsx           # Header state context
│       └── SidebarContext.tsx          # Sidebar state context
├── hooks/
│   ├── useClickOutside.ts             # Click outside handler
│   └── usePageHeader.ts              # Page header helper
├── lib/
│   ├── utils.ts                       # cn() utility
│   └── data/                          # Mock data
│       ├── activities.ts              # Activity records
│       ├── calendar.ts                # Calendar events
│       ├── customers.ts               # Customer records
│       ├── leads.ts                   # Lead records
│       └── sales.ts                   # Sales/deal records
└── styles/
    └── globals.css                    # Theme variables & Tailwind

Fonts

Pulse uses three Google Fonts loaded via next/font:

Font	CSS Variable	Usage
Figtree	`--font-figtree`	Primary sans-serif (body text, UI)
Onest	`--font-onest`	Headings & marketing copy
Instrument Serif	`--font-serif`	Brand logo & decorative text

Dark Mode

Pulse includes full dark mode support powered by next-themes:


// app/layout.tsx
import { ThemeProvider } from "@/components/features";
 
<ThemeProvider
  attribute="class"
  defaultTheme="system"
  enableSystem
  disableTransitionOnChange
>
  {children}
</ThemeProvider>

The theme toggle is built into the dashboard header. All components use Tailwind’s dark: variant for styling.

Components

UI Components (20+)

Base primitives used throughout the application:


import {
  Button,
  Input,
  Select,
  Textarea,
  Modal,
  Drawer,
  Dropdown,
  Badge,
  Avatar,
  Checkbox,
  Toggle,
  RadioGroup,
  TagInput,
  Progress,
  Toast,
  IconButton,
  ActionMenu,
  FormSection,
  DeleteConfirmModal,
} from "@/components/ui";

Dashboard Components

Widgets and data display components:


import {
  StatCard,
  RevenueChart,
  ActiveDeals,
  LatestLeads,
  ActivityFeed,
  PageHeader,
  FilterBar,
  CustomersTable,
  CustomerDrawer,
  LeadDrawer,
  Pagination,
  EmptyState,
} from "@/components/dashboard";

Feature Components

Complex feature-specific components:


import {
  CommandPalette,
  NotificationsDropdown,
  AddLeadModal,
  ConvertLeadModal,
  AddDealModal,
  DealDrawer,
  LogActivityModal,
  ScheduleMeetingModal,
  CreateTaskModal,
  CreateInvoiceModal,
} from "@/components/features";

Layout Components


import { Sidebar, MobileSidebar } from "@/components/layout";
import { Header } from "@/components/layout";
import { SearchBar } from "@/components/layout";

Icons

Pulse uses Phosphor Icons v2. Browse available icons at phosphoricons.com .

Icons are re-exported from components/ui/Icons.tsx for convenience:


import {
  MagnifyingGlassIcon,
  PlusIcon,
  ArrowRightIcon,
  CalendarBlankIcon,
  CurrencyDollarIcon,
  UsersThreeIcon,
  GearSixIcon,
  BellIcon,
  // ... and more
} from "@/components/ui";

Data Layer

Pulse uses TypeScript mock data files in lib/data/ that simulate a real backend. Replace these with your actual API calls when connecting to a backend.

Leads (`lib/data/leads.ts`)


import { leads, leadStatusConfig, getLeadScoreStyle } from "@/lib/data/leads";

Sales/Deals (`lib/data/sales.ts`)


import { deals, dealStages, dealStatusConfig } from "@/lib/data/sales";

Customers (`lib/data/customers.ts`)


import { customers } from "@/lib/data/customers";

Activities (`lib/data/activities.ts`)


import { activities } from "@/lib/data/activities";

Calendar (`lib/data/calendar.ts`)


import { calendarEvents } from "@/lib/data/calendar";

Styling

Theme Variables (`styles/globals.css`)


@import "tailwindcss";
 
:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
}
 
.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
}

Tailwind v4 Theme (`styles/globals.css`)


@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-figtree);
  --font-serif: var(--font-serif);
  --font-onest: var(--font-onest);
}

Pulse uses Tailwind’s neutral color palette (neutral-50 through neutral-950) with blue accent colors for interactive elements.

Key Features

Onboarding Wizard

A 4-step guided setup flow:

Profile Setup — Company name, size, role, and goals
Invite Team — Add team members by email with role assignment
Import Data — CSV upload and CRM migration options
Preferences — Currency, fiscal year, notifications, and calendar integration

Command Palette

Press ⌘K (or Ctrl+K) to open the global command palette for quick navigation across the dashboard.

Auth Flow

Complete authentication screens including:

Login with social providers (Google, GitHub, Facebook)
Registration with password strength validation
Email verification
Forgot/reset password flow

Customization Checklist

☐ app/layout.tsx — Update metadata (title, description)
☐ styles/globals.css — Brand colors and theme variables
☐ lib/data/*.ts — Replace mock data with real API calls
☐ components/layout/Sidebar.tsx — Navigation items and branding
☐ components/layout/Header.tsx — Header branding
☐ app/(auth)/*.tsx — Auth pages branding and copy
☐ public/images/ — Replace placeholder images and logos

Deployment

Pulse works with any Next.js hosting:

Vercel — Recommended
Netlify — Great alternative
Self-hosted — Full control


npm run build
npm start

Support

General Next.js help: Troubleshooting →
Customization: Customization Guide →
Pulse-specific questions: support@capricorn.engineering

Quick Links: