Getting Started with HR Dashboard Kit
Last updated on 2026-03-30
The HR Dashboard Kit is a production-ready Next.js template for building a complete human resources management dashboard. It includes 37 screens covering employee management, leave workflows, attendance tracking, performance reviews, onboarding checklists, and recruitment -- all built with Tailwind CSS v4 and shadcn/ui.
What's Included
- 90+ UI components -- shadcn/ui primitives, HR composites, dashboard widgets, chart components, and layout components
- 37 pages -- dashboard, employees, leave, attendance, performance, onboarding, recruitment, settings, and auth
- 2 route groups --
(dashboard)for the main HR app,(auth)for login and registration - Light & dark mode -- oklch design tokens with green theme (hue 175)
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> hr-dashboard-kit
cd hr-dashboard-kit
# 2. Install dependencies
pnpm install
# 3. Start the dev server
pnpm dev
Open http://localhost:3000 to browse the HR dashboard.
Kit Overview
| Area | Screens | Key Features |
|---|---|---|
| Dashboard | 1 | Stat cards, headcount chart, department donut, activity feed, events, team availability |
| Employees | 5 | Directory, profile, edit, add wizard, org chart, teams |
| Leave | 4 | Overview with balances, request admin, apply form, policies |
| Attendance | 3 | Check-in/out, heatmap calendar, reports, settings |
| Performance | 4 | Overview, review forms, goals with OKRs, review cycles |
| Onboarding | 3 | Dashboard, checklists, templates |
| Recruitment | 3 | Job postings, applicant kanban, applicant profiles |
| Settings | 4 | General, departments, roles, integrations |
| Auth | 3 | Login, register, forgot password |
| Utility | 7 | Search, calendar, notifications, announcements, documents, help |
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 v4 | Component primitives (@base-ui/react) |
| Recharts 3 | Dashboard and reporting charts |
| date-fns | Date formatting and utilities |
| react-day-picker | Calendar and date picker components |
| Lucide React | Icon library |
| next-themes | Dark mode support |
| sonner | Toast notifications |
Next Steps
- Installation -- detailed setup and configuration
- Project Structure -- understand the directory layout
- Design Tokens -- oklch color system and theming
- Accessibility -- WCAG AA compliance and keyboard support