shadcn.io is not affiliated with official shadcn/ui
Priority Grid Kanban Block for Solid
A customer value by strategic importance grid of twelve initiatives that rank inside a quadrant, with a Roadmap order side cell renumbered by every move.
Installation
Overview
Turn a strategy into a roadmap order with this priority grid for Solid with Ark UI. A hairline frame with a plus mark on each corner holds four quadrants laid out as a grid, customer value across and strategic importance down: Revenue critical, Growth opportunity, Maintenance and Technical debt. Twelve initiatives move between quadrants and are ranked inside one, each with its rank in the quadrant, its team in an outline Badge and its weeks of work; every quadrant head totals its weeks. A side cell beside the grid, "Roadmap order", lists every initiative numbered from 1 (quadrant order, then rank) and is renumbered by every move. 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 reports each move and Reset restores the grid. The frame is ruled by Guides. On a phone the quadrants stack in one named region and the roadmap goes under them. For quarterly planning and strategy reviews.
FAQ
How do I fill it with my own initiatives?
Edit COLUMNS and START. An initiative has an id, a title, a team, weeks of work and a column of revenue, growth, keep or debt. Its rank is its place in its quadrant and the roadmap number is its place in roadmapOf, so neither is stored and they can't disagree with the order.
How is the roadmap order worked out?
Quadrants in the order they are listed (Revenue critical, Growth opportunity, Maintenance, Technical debt), and inside each quadrant the order of the cards. Moving a card up in a quadrant, or into another one, renumbers the list at once, and the status line says the roadmap was renumbered.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the initiative's title. Space or Enter picks it up, the arrow keys move it (left and right change quadrant along the row, up and down reorder the rank and then cross to the quadrant above or below; they swap in right-to-left languages), Space drops it and Escape puts it back. Each step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the four quadrants 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 and the ranks 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 cards are made up. To keep a change, call your API from put, the one function every finished move goes through, and update the cards from the response.