FAQ

General

What is the Help Desk Kit?

A production-ready Next.js template with 45 screens for building customer support platforms. It includes ticket management with SLA tracking, live chat with a three-panel console, knowledge base with article editor, customer management with 360-degree profiles, team workforce management, automation rules engine, multi-channel configuration, reporting dashboards, and a chatbot flow builder -- all built with Tailwind CSS v4 and shadcn/ui. It is a frontend UI kit, not a hosted help desk platform.

What tech stack does it use?

Next.js 16, React 19, Tailwind CSS v4 with oklch tokens, shadcn/ui components, TypeScript, Recharts for analytics charts (10+ chart types including area, bar, line, pie, radial, and heatmap), react-resizable-panels for split layouts, cmdk for the command palette, date-fns for date formatting, next-themes for dark mode, Lucide React for icons, and Sonner for toast notifications.

How many screens are included?

45 screens across 10 sections: Dashboard & Command Center (5), Ticket Management (9), Customer Management (5), Knowledge Base (5), Live Chat & Messaging (4), Reports & Analytics (4), Team & Workforce (4), Automation & Rules (3), Settings & Configuration (5), and Auth (1).

What chart types are included?

The kit includes 10+ chart types via Recharts: area charts (ticket volume, SLA compliance over time), line charts (CSAT trends, agent performance, resolution time trends), bar charts (grouped, stacked, horizontal for category breakdowns and agent comparisons), pie/donut charts (channel distribution, ticket priority distribution), radial gauges (CSAT score, SLA compliance rate), heatmaps (ticket volume by day/hour, agent activity), and custom visualizations (kanban board, chatbot flow builder, escalation flowcharts).

Is a backend included?

No. The kit is frontend-only. All pages use mock data from data/seed.ts representing a support team handling approximately 500+ tickets per month with 12 agents, 200+ customers, and 50+ knowledge base articles. Replace with API calls, a ticketing platform, or database queries when building your product.

What does the mock data represent?

The seed data models a realistic B2B support operation with multiple support channels (email, chat, phone, social, portal), SLA policies with priority-based targets, customer segments with company accounts, knowledge base articles across multiple categories, chatbot flows, automation rules, agent schedules, and audit log entries.

Licensing

What license types are available?

Each purchase includes a license for either Solo (1 developer), Team (up to 5 developers), or Agency (unlimited developers + client delivery). See the product page for pricing details.

Can I use this for client projects?

With the Agency license, yes -- you can use the kit in unlimited client projects. The Solo and Team licenses are for your own products only.

Can I resell this template?

No. The license permits use in end products but does not allow redistribution or resale of the template itself, whether modified or unmodified.

Technical

Can I connect this to Zendesk or Freshdesk?

Yes. Replace the seed data imports in your page components with API calls to Zendesk, Freshdesk, Intercom, or any ticketing platform. The component interfaces accept standard props (ticket ID, subject, status, priority, requester), so you map your ticketing schema to the existing types. See the Customization guide for integration examples with Zendesk, Freshdesk, and Intercom.

Can I add real-time chat functionality?

Yes. The chat console UI is fully built with a three-panel layout, conversation list, message bubbles, and customer context. To make it real-time, integrate a WebSocket service like Pusher, Socket.IO, or Ably. The ChatMessage and ChatConversation interfaces in types/index.ts define the data shape. See the Customization guide for Pusher and Socket.IO examples.

Does the kanban board support real drag-and-drop?

The kanban board displays tickets in status columns with drag affordances. To make drag-and-drop fully functional with persistence, integrate a library like @dnd-kit/core or react-beautiful-dnd and connect to your backend to persist status changes when cards are moved between columns.

Does it work with existing Next.js projects?

Yes. Copy components/, data/, and types/ directories into your project. Install dependencies and import the design tokens from globals.css. See the Installation guide for details.

Can I add internationalization (i18n)?

Not out of the box. The template uses English strings. To add i18n, integrate next-intl or react-i18next and replace hardcoded strings with translation keys.

Can I use npm instead of pnpm?

Yes. All three package managers work. The kit ships with a pnpm-lock.yaml but you can use npm install or yarn install instead.

How do I add new shadcn/ui components?

The kit is compatible with the shadcn/ui CLI:

npx shadcn@latest add <component-name>

Components install to components/ui/ and integrate seamlessly with the existing design tokens.

How does dark mode work?

The kit uses next-themes for theme switching with class-based dark mode. All design tokens have light and dark mode values defined using oklch color functions in globals.css. Use the ThemeToggle component in the header to switch themes. Every screen, chart, and component adapts automatically.

Can I use this with a different charting library?

The kit uses Recharts for all analytics charts. If you prefer a different library (e.g., Chart.js, Nivo, Visx), you can replace the chart components in each page. The data shapes in data/seed.ts are standard arrays of objects and will work with most charting libraries.

Are the automation rules functional?

The automation rules have working Switch toggles that enable/disable rules and trigger toast notifications. The rule builder displays triggers, conditions, and actions visually. To make rules functional, connect them to a backend workflow engine that evaluates conditions and executes actions when ticket events occur.

Is the chatbot flow builder functional?

The chatbot builder displays a visual node-based flow editor with node types (greeting, question, menu, answer, handoff, condition) and connections. The test panel simulates conversations. To make it fully functional, connect to a conversational AI backend (e.g., Dialogflow, Rasa, or a custom NLP service) that interprets the flow definitions.

How do SLA timers work?

The SlaTimer component displays countdown timers based on the slaDeadline field in ticket data. Timers change color as they approach breach (green > yellow > red). In the seed data version, timers are display-only. To make them live, connect to your backend's SLA calculation service and update deadlines when ticket events occur.

Can I customize the ticket ID format?

Yes. The ticket ID prefix (default "HD-") can be changed in the General Settings page. In the seed data, ticket IDs follow the pattern HD-101, HD-102, etc. When connecting to a backend, map your system's ticket IDs to the id field in the Ticket interface.

Support

How do I get support?

Email support@thefrontkit.com or visit the Support page.

What's the refund policy?

7-day money-back guarantee, no questions asked.

How do I report bugs?

Email the details to support@thefrontkit.com with steps to reproduce, browser version, and screenshots if applicable. We will address it in the next update.