Dashboards · React
HR and people
Headcount, joiners and leavers, team sizes, attrition and the open-roles pipeline for a growing company.

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.
Explorer 13
/** The shape of src/dashboard.ts: every label, number and row on this dashboard lives there. */import type { IconName } from "./Icon"; export type Tone = "good" | "warn" | "bad" | "neutral" | "accent"; export type Dashboard = { brand: string; user: { name: string; role: string }; nav: { label: string; icon: IconName; href: string }[]; title: string; subtitle: string; /** Each range shows the last `points` values of the chart. */ ranges: { label: string; points: number }[]; kpis: { label: string; value: string; delta: string; up: boolean; /** Whether going up is good (default true). */ upIsGood?: boolean }[]; chart: { title: string; type: "line" | "bar"; unit?: string; labels: string[]; series: { name: string; values: number[] }[] }; side: { title: string; items: { label: string; value: string; pct: number }[] }; table: { title: string; columns: string[]; rows: string[][]; /** Index of the column rendered as a status pill. */ statusColumn?: number; tones?: Record<string, Tone> }; feed?: { title: string; items: { text: string; time: string }[] };};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 …”
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- Featured

Analytics dashboard
A responsive dashboard layout with sidebar navigation, stat cards, and a data table.

API monitoring
Latency, error rates, uptime and service health for an API platform, in a dark on-call layout.

SaaS metrics
MRR, churn, ARPA and a breakdown of new, expansion and churned revenue for a subscription product.
Build on HR and people
Create a free account, start from this template, and ask the AI agent to turn it into your app.