Customization

The HR Dashboard Kit is designed to be customized for your HR platform or internal tool. All components use design tokens and Tailwind CSS utilities, making brand adaptation straightforward.

Changing Colors

Update CSS custom properties in app/globals.css. The default green theme uses oklch hue 175. Change the hue to rebrand the entire kit:

:root {
  /* Change from green (hue 175) to blue (hue 240) */
  --primary: oklch(0.45 0.2 240);
  --primary-foreground: oklch(0.98 0 0);
  --accent: oklch(0.94 0.02 240);
  --accent-foreground: oklch(0.35 0.15 240);
  --ring: oklch(0.55 0.18 240);
}

.dark {
  --primary: oklch(0.7 0.18 240);
  --primary-foreground: oklch(0.15 0.02 240);
}

All 37 screens automatically inherit the new colors -- buttons, badges, stat cards, charts, sidebar, and focus rings all update at once.

Changing Typography

Configure fonts in app/layout.tsx:

import { Inter, DM_Sans, JetBrains_Mono } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans" });
const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains" });

Swap these for any Google Font or local font files. The CSS variables --font-sans, --font-heading, and --font-mono control body text, headings, and code respectively.

Replacing Seed Data

All mock data lives in data/seed.ts. Replace it with your data source:

API calls

import { getEmployees } from "@/lib/api"

export default async function EmployeesPage() {
  const employees = await getEmployees()
  return <EmployeeTable employees={employees} />
}

Database (Prisma, Drizzle)

import { db } from "@/lib/db"

const employees = await db.employee.findMany({
  orderBy: { hireDate: "desc" },
  include: { department: true, team: true },
})

HRIS Integration (BambooHR)

// app/api/bamboohr/employees/route.ts
export async function GET() {
  const res = await fetch(
    `https://api.bamboohr.com/api/gateway.php/${process.env.BAMBOO_SUBDOMAIN}/v1/employees/directory`,
    {
      headers: {
        Authorization: `Basic ${Buffer.from(process.env.BAMBOO_API_KEY + ":x").toString("base64")}`,
        Accept: "application/json",
      },
    }
  )
  const data = await res.json()
  return Response.json(data.employees)
}

Supabase

import { createClient } from "@supabase/supabase-js"

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

const { data: employees } = await supabase
  .from("employees")
  .select("*, department:departments(*)")
  .order("hire_date", { ascending: false })

Customizing the Sidebar

Edit components/layout/app-sidebar.tsx to add or remove navigation items. The sidebar is organized into sections:

const sections = [
  {
    title: "Main",
    items: [
      { label: "Dashboard", href: "/", icon: LayoutDashboard },
      { label: "Notifications", href: "/notifications", icon: Bell },
      { label: "Search", href: "/search", icon: Search },
      { label: "Calendar", href: "/calendar", icon: Calendar },
    ],
  },
  {
    title: "People",
    items: [
      { label: "Employees", href: "/employees", icon: Users },
      { label: "Org Chart", href: "/org-chart", icon: Network },
      { label: "Teams", href: "/teams", icon: UsersRound },
    ],
  },
  // ... Time & Leave, Talent, More sections
]

Adding New HR Pages

1. Create a new route in app/(dashboard)/your-page/page.tsx
2. The page automatically inherits the dashboard layout (sidebar, header)
3. Add a sidebar link in components/layout/app-sidebar.tsx

// app/(dashboard)/payroll/page.tsx
export default function PayrollPage() {
  return (
    <div className="space-y-6">
      <h1 className="font-heading text-2xl font-bold">Payroll</h1>
      {/* Your payroll content */}
    </div>
  )
}

Removing Unused Features

Delete directories you don't need:

• Don't need recruitment? Delete app/(dashboard)/recruitment/ and components/recruitment/
• Don't need onboarding? Delete app/(dashboard)/onboarding/ and components/onboarding/
• Don't need performance? Delete app/(dashboard)/performance/ and components/performance/
• Don't need attendance? Delete app/(dashboard)/attendance/ and components/attendance/
• Run pnpm build to verify no broken imports

Using shadcn/ui CLI

Add new components alongside the kit:

npx shadcn@latest add <component-name>

Components install to components/ui/ and integrate seamlessly with the existing design tokens. The kit uses shadcn/ui v4 with @base-ui/react.