# Hiring pipeline A React block (a whole screen) in [Beamline](https://beamline.io/)'s [HR & payroll](https://beamline.io/components/apps/hr-payroll) app. Live demo: https://beamline.io/components/hiring-pipeline A recruiting team's pipeline across every open job. Stage groups (reviewing, interviewing, closing) are counted across jobs above job sections that fold; a job's stages are columns of candidate cards, each saying its next step, whether it waits on the candidate or the team (the team's waits on the warning tone), and its days in the stage against the job's target. One person considered for two jobs is two cards, each naming the other; moving one leaves the other; a refused move stays and says why. A job you can't see is listed and said, never hidden. The same considerations open as an editable grid: a cell says it is saving, a refusal stays on that cell, and a value of the wrong kind is refused there without touching the cells beside it. Chosen candidates are acted on together: the selection frozen with its count, a confirmation that names a destructive action's consequence, progress that survives hiding the panel, and each record's outcome, a refused one readable with its reason. ## Use it for - Several pipelines at once where one person can sit in two of them: candidates across jobs, applicants across programmes, leads across products. - Bulk actions that must show what they will do, keep running out of sight and report each record. ## Not for - One dataset seen through saved views ([pipeline-views](https://beamline.io/components/pipeline-views)). - A recruiter's own to-do list ([recruiter-home](https://beamline.io/components/recruiter-home)). ## Anatomy - header: the product's mark, Pipeline, Act on n chosen (or a bulk run's progress), Board or Grid - board: stage groups with counts across jobs; job sections (title, team, manager, count) that fold, a restricted job said; stage columns of cards with a checkbox, name, a menu to move, the next step and who it waits on, days in stage (past the target on the warning tone), the person's other jobs, a refused move - grid: person, job, manager, stage, possible start, source, recruiter; editable cells saying saving or refused - bulk: the frozen selection and its count, each record's outcome; tag, move or reject (reason, email); a confirmation naming the consequence; progress; done, partly done or stopped ## States - board: no open jobs, job folded, restricted job, waiting on the candidate or the team, past target, one person in two jobs, chosen, move refused - grid: no candidates, cell saving, cell refused by type, cell refused by the app - bulk: configuring, confirming, running, hidden while running, partly refused, done - loading: shaped skeletons - phone: one column; columns stack - right to left: mirrored - reduced motion: through the tokens ## Keyboard - Tab through the groups, the job headers (Enter folds), each card's checkbox (Space) and menu - In the grid: arrows move, F2 or typing edits, Enter commits, Escape cancels ## Motion A job's chevron turns as it folds; the bulk progress fills as records finish. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `people` (required) | `Person[]` | — | | | `jobs` (required) | `Job[]` | — | | | `considerations` (required) | `Consideration[]` | — | | | `onMove` | `((considerationId: string, stage: "applied" \| "hired" \| "interview" \| "offer" \| "onsite…` | — | Move one consideration to a stage. Reject with an Error: it stays, the reason said. | | `onCellSave` | `((edit: CellEdit) => Promise)` | — | Save one edited cell of the grid. Reject with an Error: the cell is refused, said on it. | | `onBulk` | `((run: BulkRun, report: (considerationId: string, outcome: { ok: boolean; reason?: stri…` | — | Run a bulk action over a frozen selection, reporting each record as it finishes. | | `defaultView` | `"board" \| "grid"` | — | | | `defaultGroup` | `"closing" \| "interviewing" \| "review"` | — | | | `defaultSelected` | `string[]` | — | | | `defaultFolded` | `string[]` | — | | | `today` | `string` | — | | | `loading` | `boolean` | — | | | `product` | `string` | — | | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | | `defaultBulkOpen` | `boolean` | — | Open the bulk action on the chosen candidates at first. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) - [Button](https://beamline.io/components/button.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Context menu](https://beamline.io/components/context-menu.md) - [Data grid](https://beamline.io/components/data-grid.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Glow](https://beamline.io/components/glow.md) - [Input](https://beamline.io/components/input.md) - [Kbd](https://beamline.io/components/kbd.md) - [Label](https://beamline.io/components/label.md) - [Pagination](https://beamline.io/components/pagination.md) - [Popover](https://beamline.io/components/popover.md) - [Search field](https://beamline.io/components/search-field.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { HiringPipeline, STAGES, GROUPS } from "@beamline/hiring-pipeline"; ``` ## Get it Hiring pipeline is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in HR & payroll - [Shift planner](https://beamline.io/components/shift-planner): A workplace's week of staff shifts against what it needs: a row per person with their week's hours against their contract, each day a 24-hour track with… - [Shift rotations](https://beamline.io/components/shift-rotations): Rotating shift patterns from pattern to people: a pattern of one to four weeks painted day by day with a shift template, a rest day or nothing (pick the… - [Roster publishing](https://beamline.io/components/roster-publish): The week's roster before it goes out: areas down the side and days across, each shift a chip with who works it and its hours, its state its tone (not… - [My shift](https://beamline.io/components/my-shift): The worker's own shift on their phone: today drawn to scale (the plan's areas as blocks on an hour axis, under them what was worked: on-plan time in… - [Timesheet review](https://beamline.io/components/timesheet-review): Timesheets for a manager: the day's counts at the head (scheduled, on shift, late, on break, to approve), the ones that filter being buttons, an… - [Hours ledger](https://beamline.io/components/hours-ledger): One worker's pay cycle of shifts, for the worker or their payroll admin: the wall-clock span and the paid hours as separate columns, a night shift… - [Payroll run](https://beamline.io/components/payroll-run): A pay period from report to submission, one payroll account at a time (a worker on two accounts is on both runs, never combined): the workers on one… - [Payroll cycles](https://beamline.io/components/payroll-cycles): The client's side of an outsourced payroll across countries: every entity's current cycle on one board, its stage drawn as steps, the one thing that… - [Payroll approvals](https://beamline.io/components/payroll-approvals): Payroll approvals for a company paying through a payroll provider. Expenses are split by whose move it is (you, another approver, the employee answering… - [Benefit changes](https://beamline.io/components/benefit-changes): An employee's benefit changes after a life event. The centre puts their turn first: each task (a proof to upload, with its deadline in the warning tint… - [Recruiter home](https://beamline.io/components/recruiter-home): A recruiter's own work, in one place. Upcoming interviews with who sits in, today's first; feedback owed, overdue first and on the danger tone, written… - [Stage reports](https://beamline.io/components/stage-reports): Reports on how applications move through stages, built from each application's stage intervals. By week: applications present in each stage (or from each… - [Link booking](https://beamline.io/components/link-booking): A candidate's booking link for one stage of one job: a column with the job, the stage's length, who they meet (each with their role), where and what the… - [Team & members](https://beamline.io/components/team-members): The people page of a workspace: seats used against the plan, members and pending invitations in one list with search and a role filter, role changes that… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).