shadcn.io is not affiliated with official shadcn/ui
Employee Onboarding Kanban Block for Radix UI
A four-column onboarding board (Offer signed, Preboarding, Onboarding, Active) of nine new hires with a five-step checklist each, where nobody reaches Active until all five steps are ticked.
Installation
Overview
Bring new hires up to speed with this onboarding board for React with Radix UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Offer signed, Preboarding, Onboarding and Active) and nine hires. Each card shows the name, the role and the start date, a five-segment bar for the checklist (equipment, accounts, paperwork, intro call and first task) with the count in words, and a "Next" Button that ticks the next step in order. One rule guards the board: nobody reaches Active before all five steps are done, and the refusal says how many are. The sentence under the heading counts the active hires and the steps ticked. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu under "Move to". A polite status line reports each change and Reset restores the board. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For people teams, onboarding trackers and any pipeline where a checklist gates the last stage.
FAQ
How do I fill it with my own hires and steps?
Edit COLUMNS, STEPS and START. A hire has an id, the column they start in, a name, a role, a start date in ISO form and done, how many steps are ticked. The bar draws one segment per entry in STEPS and the count follows its length.
How does the Active rule work?
refusalOf compares a hire's done with the number of steps and returns a reason when they differ. The drop, the keyboard steps and the menu all ask it. The card's ticks stay in order, so a step can't be skipped.
What does Next do?
It ticks the next step for that hire and says so in the status line, for example "Ticked Paperwork for Kofi Ansah-Reid: 3 of 5 steps." The card stays in its column; moving it is a separate choice. When all five are done the button reads "All steps done" and stays on the card, so focus is never lost.
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. Each step is announced in the status line. The card's "More actions" menu offers a "Move to" choice for every column too, which is the route for a single pointer and for touch.
What stays in the demo, and how do I save the moves?
Everything: ticks and moves live in the component's state, no accounts or equipment are ordered, and a reload or Reset restores the board. To save for real, call your API from put and from the step handler, and update the cards from the response. The people are made up.
How does it look on a phone?
The columns scroll sideways in one named region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. The "Next" button stays on the card. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu moves a card with a single tap.