shadcn.io is not affiliated with official shadcn/ui
Product Backlog Kanban Block for Solid
A four-column backlog of fourteen items with a MoSCoW chip you press to change, a rank in Ready and Scheduled, and a count of the Musts inside Ready's top four.
Installation
Overview
Decide what goes into the next sprint with this product backlog for Solid with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Backlog, Refined, Ready and Scheduled) and fourteen items. Each card shows its title, its estimate in points in a secondary Badge and a MoSCoW chip (Must, Should, Could or Won't) that is a Button: press it to cycle the priority. In Ready and Scheduled a card also shows its rank, which is its place in the column. The top four cards of Ready are the next sprint's cut: the Ready head counts the Musts among them, cards below the cut say so, and the sentence under the heading says how many Musts sit below it, so reordering Ready changes the count. 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 column under "Move to". One rule guards the board: a Won't can't be Ready or Scheduled. A polite status line in the foot reports each change, and Reset puts the backlog back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For sprint planning, roadmaps and any list that has to be cut to fit.
FAQ
How do I fill it with my own items?
Edit COLUMNS, LEVELS and START. A card has an id, the column it starts in, a title, a level (must, should, could or wont) and its points. Set TOP to the number of cards that make your cut. Every count, the head note and the header sentence are calculated from the cards.
What is the top four, and how is it counted?
It is the first four cards of Ready, in the order they are shown, because the order is the rank. The Ready head reads the Musts among them ("top 4: 3 Must"), a card from the fifth place on says "Below the cut", and the header counts the Musts below. Dragging a Must up, or a Could down, changes the numbers at once and the status line says so.
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.
Why does the chip skip Won't in Ready?
A Won't can't be Ready or Scheduled, so the same rule that refuses a move into those columns also makes the chip skip Won't there, and the status line says it was skipped. In Backlog and Refined all four priorities are in the cycle. The rule is the function refusalOf; replace its body with your own, such as a cap on points in Ready.
What stays in the demo, and how do I save the changes?
Everything: the moves and the priorities live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting backlog. To save for real, call your API from put (every finished move goes through it) and from act (the chip), and update the cards from the response. The items 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.