DemoBuy

Getting Started with Kanban PM Kit

Last updated on 2026-03-26

The Kanban PM Kit is a production-ready Next.js template for building a modern project management platform. It includes 45+ screens covering Kanban boards, sprint cycles, timeline/Gantt views, team workload tracking, goals and OKRs, workspace analytics, and more -- all built with Tailwind CSS v4 and shadcn/ui.

What's Included

  • 80+ UI components -- primitives, PM composites, Kanban components, chart components, task components, timeline components, settings components, and layout components
  • 45+ pages -- dashboard, projects, board views, cycles, modules, pages, tasks, goals, roadmap, team, workload, analytics, settings, auth, and utility pages
  • 2 route groups -- (dashboard) for the main PM app, (auth) for login and registration
  • Light & dark mode -- oklch design tokens with blue-violet theme (hue 255)

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> kanban-pm-kit
cd kanban-pm-kit

# 2. Install dependencies
pnpm install

# 3. Start the dev server
pnpm dev

Open http://localhost:3000 to browse the project management dashboard.

Kit Overview

Area Screens Key Features
Dashboard 5 Dashboard home, activity feed, analytics, my work, workload
Projects 4 Projects list, project overview, create project, project settings
Board & Views 5 Kanban board, list view, backlog, calendar, timeline/Gantt
Cycles & Modules 5 Cycles list, cycle detail, modules list, module detail, pages/wiki
Tasks 2 Task detail, task form with comments and subtasks
Goals & Roadmap 2 Goals/OKRs, roadmap
Team 2 Team directory, member detail
Search & Views 3 Global search, saved views, project templates
Settings 9 General, appearance, members, labels, notifications, integrations, billing, import/export, API keys
Auth 3 Login, register, forgot password
Utility 2 Onboarding wizard, inbox/notifications

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 and analytics charts
@hello-pangea/dnd Drag-and-drop for Kanban board
date-fns Date formatting and utilities
Zod Schema validation for forms
Lucide React Icon library
next-themes Dark mode support
sonner Toast notifications
cmdk Command palette
react-day-picker Calendar date pickers

Next Steps

Next

Installation