shadcn.io is not affiliated with official shadcn/ui
Issue Tracker Board Kanban Block for Radix UI
A three-lane issue board of twelve issues with a type icon and word, an age from a fixed day, and a work-in-progress limit per lane that refuses a move into a full lane.
Installation
Overview
Keep work in progress honest with this issue board for React with Radix UI. A hairline frame with a plus mark on each corner holds three lanes that share their lines (Reported, Investigating and Fixed) and twelve issues. Each card shows the issue's number as code, its title, its type as an icon and a word (Bug, Question or Request) in an outline Badge, how long it has been open from a fixed day, and the reporter's initials in an Avatar. Every lane has a work-in-progress limit shown in its head ("3 of 3" and "Full"), and the sentence under the heading names the lanes that are full. A card moves three ways: drag it by its grip, press Space on the grip and use the arrow keys, or open its Dropdown Menu and choose a lane under "Move to". One rule guards the board: a full lane takes no more, and the refusal gives the count and says to finish or return one first. A polite status line in the foot reports each move, and Reset puts the board back. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For bug trackers, support queues and any team that wants to finish work before starting more.
FAQ
How do I fill it with my own issues and limits?
Edit COLUMNS and START. A lane has an id, a name and a limit, the most cards it may hold. A card has an id, the column it starts in, a number, a title, a kind (Bug, Question or Request), the ISO date it was opened and the reporter's name, from which the initials are drawn. The heads, the ages and the header are calculated from the cards.
Where does the age come from?
It is the number of days between the card's opened date and AS_OF, a fixed date at the top of the file, so the demo reads the same on every load and never uses the clock. A fixed issue says Fixed instead. For real use, set AS_OF from the current date.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its 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.
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. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How does the limit work, and how do I change it?
The rule is the function refusalOf, which gets the cards, the issue, the lane it comes from and the lane it is going to, and returns a reason or an empty string. It refuses any move into a lane already at its limit, from the grip, the keyboard and the menu alike, and moving within a lane is always allowed. The status line gives the count, such as "Investigating is full: 3 of 3". Change a limit to change the rule, or replace the body for something else.
What stays in the demo, and how do I save the moves?
Everything: the moves 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, and update the cards from the response. The issues and people are made up.
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.