Hiring Pipeline Board React component
A recruiting pipeline screen for one role: a stage funnel bar, Applied → Screening → Interview → Offer → Hired columns with counts and reach rates, candidate cards with ratings, source, next step and days in stage (red after a week), drag and drop between stages, select-to-advance or reject, search, and undo toasts.
About the Hiring Pipeline Board component
Hiring Pipeline Board is the working screen for one open role in an applicant tracking system. Every candidate sits in a stage column with what matters at a glance: rating, source, next step and how long they've been waiting.
Recruiters drag cards forward or select one to advance or reject it, and every change can be undone from the toast. The funnel bar and reach percentages show where candidates drop off, and anyone waiting more than a week is flagged in red.
When to use it
Use it in recruiting and ATS products, or in HR dashboards that track open roles.
For a generic task board use the Kanban Board component; for a sales pipeline use the Deals Pipeline Board.
Installation
Add the Hiring Pipeline Board component to your project with the shadcn CLI. It lands in components/hiring-pipeline-board.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/hiring-pipeline-boardOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<HiringPipelineBoard /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| role | string | "Senior Product Designer" |
| team | string | "Design · Berlin or remote" |
| candidates | Candidate[] | CANDIDATES |
| onMove | (id: string, stage: Stage) => void | — |
| onReject | (id: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- rolestringDefault: "Senior Product Designer"
- teamstringDefault: "Design · Berlin or remote"
- candidatesCandidate[]Default: CANDIDATES
- onMove(id: string, stage: Stage) => void
- onReject(id: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Hiring Pipeline Board FAQ
- How do I save moves?
- onMove(id, stage) runs on every drop or Move to, and onReject(id) on reject. Persist there; if your API fails, restore the previous list the same way Undo does.
- Does drag and drop work on phones?
- Touch doesn't start a drag so the board can scroll sideways. On phones people select a card and use Move to, which works everywhere.
- Why is the drag ghost positioned relative to the board?
- So it lines up even when the board sits inside a zoomed or transformed container, like a scaled preview or a modal with transforms.
- Can I change the stages?
- Edit STAGES (id, label, color) and the Stage type. Columns, the funnel and the Move to labels follow.
- Is it accessible?
- Columns are labelled groups with counts, cards are focusable buttons with aria-expanded, Enter selects, Shift+→ advances, ratings have text labels and toasts are announced. Drag is optional, never the only way.
