Skip to content
codexa

Dashboards · React

HR and people

Headcount, joiners and leavers, team sizes, attrition and the open-roles pipeline for a growing company.

Use this templateRemix
HR and people starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A people dashboard for a 214-person software company: joiners and leavers by month, team sizes, attrition and time to hire, and every open role with its stage. Teams, roles and figures live in src/dashboard.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-people

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Fernway",  "user": {    "name": "Gita Sharma",    "role": "Head of People"  },  "nav": [    {      "label": "Overview",      "icon": "chart",      "href": "#overview"    },    {      "label": "Movement",      "icon": "users",      "href": "#trends"    },    {      "label": "Teams",      "icon": "home",      "href": "#breakdown"    },    {      "label": "Hiring",      "icon": "star",      "href": "#table"    },    {      "label": "Updates",      "icon": "clock",      "href": "#activity"    }  ],  "title": "People overview",  "subtitle": "As of 30 September 2026",  "ranges": [    {      "label": "6M",      "points": 6    },    {      "label": "12M",      "points": 12    }  ],  "kpis": [    {      "label": "Headcount",      "value": "214",      "delta": "6",      "up": true    },    {      "label": "Open roles",      "value": "8",      "delta": "2",      "up": true    },    {      "label": "Attrition (12 mo)",      "value": "9.8%",      "delta": "1.1 pts",      "up": false,      "upIsGood": false    },    {      "label": "Time to hire",      "value": "34 days",      "delta": "5 days",      "up": false,      "upIsGood": false    }  ],  "chart": {    "title": "Joiners and leavers",    "type": "bar",    "labels": [      "Oct",      "Nov",      "Dec",      "Jan",      "Feb",      "Mar",      "Apr",      "May",      "Jun",      "Jul",      "Aug",      "Sep"    ],    "series": [      {        "name": "Joiners",        "values": [          5,          4,          5,          5,          6,          6,          6,          6,          5,          8,          5,          7        ]      },      {        "name": "Leavers",        "values": [          2,          1,          3,          1,          2,          1,          2,          2,          1,          4,          2,          1        ]      }    ]  },  "side": {    "title": "Headcount by team",    "items": [      {        "label": "Engineering",        "value": "68",        "pct": 32      },      {        "label": "Customer success",        "value": "41",        "pct": 19      },      {        "label": "Sales",        "value": "36",        "pct": 17      },      {        "label": "Operations",        "value": "29",        "pct": 14      },      {        "label": "Product & design",        "value": "22",        "pct": 10      },      {        "label": "People & finance",        "value": "18",        "pct": 8      }    ]  },  "table": {    "title": "Open roles",    "columns": [      "Role",      "Team",      "Location",      "Applicants",      "Stage",      "Hiring manager"    ],    "statusColumn": 4,    "tones": {      "Sourcing": "neutral",      "Interviewing": "accent",      "Offer out": "good",      "On hold": "warn"    },    "rows": [      [        "Senior Backend Engineer",        "Engineering",        "Remote (UK)",        "64",        "Interviewing",        "Rafael Mendes"      ],      [        "Support Specialist",        "Customer success",        "Leeds",        "112",        "Offer out",        "Nadia Bose"      ],      [        "Account Executive",        "Sales",        "Manchester",        "47",        "Interviewing",        "Chris Walsh"      ],      [        "Product Designer",        "Product & design",        "Remote (UK)",        "89",        "Sourcing",        "Ellen Fry"      ],      [        "Payroll Coordinator",        "People & finance",        "Leeds",        "23",        "On hold",        "Tom Hughes"      ],      [        "Data Engineer",        "Engineering",        "Remote (UK)",        "38",        "Sourcing",        "Rafael Mendes"      ],      [        "Implementation Manager",        "Customer success",        "Leeds",        "31",        "Interviewing",        "Nadia Bose"      ],      [        "Operations Analyst",        "Operations",        "Leeds",        "52",        "Offer out",        "Gita Sharma"      ]    ]  },  "feed": {    "title": "Updates",    "items": [      {        "text": "Engagement survey closes Friday: 71% have responded so far",        "time": "Today"      },      {        "text": "Payroll Coordinator role paused until the Q1 budget review",        "time": "Sep 20"      },      {        "text": "6 new starters joined on Sep 15 (4 in Customer success)",        "time": "Sep 15"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from HR and people's files. The box is already started for you: finish “Start from HR and people and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on HR and people

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates