shadcn.io is not affiliated with official shadcn/ui
Hiring Pipeline Todo List Block for Radix UI
A candidate pipeline filtered by stage with counts, score dots and days in stage from a fixed date, a Move to next stage button, and a confirmed Reject with Undo.
Installation
Overview
Track who is where in a small team's hiring, with this hiring pipeline block for React with Radix UI. A Toggle Group of stages (All, Applied, Screen, Interview, Offer, Hired) shows a live count on each and doubles as the filter; on a phone it scrolls sideways. Each candidate is an initials Avatar with the role, the interviewer's initials, five score dots drawn as a labelled image ("Score 4 of 5") and the days in the stage, counted from the day they entered it against a fixed "today". An outline button names the next stage, "Move to Interview", and moves the candidate there, starting the count again. "Reject" asks in an Alert Dialog first and leaves a one-line Undo in the foot. The list keeps its height, with an Empty state for a stage nobody is in. Guides rule the bands. For recruiting, admissions and any funnel with stages.
FAQ
How are the days in stage worked out?
Each candidate has the ISO day they entered their stage, and the block has one fixed AS_OF. The label is the number of whole days between them, or "New in stage today". Moving a candidate sets their day to AS_OF, so the count starts again.
Why are candidates only initials?
It keeps real names out of a demo and out of screenshots. Replace initials with a name where your product shows one, and keep the avatar and the row label in step.
What does Reject do?
It opens an alert dialog with focus on "Keep in pipeline". Confirming removes the candidate and a one-line Undo appears in the foot; Undo puts them back in the same place. Nothing is sent to anyone.
What stays local, and how do I wire it for real?
Stages and rejections live in the page and reset on reload. Write each move from move and each rejection from confirm to your applicant store.