shadcn.io is not affiliated with official shadcn/ui
Story Mapping Kanban Block for Vue
A four-level story map of fourteen cards (Epic, Story, Task, Subtask) where a card's level is its column, a Child of select sets its parent, and a rule moves cards one level at a time.
Installation
Overview
Break a product into work with this story map for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four columns that are levels of detail, Epic, Story, Task and Subtask, joined by drawn chevrons in their heads, and fourteen cards. A card's level is its column: dragging a story into Epic promotes it, so its "Child of" line goes and a count of its stories appears, and dragging it into Task demotes it and gives it a parent one level up. Every card below Epic has a Native Select named "Child of" over the cards one level up, so re-parenting is a choice and not a drop, and each card shows its T-shirt size in an outline Badge and how many acceptance criteria it has. One rule keeps the map honest: a card moves one level at a time, and the refusal says which level to go through first. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu; a polite status line reports each move and Reset restores the map. On a phone the columns scroll sideways in one named region. For product planning, backlog refinement and any hierarchy of work.
FAQ
How do I fill it with my own map?
Edit COLUMNS and START. A card has an id, the column (its level), a title, a size, a count of criteria and the parent it hangs from, which is the id of a card one level up (empty for an epic). The epic's story count, the column counts and the header sentence are all calculated from the cards.
What happens to a card's parent when I move it?
A card must hang from a card one level up. When a move leaves it without a valid parent, settleCards gives it the first card of the level above, or none, and the "Child of" select shows that; moving a card into Epic clears its parent. Cards that hung from a moved card are re-checked the same way, so the map never holds a card under the wrong level.
Why was my card refused?
A card moves one level at a time, so an epic can't go straight to Subtask. The refusal names the card, its level and the level to go through first, and the drag, the keyboard and the menu all ask the same function, refusalOf. Replace its body to change the rule, for example to allow any move.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Space or Enter picks it up, the arrow keys move it (left and right change level, and swap in right-to-left languages), Home and End jump to the ends, Space drops it and Escape puts it back. The status line announces each step, and the menu on each card is the route for a single pointer.