A light people operations screen on warm paper: headcount by team as stacked columns, a hiring pipeline funnel, a November time-off heatmap with day details, upcoming reviews and a team directory, all filtered by team.
Wednesday, November 4 · 3 people start next Monday
Active employees at month end, last 12 months
Candidates by stage, this quarter
Approved leave per working day
1 person away
Self review, peer feedback, manager review
Recently active across all teams
npx shadcn@latest add https://hyperblur.dev/r/dashboard-hr.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-hr.tsx.
import { DashboardHr } from "@/components/hyperblur/dashboard-hr"
<DashboardHr company="Northwind" defaultTeam="All" />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#c4572a" | Accent color for the primary button, funnel, time-off heatmap, review progress and focus rings. |
| brand | string | "Hearth" | Product name shown at the top of the sidebar. |
| company | string | "Northwind" | Workspace name shown in the sidebar switcher. |
| user | string | "Amara Okafor" | Name used in the greeting and the avatar initials. |
| team | "All" | "Engineering" | "Design" | "Sales" | "Operations" | Controlled team filter. Pair with onTeamChange. | |
| defaultTeam | "All" | "Engineering" | "Design" | "Sales" | "Operations" | "All" | Initial team filter when uncontrolled. |
| onTeamChange | (team: HrTeam) => void | Called when a team tab is picked. |