Shadcn.io is not affiliated with official shadcn/ui
Kanban Workflow Builder
React workflow automation kanban for Next.js with four stage columns, drag-and-drop step reordering using @dnd-kit, service icons, and connection indicators built with shadcn/ui and Tailwind CSS
Design automation workflows with this React and Next.js kanban block featuring four stage columns for Trigger, Condition, Action, and Complete. Cards display automation step names, type icons, and connected service labels with subtle connection indicators between stages. Full drag-and-drop powered by @dnd-kit/core and @dnd-kit/sortable. Built with TypeScript, shadcn/ui Badge and Button components, and Tailwind CSS. Ideal for workflow automation builders, integration pipeline editors, and no-code automation 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.
Weekly Goals
React kanban weekly goal tracker for Next.js with vertical accordion columns, category badges, target metrics, and staggered card animations using shadcn/ui Accordion and Tailwind CSS
Writer Assignments
React kanban content writer assignment swimlane board for Next.js with avatar rows, word count targets, content type badges, and publishing status using shadcn/ui Avatar and Tailwind CSS