DemoBuy

Getting Started with Help Desk Kit

Last updated on 2026-05-31

The Help Desk Kit is a production-ready Next.js template for building comprehensive customer support platforms. It includes 45 screens covering ticket management, live chat, knowledge base, customer management, team collaboration, automation rules, reporting, and settings -- all built with Tailwind CSS v4 and shadcn/ui.

What's Included

  • 90+ UI components -- primitives, domain-specific composites, shared composites, and layout components
  • 45 pages -- dashboard, tickets, customers, knowledge base, chat, reports, team, automation, settings, and auth
  • 2 route groups -- (app) and (auth) with dedicated layouts
  • Light & dark mode -- oklch design tokens with automatic theme switching
  • 10+ chart types -- area, bar, line, pie, radial gauge, heatmap, donut via Recharts
  • Kanban board -- drag-and-drop ticket management board with WIP limits
  • Real-time chat UI -- three-panel chat console with conversation management
  • Knowledge base -- article browser, editor, category manager, and analytics

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> help-desk-kit
cd help-desk-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the help desk platform.

Kit Overview

Area Screens Key Features
Dashboard 5 Agent dashboard, team overview, activity feed, command palette, notifications
Tickets 9 Ticket list, detail, create, kanban board, merge, templates, canned responses, SLA dashboard, analytics
Customers 5 Customer directory, profile, segments, companies, interactions
Knowledge Base 5 Article browser, detail, editor, categories, analytics
Chat 4 Chat console, queue, history, chatbot builder
Reports 4 Performance dashboard, agent performance, satisfaction, custom builder
Team 4 Team directory, roles & permissions, schedule, workload
Automation 3 Automation rules, SLA policies, escalation paths
Settings 5 General, channels, notifications, integrations, audit log
Auth 1 Login

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 charts (10+ types)
Lucide React Icon library
next-themes Dark mode support
Sonner Toast notifications
date-fns Date formatting
react-resizable-panels Resizable panel layouts
cmdk Command palette

Next Steps

Next

Installation