FAQ

What screens are included?

37 screens total: main dashboard with stat cards and charts, employee directory with grid/list toggle, employee profile with tabbed content, employee edit form, multi-step add employee wizard, interactive org chart with search and zoom, team management, leave overview with balance cards, leave request admin with bulk approve/reject, leave application form, leave policies, attendance dashboard with check-in and heatmap, attendance reports, attendance settings, performance overview with rating distribution, individual review forms with star ratings, goals and OKRs with key results, review cycle management, onboarding dashboard with progress rings, onboarding checklists with phased tasks, onboarding templates, recruitment with job postings, applicant kanban board, applicant profiles with interview timelines, notifications, search, calendar, announcements, documents, help center, 4 settings pages, and 3 auth pages.

Does this include backend or API logic?

No. This is a frontend UI kit. All screens use mock seed data with 20 employees, 8 departments, leave requests, attendance records, performance reviews, goals, job postings, and more. You connect your own backend, API, or database. The UI layer handles display, interaction, and form structure.

Can I connect this to a real HRIS?

Yes. All screens consume typed TypeScript interfaces. Replace the seed data imports with API calls to BambooHR, Rippling, Workday, or any REST/GraphQL endpoint. See the Customization guide for integration examples.

Does the org chart actually work?

Yes. The org chart builds a visual tree hierarchy from employee managerId relationships. It supports search highlighting, zoom controls, department color coding, and expand/collapse branches -- all rendered with CSS-based connecting lines.

Is the UI accessible?

Yes. All screens use semantic HTML, keyboard navigation, proper ARIA labels, focus management, and WCAG AA contrast ratios in both light and dark modes. Five custom accessibility hooks are included. See the Accessibility guide.

Can I customize the design and colors?

Absolutely. The entire color system uses oklch tokens in globals.css. Change the hue value and all 37 screens update instantly. Typography, spacing, and component styles are all token-driven through Tailwind CSS. See the Design Tokens guide.

What tech stack does this use?

Next.js 16 (App Router), React 19, Tailwind CSS v4, shadcn/ui v4 (with @base-ui/react), Recharts 3, date-fns, react-day-picker, Lucide React, next-themes, and sonner. See Getting Started for the full stack table.

What license covers client work?

Solo and Team licenses are for internal projects. The Agency license allows unlimited developers and client delivery.

Can I use this with a different CSS framework?

The kit is built specifically for Tailwind CSS v4 with oklch design tokens. While you could extract the component logic, the styling is deeply integrated with Tailwind utilities. We recommend keeping Tailwind for the best experience.

How do I add new pages?

Create a new file in app/(dashboard)/your-page/page.tsx. It automatically inherits the dashboard layout (sidebar + header). Add a navigation link in components/layout/app-sidebar.tsx. See the Customization guide for details.