CRM & sales pipeline UI kitAvailablev1.0.2 · Updated Sep 22, 2026

Premium Next.js CRM Dashboard & Sales Pipeline UI Kit

Name: Premium Next.js CRM Dashboard & Sales Pipeline UI Kit
Brand: StudioGrid Pro
Price: 39 USD
Availability: InStock

A connected Next.js CRM UI kit where contacts, companies, deals, pipeline stages and sales activity work as one coherent frontend flow.

US$39· one-time payment

View live demo Purchase product

Move a deal to Won in Pipeline and open Overview: won revenue updates.

12 CRM screens
Light and dark modes
Fully responsive layouts

Premium CRM & Sales Pipeline UI Kit product preview

Overview

A CRM frontend where contacts, deals and pipeline actions stay in sync.

Contacts, companies, deals, activities and pipeline stages work as one connected workspace, with shared frontend state and consistent interactions across screens instead of isolated demo views.

CRM screens

Light & dark

Theme modes

Fully responsive

Desktop, tablet and mobile

Frontend-only

Ready for your CRM stack

Screens included

Twelve CRM screens designed to work together as one sales workspace.

The included screens cover the core frontend experience from sales overview and relationship management to pipeline execution, activity tracking, analytics, team performance and workspace settings.

Dashboard

Pipeline value, open deals, win rate, new contacts, revenue performance and recent sales activity.

Contacts

Search, filters, field management, selection, bulk actions and contact navigation.

Contact Detail

Contact editing, status, deals, communication actions, activities and tasks.

Companies

Company search, filters, field management, selection, bulk actions and record navigation.

Company Detail

Company editing, status, website access, related deals, contacts, activities and ownership.

Deals

Deal search, filters, field management, selection, row actions and mock pagination.

Pipeline

Stage-based deal management with search, owner filters, priorities and local workflow actions.

Deal Detail

Stage, probability, win state, activities, notes, tasks, related company and contact information.

Activities

Today and upcoming views, filters, task states, activity creation and calendar preview.

Analytics

Pipeline and time-range selectors with CRM performance metrics and visual reporting.

Team

Team performance, assigned deals, presence states and member management interfaces.

Settings

Workspace settings, pipeline stages, preferences, notifications, appearance and profile controls.

Reusable interface system

Shared patterns across the entire CRM workflow.

Navigation, records, pipeline actions and interface states follow the same patterns across the kit, so the CRM feels like one workspace instead of a collection of separate screens.

Navigation & workspace

Application headerSidebar navigationSearch and theme controls

CRM records

Contact tablesCompany tablesDeal tables

Pipeline & actions

Pipeline stagesDeal actionsBulk actions

States & feedback

ModalsToastsZero states

Built to customize

Adapt the CRM workspace to your product and sales process.

Technical stack

Built with Next.js 16, React 19, TypeScript and Tailwind CSS v4.

Reusable frontend architecture

Shared CRM structures and interaction patterns make the interface easier to understand, extend and maintain.

Replaceable demo content

Replace the fictional contacts, companies, deals, team members and workspace details with your own data.

Ready for your CRM stack

Connect the interfaces to your own authentication, database, APIs, analytics and business logic.

Across screen sizes

CRM flows across screens and themes.

Dashboard layouts, record tables, pipeline views, forms and controls adapt across desktop, tablet and mobile.

Responsive CRM layouts
Adaptive navigation
Mobile-friendly controls
Horizontal pipeline behavior on mobile
Light and dark modes
Consistent hover, focus and disabled states

Package contents

Everything included in the download.

Complete Next.js source code
Twelve CRM screens
Dashboard, contacts, companies and deals interfaces
Sales pipeline and deal-detail workflows
Activities, analytics, team and settings screens
Light and dark modes
Responsive desktop, tablet and mobile layouts
Frontend demo data with local browser persistence
Commercial license
Buyer-facing README
Changelog
Customization guide
Deployment guide
Support policy

Clear product scope

A frontend CRM foundation you connect to your own services.

This product provides CRM interfaces, navigation and demo behavior saved in the browser with localStorage. It does not include production backend infrastructure, a database or third-party CRM integrations.

Not included

Backend services
Database
Real authentication or authorization
Server-side data persistence
Real email delivery
Telephony
Calendar integrations
CRM API
Salesforce or HubSpot synchronization
Backend analytics
Backend notifications

Use the included interfaces as your frontend foundation, then connect your preferred authentication, database, APIs, CRM services and production infrastructure.

Rather not wire it up yourself? We can connect these screens to your API in a fixed-price Frontend Sprint.

Requirements

What you need to work with the kit.

Node.js 20.9.0 or newer
npm
A local JavaScript development environment
Basic familiarity with Next.js, React, TypeScript and Tailwind CSS
Your own backend and data services for production use

License and support

Built for real commercial projects.

One End Product per purchase

Use the kit to create one commercial End Product.

Client work permitted

The licensed End Product may be created for your own business or for one client.

Source code included

Customize the interfaces, content, branding and frontend behavior directly within the provided project.

Documented support scope

Product support terms are explained in the included support policy.

Frequently asked questions

Everything to know about the kit.

Does this include a complete CRM backend?

No. This is a frontend-only UI kit. You must connect it to your own backend, database, authentication and business logic.

How many screens are included?

The kit includes 12 CRM screens covering dashboard, contacts, companies, deals, pipeline, activities, analytics, team management and settings.

Does the pipeline include interactive demo behavior?

Yes. The frontend demo includes local interactions for search, filters, priorities, deal actions and stage progression. Changes are saved in the browser with localStorage and survive a reload. Nothing is sent to a backend.

Are light and dark modes included?

Yes. The complete CRM experience supports both light and dark themes.

Is the kit responsive?

Yes. The included screens and layouts are designed for desktop, tablet and mobile.

Does it integrate with Salesforce or HubSpot?

No. Salesforce, HubSpot and other third-party CRM integrations are not included. You can connect the frontend to the services of your choice.

Can I use it for a client project?

Yes. The included commercial license permits one End Product for your own business or for one client.

What will I receive after purchasing?

The package includes the complete source-code ZIP, commercial license, README, changelog and guides for customization, deployment and support.

Explore the product

See the CRM as one connected sales workspace.

Open the live demo to follow contacts, deals, pipeline stages and sales activity across the connected workspace, then get the full kit when you're ready.

View live demo Purchase product