shadcn.io is not affiliated with official shadcn/ui
Task Board Dashboard Block for Vue
A three-column work board with a number field for the WIP limit on In progress, a count and share bar per column, cards with a priority word and assignee initials, and Previous and Next buttons that keep focus on the moved card.
Installation
Overview
Keep work in progress honest, with this limited board for Vue with Ark UI. The header holds one control, a Number Input for the WIP limit on In progress. A hairline frame with a plus mark on each corner holds three Wipwell columns on shared hairlines, To do, In progress and Done, each with its count, a bar of its share of all cards and a line that reads "Over the limit by 1" when In progress holds more cards than the limit allows. Nothing is blocked: the board only says so. Each card shows a title, a priority word in a Badge and the assignee's initials in an Avatar, and moves with its Previous and Next buttons, which keep keyboard focus on the moved card. There is no dragging. For small teams and sprint boards.
FAQ
How do I fill it with my cards?
Edit CARDS (a title, a priority, an assignee and their initials) and START, which says which column each card begins in. COLUMNS names the three lanes, and the first, middle and last are what Previous and Next walk through. The counts, bars and sentences are worked out from the placement.
What does the WIP limit do?
It sets how many cards In progress should hold. When there are more, the column says "Over the limit by N" in words and bold weight, and the header sentence says the same. Nothing is blocked, so a card can still be moved in. Values outside 1 to 9 are refused with a message and the last good limit stays.
How does moving a card work?
Pressing Next or Previous on a card moves it to the end of the next or previous column, announces it in the status line, and puts focus on the same button of the moved card (or the other one when it has reached the end of the board). The buttons at the ends stay in place with a muted look and say why in their names.
Why can I scroll inside a column?
Each column has a fixed height and scrolls inside it, so moving cards never changes the height of the board. An empty column shows an empty state with a hint.