Next.js CRM Template with Kanban Pipeline, Contact Management & Sales Analytics Dashboard
A complete Next.js CRM dashboard template with 35+ screens. Kanban deal pipeline with drag-and-drop, contact and company management, deal tracking with forecasting, task management with calendar, email inbox with sequences, 4 analytics dashboards, team performance reports, and full settings suite. Built with Tailwind CSS, shadcn/ui, Recharts, and WCAG AA accessibility.
Starting at $79· 7-day money-back guarantee
Last updated on 2026-03-22
35+ Screens Across 10 Sections
Everything you need to build a complete CRM platform — from the sales dashboard to pipeline management, analytics, and email integration.
Kanban board, deal detail, create/edit, pipeline settings, revenue forecasting
Contact list, detail, create/edit, import wizard. Company list, detail, create/edit
Sales overview, pipeline analytics, team performance, revenue breakdown
All built with TailwindCSS and shadcn/ui. Accessible, token-driven, and developer-friendly.
Built on a Solid Foundation
Every component follows production-grade patterns for accessibility, responsiveness, and maintainability.
Pipeline Management
- Kanban board with drag-and-drop between stages
- Deal cards with value, owner, and close date
- Multiple pipeline support with custom stages
- Revenue forecasting with team breakdown
- Win/loss reason tracking per deal
Relationship Tracking
- Contact and company management with detail pages
- Activity timelines for calls, emails, meetings, and notes
- Lead source tracking and tag management
- CSV import wizard with column mapping
- Related deals and company associations
Sales Analytics
- Revenue trend charts and KPI cards
- Pipeline conversion funnel visualization
- Team performance leaderboard with radar chart
- Revenue breakdown by product, industry, and source
- Stalled deal alerts and velocity metrics
35+ screens, 3 layouts, 50+ components — everything you need to ship a complete CRM platform.
View all screensWhat's Included in This CRM Dashboard Kit
Included
React + Tailwind code for all 35+ screens and components- oklch design tokens with light & dark mode
- Kanban pipeline board with @hello-pangea/dnd drag-and-drop
- 4 Recharts analytics dashboards with 10+ chart types
- Responsive layouts for mobile, tablet, and desktop
- 1 year of updates
Not Included
- Backend, database, or API logic
- CRM data storage or synchronization
- Email sending or calendar integration service
- Authentication or user management backend
Intent: you get a production-grade CRM dashboard UI. You connect your own data source, APIs, and business logic.
Built for SaaS Teams, Agencies, and Sales-Driven Startups
SaaS startups building an internal CRM or customer management tool on Next.js
Agencies delivering CRM dashboards and sales tools for clients on tight timelines
Sales teams that need a custom pipeline tracker without vendor lock-in to HubSpot or Salesforce
Note: This is a frontend UI kit — not a hosted CRM. You bring your own backend, database, and API.
Key Features
| Feature | Description |
|---|---|
| Kanban Pipeline Board | Full drag-and-drop pipeline with @hello-pangea/dnd. Deal cards show company, value, owner, close date. Column totals update live. Multiple pipeline support. |
| Contact & Company Management | Data tables with search, filters, tags. Detail pages with activity timelines, related deals, and notes. CSV import wizard with column mapping. |
| Sales Forecasting | Monthly forecast with committed, best case, and pipeline amounts. Team breakdown table with quota attainment. Recharts bar and line visualizations. |
| 4 Analytics Dashboards | Sales overview with KPIs and revenue trends. Pipeline analytics with conversion funnel. Team performance with radar charts. Revenue breakdown by product, industry, and deal size. |
| Email Integration | Gmail-style inbox with reading pane, compose with contact autocomplete, template library with merge fields, and multi-step email sequences with performance stats. |
| Task Management & Calendar | Task list with priority filters and due date badges. Monthly calendar grid with color-coded events. Activity log with user and type filters. Email template builder. |
All components are WCAG AA-compliant and optimized for mobile and desktop.
Next.js & Tailwind Stack, Built for Production
- Built with TailwindCSS for utility-first styling across all 35+ screens
- Fully compatible with shadcn/ui components and themes
- Radix UI primitives for accessible dropdowns, modals, and selectors
- Design tokens for consistent spacing, colors, and typography
- Recharts integration for 4 analytics dashboards and data visualization
- @hello-pangea/dnd for production-grade Kanban drag-and-drop
Accessibility Highlights
Every CRM interaction is inclusive by design. From managing deals to analyzing reports, built for everyone.
Preview Gallery
35+ screens across sales dashboard, pipeline, contacts, companies, deals, tasks, email, reports, settings, and auth. Every screen is fully responsive and accessible.
Sales dashboard with KPI cards, revenue chart, deals by stage, and top performers
How CRM Dashboard Kit Compares
See how thefrontkit stacks up against typical alternatives on the features that matter most.
| Feature | thefrontkit | Typical Alternatives |
|---|---|---|
| Kanban Pipeline Board | Full drag-and-drop Kanban with stage management | Basic table view or no pipeline UI |
| Contact & Company Management | CRUD + detail pages, import, tags, lead sources | Simple contact list, no company linking |
| Sales Forecasting | Committed vs best case vs pipeline with team breakdown | No forecasting UI included |
| 4 Analytics Dashboards | Sales overview, pipeline, team performance, revenue breakdown | 1 basic dashboard or none |
| Email Integration UI | Inbox, compose, templates, sequences with CRM linking | No email UI — relies on external tools |
| Task Management + Calendar | Task list, calendar view, activity log, email templates | Basic task list or missing |
| WCAG AA Accessibility | Built-in from day one | Usually missing or partial |
| Dark Mode | Token-driven, system-aware | Basic toggle or missing |
Pricing Information
Solo License (1 developer)
Next.js/Tailwind code. 35+ screens. Internal projects only.
Team License (Up to 10 developers)
Next.js/Tailwind code. 35+ screens. Internal projects only.
Agency License (Unlimited developers, client delivery allowed)
Next.js/Tailwind code. 35+ screens. Client delivery allowed.
Pricing Plans
Next.js/Tailwind code. 35+ screens. Internal projects only.
- 1 developer license
- Next.js 16 + Tailwind CSS v4 code
- 35+ screens: Dashboard, Pipeline, Contacts, Reports, Email, Settings
- Kanban board with drag-and-drop
- Internal projects only
Next.js/Tailwind code. 35+ screens. Internal projects only.
- Up to 10 developer licenses
- Next.js 16 + Tailwind CSS v4 code
- 35+ screens: Dashboard, Pipeline, Contacts, Reports, Email, Settings
- Kanban board with drag-and-drop
- Internal projects only
Next.js/Tailwind code. 35+ screens. Client delivery allowed.
- Unlimited developer licenses
- Next.js 16 + Tailwind CSS v4 code
- 35+ screens: Dashboard, Pipeline, Contacts, Reports, Email, Settings
- Kanban board with drag-and-drop
- Client delivery allowed
7-day money-back guarantee. Lifetime updates. Upgrade anytime, we credit 100% of your purchase.
The complete CRM dashboard UI — pipeline, contacts, analytics in one kit
Kanban pipeline, contact & company management, 4 analytics dashboards, email integration, task management, and team reports. Ship an Attio-quality CRM on your own stack.
Related Articles
View all posts →
15 Accessible Website Examples That Get It Right in 2026
Looking for accessible website examples? We analyzed 15 sites that nail WCAG compliance, from e-commerce to SaaS to government portals, and explain what makes each one work.
Best Next.js Blog Templates in 2026: 8 Options for Developers
Need a Next.js blog template? We reviewed 8 options covering MDX support, performance, SEO, and design quality so you can pick the right one for your project.
Best Next.js Landing Page Templates in 2026: 10 Options Compared
Looking for a Next.js landing page template? We compared 10 options on performance, accessibility, customization, and mobile responsiveness to help you pick the right one.
Explore Related Templates
Find the right starting point for your project.
Next.js SaaS Template
Production-ready SaaS starter with auth, dashboards & Tailwind
Next.js Dashboard Template
Sidebar navigation, data tables & analytics panels
Next.js Landing Page Template
Hero sections, pricing tables & FAQ components
React Dashboard Template
Accessible admin panel with Tailwind CSS
Tailwind SaaS Template
Token-driven theming with Figma sync
Frequently Asked Questions
Find answers to your key questions about thefrontkit. Our FAQ section covers licensing, customization, and technical details, ensuring you have everything you need before getting started.