shadcn.io is not affiliated with official shadcn/ui
Priority Planner Kanban Block for Solid
A three-column MoSCoW planning board of nine requests whose cards are as tall as their effort, with value ticks and a rank that renumbers on every move.
Installation
Overview
Plan a quarter by what matters most with this priority board for Solid with Ark UI. A hairline frame with a plus mark on each corner holds three columns that share their lines: Must do, Should do and Nice to have. Each of the nine requests is a card whose height follows its effort, so a small request is a short card and a large one a tall card with its notes; the size is also written as an outline Badge, the business value is drawn as ten small ticks and written out for a screen reader, the requester's initials sit in an Avatar, and the card's rank is its place in its column, so it is renumbered by every move. Each column head totals its effort in points and the sentence under the heading is worked out from the cards. 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 plan. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For quarterly planning, backlog grooming and any list ranked by hand.
FAQ
How do I fill it with my own requests?
Edit COLUMNS and START. A request has an id, the column it starts in, a title, a size of S, M or L, a value from 1 to 10, the requester's name (the initials are drawn from it) and up to two lines of notes. The points of a size are in effortOf (1, 3 and 5), and every total and the header sentence are calculated from the cards.
How is the rank worked out?
It is not stored: a card's rank is its place in its column, counted from one, so dragging a request above another renumbers both at once, and so does a move to another column. That keeps the number and the order from ever disagreeing. If your app stores a rank, write it from the move handler put and keep the order in the response.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the request's title. Space or Enter picks it up, ArrowUp and ArrowDown change its rank, 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 three 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.
What stays in the demo?
Everything. The moves live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting plan. The product, the people and the requests are made up. To keep a plan, 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. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.