Shadcn.io is not affiliated with official shadcn/ui
Kanban Priority Planner
React MoSCoW priority planner kanban for Next.js with three priority columns, drag-and-drop using @dnd-kit, effort badges, business value scores, and effort-sized card heights built with shadcn/ui and Tailwind CSS
Prioritize features with this React and Next.js MoSCoW kanban block featuring three columns for Must Do, Should Do, and Nice to Have. Cards display effort estimates as T-shirt size badges with effort-proportional heights, business value scores, and requester names. 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 prioritization, roadmap planning, and stakeholder alignment sessions.
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.
Priority Grid
React business priority 2x2 matrix grid for Next.js with customer value and strategic importance axes, initiative chips, and category badges using shadcn/ui and Tailwind CSS
Product Backlog
React kanban product backlog for Next.js with sidebar filters for priority, type, and team, four-column board layout, and animated card entrance using shadcn/ui and Tailwind CSS