shadcn.io is not affiliated with official shadcn/ui
Bug Reports Kanban Block for Vue
A three-column bug board of ten reports whose cards expand in place to steps, expected and actual, with a severity glyph and word and a rule that keeps reports without a repro out of Fixing.
Installation
Overview
Triage reports before anyone starts fixing them with this bug board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three columns that share their lines: New, Triaging and Fixing. Each of the ten reports is a card whose title is a Collapsible trigger: it opens the steps to reproduce as a numbered list, what was expected, what happened and the build in mono type, several can be open at once, and a column scrolls inside the board's fixed height, so the board never grows. Severity is a three-bar glyph and a word (High, Medium, Low), never a colour alone. One rule guards the last step: a report without steps to reproduce wears a "Needs repro" Badge and cannot enter Fixing, the refusal says so, and the open report offers the reporter's reply as its steps. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to"; a polite status line in the foot reports each move and Reset restores the board. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For triage queues, bug reviews and any board with an entry rule.
FAQ
How do I fill it with my own reports?
Edit COLUMNS and START. A report has an id (shown in mono type), the column it starts in, a title, a severity of high, medium or low, the steps to reproduce, what was expected and actual, the build and the reporter. Leave steps empty and the card is flagged "Needs repro"; the counts in the column heads and the header sentence are calculated from the cards.
How does the Needs repro rule work?
refusalOf is the one function that decides: a report with no steps cannot move to Fixing, whether it is dragged, moved with the keyboard or chosen from the menu, and the same sentence is used for all three and for the status line. Opening the card shows an "Add the reply as steps" button that copies the reporter's reply into the steps, after which the move is allowed. In your app that button would be a request to the reporter.
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. Space or Enter picks it up, ArrowUp and ArrowDown change its place, ArrowLeft and ArrowRight go to the neighbouring column (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the columns with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch, and it obeys the same rule as dragging.
What stays in the demo?
Everything. Moves, expanded cards and added steps live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the people and the reports are made up. To keep a board, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The columns scroll sideways inside the board with the next column showing, and each column scrolls up and down within the board's fixed height, so the page does not jump when a card moves. An open report scrolls inside its column instead of making the board taller. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.