shadcn.io is not affiliated with official shadcn/ui
Designer Pipeline Kanban Block for React Aria
A studio pipeline with a lane for each of four designers where sending a project back from Feedback counts a review round and the header averages the rounds of delivered work.
Installation
Overview
See how many review rounds a project really takes with this design pipeline board for React with React Aria. A hairline frame with a plus mark on each corner holds a lane for each of four designers and four statuses (Briefed, Designing, Feedback and Delivered) over fourteen projects, each with a type (UI, Brand or Motion) as an icon and a word in an outline Badge. Rounds are counted from the moves: sending a project back from Feedback to Designing makes it "Round 2" and so on, and a delivered project reads "Delivered in 3 rounds". A lane head shows what a designer has in design and the average rounds of what they delivered, and the sentence under the heading gives the studio's average, all worked out from the cards, so it follows every move. Two rules refuse with the reason in words: no step is skipped, so a project goes Briefed, Designing, Feedback, Delivered, and nobody designs more than two projects at once. A card moves three ways: drag its grip, focus the grip and use Space, the arrow keys and Escape, or open its Dropdown Menu. A polite status line in the foot says what you did ("Back to Designing: round 2"), and Reset puts the pipeline back. The frame is ruled by Guides. For design studios, agencies and any review loop worth measuring.
FAQ
How do I use my own designers and projects?
Edit LANES, STATUSES and START. A project has an id, a title, a kind (UI, Brand or Motion), the rounds it is in (1 for a first pass) and the column it starts in, written as the lane and the status joined by a dot (delphi.feedback). The averages and the header sentence are worked out from the projects.
How are the review rounds counted?
settleCards compares a project's place before the move with its place after it. Only a move from Feedback to Designing adds a round; every other move keeps the round as it was. During a keyboard lift the comparison is always against where the lift began, so going back and forth between the two columns counts one round, not several, and Escape counts none. The average is the delivered projects' rounds added up and divided, shown to one decimal without floating point.
How do I move a project without a mouse?
Tab to the grip at the start of a card, named "Move" with the project's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place in the cell (at the top or bottom of a cell the card crosses into the neighbouring designer's cell in the same status), ArrowLeft and ArrowRight to go to the neighbouring status in the same designer (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 "Settings screens, Saskia Venter, Designing, position 1 of 2."
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 two groups of choices: "Move to" each status and "Hand to" each designer, the current one ticked in both. Choosing one moves the card, puts focus on the card in its new place and says so in the status line. React Aria's menu is a group of selectable items, so the choice is made by selection rather than by a radio item.
How do the two rules work, and how do I change them?
refusalOf refuses a move that jumps more than one status forward, with the status the project should go to first, and a move into a Designing cell that already holds DESIGNING_CAP projects. Moving backwards is always allowed, and so is handing a project to another designer in the same status. The drop, the keyboard steps and the menu all ask it.
What stays in the demo, and how do I save the moves?
Everything: the moves and the rounds live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting pipeline. To save for real, call your API from put, the one function every finished move goes through. The designers and projects are made up.