shadcn.io is not affiliated with official shadcn/ui
Recruitment Pipeline Kanban Block for Ark UI
A four-stage hiring board of ten candidates showing days in stage against a fixed date and a Log interview button, where an offer needs two interviews first.
Installation
Overview
Run a hiring pipeline from one screen with this recruitment board for React with Ark UI. A hairline frame with a plus mark on each corner holds four stages that share their lines (Applied, Screen, Onsite and Offer) and ten candidates. Each card shows the candidate's name and role, how long they have been in the stage as a word worked out from a fixed date, 19 October ("Today", "3 days in stage", with a solid hourglass mark from seven days), and their interviews so far beside a Log interview Button that adds one. Moving a candidate to another stage restarts that stage's clock. The guard is the offer: a candidate needs two interviews first, and the refusal says how many they have. The sentence under the heading and the stage heads count the stale candidates, those ready for an offer and the longest wait. A card moves by dragging its grip, by keyboard, or from its Dropdown Menu under "Move to". A polite status line in the foot reports each change, and Reset puts the pipeline back. The frame is ruled by Guides. On a phone the stages scroll sideways in one named region with the next stage showing. For recruiters, hiring managers and any app that tracks people through stages.
FAQ
How do I fill it with my own candidates?
Edit COLUMNS and START. A candidate has an id, the column it starts in, at (the same stage), a title holding the name, a role, the day they entered the stage as since, and their interviews. The waits, counts and sentences are worked out from them and from AS_OF.
How is days in stage worked out?
daysOf subtracts the day the candidate entered the stage from AS_OF, a fixed date, so the board reads the same every time and on the server. Moving a candidate to a different stage sets since to AS_OF through settleCards, which restarts the clock. From STALE days (seven) the badge turns solid and carries an hourglass and the word "stale" for a screen reader.
How does the offer guard work?
The rule is the function refusalOf: it refuses a move into Offer while the candidate has fewer than NEEDED interviews (two) and says how many they have. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. Log interview raises the count up to MOST, and the status line says when a candidate is ready for an offer.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line, for example "Teodoro Falkner, Onsite, position 2 of 3".
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. It goes through the same offer guard as the grip and the keys, so no route gets around it. Choosing one moves the card, puts focus on it in its new place and says so in the status line.
What stays in the demo, and how do I save the changes?
Everything: the cards live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through (the menu, a drop and the block's own buttons) and Log interview, and update the cards from the response. The company, the candidates and the dates are made up; no real person is meant.
How does it work on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card. The status line is still read out to screen readers.