Shadcn.io is not affiliated with official shadcn/ui
Kanban Story Mapping
React user story mapping kanban for Next.js with four hierarchy columns, drag-and-drop reordering using @dnd-kit, parent breadcrumbs, and acceptance criteria counts built with shadcn/ui and Tailwind CSS
Map user stories across hierarchy levels with this React and Next.js kanban block featuring four columns for Epics, Stories, Tasks, and Subtasks. Cards show parent breadcrumbs, acceptance criteria counts, and size estimates with full drag-and-drop powered by @dnd-kit/core and @dnd-kit/sortable. Built with TypeScript, shadcn/ui Badge, Avatar, and Button components, and Tailwind CSS. Ideal for product discovery workshops, backlog grooming sessions, and user story mapping tools.
Related Components
Sprint Capacity Kanban
Progress-heavy capacity board
Team Sprint Kanban
Swimlane grid for sprints
Project Planner Kanban
Split-panel project management
Eisenhower Matrix Kanban
2x2 priority matrix board
Team Workload Kanban
Avatar swimlane workload view
FAQ
Was this page helpful?
Sign in to leave feedback.
Startup Pipeline
React startup deal flow kanban for Next.js with ultra-compact cards, HoverCard detail popups showing industry, funding ask, traction metrics, and team size using shadcn/ui HoverCard and Tailwind CSS.
Student Tracker
React dual-view student progress tracker kanban for Next.js with Switch toggle between board and table views using shadcn/ui Table, Switch, and Tailwind CSS.