Anatomy of the Kanban Board Block
A kanban board visualizes work as cards that travel through columns, one column per workflow stage. This Shadcn UI kanban block implements the full pattern: five columns labeled Backlog, Todo, In Progress, In Review, and Done, each with a color-coded dot in its header and a live count of the tasks inside.
Every card is a small dashboard of its own. It shows the task title, outline badges for labels like Bug or Feature, a priority badge tinted from blue for low up to red for urgent, an assignee avatar with initials, and a due date with a calendar icon. A grip handle signals that the card can be picked up and moved.
Teams and Workflows That Benefit
Kanban boards are the backbone of project management tools, sprint planning views, and bug trackers, but the pattern reaches further: content pipelines moving articles from draft to published, hiring funnels moving candidates between interview stages, and sales boards moving deals toward close all map onto columns and cards.
If your product already has a task list view, a board is the natural second perspective on the same data. The two views can share one data source, with the board giving managers the at-a-glance picture and the list giving individuals their queue.
Under the Hood
Drag and drop is powered by dnd-kit, using its core DndContext together with sortable contexts for both columns and cards. The block registers mouse, touch, and keyboard sensors, so cards can be moved with a pointer on desktop, a finger on mobile, or arrow keys from the keyboard. A drag overlay renders an elevated copy of the active card while it travels, and screen reader announcements describe every pick up, move, and drop.
The board itself is split into a reusable kanban primitive and a render layer. The primitive handles collision detection, sorting strategies, and ref composition; the render layer maps a plain object of column arrays into columns and cards. Moving a task between columns is an array operation on React state, which makes persisting changes to your backend a matter of adding one callback.
Recoloring Columns and Cards
Structural colors follow the Shadcn UI token system: cards sit on the card background token, borders use the border token, and secondary text uses muted-foreground, all defined as CSS variables in globals.css. Your existing theme, including dark mode, applies without modification since every priority tint ships with an explicit dark variant.
The expressive colors are deliberately easy to find and change. Column dot colors live in a single config object, and priority badge tints live in another, so aligning the board with your brand or your team's severity scale is a few lines of Tailwind classes.
Component Inventory Across React, Vuejs, and Svelte
The block composes the Shadcn UI avatar and badge components with the custom kanban primitive, plus lucide-react icons for the grip handle and calendar. It is written in TypeScript with typed task, column, and event interfaces throughout.
The same board is available in React, Vuejs, and Svelte versions. The Vuejs edition builds on shadcn-vue and the Svelte edition on shadcn-svelte, so drag and drop, keyboard support, and theming carry over regardless of which framework your project uses.
Adding the Board to Your App
Install with the shadcn CLI command at the top of the example page, available in npm, pnpm, yarn, and bun flavors, and the registry brings in the board files along with their dependencies. Alternatively, copy the files from the code tab by hand. This is a pro block, so both routes unlock with an All Access plan, detailed on the pricing page.
To connect real data, replace the initial columns object with tasks fetched from your API, then persist the result of drag events in the value-change callback. Because column order and card order are both plain arrays, syncing them to a database is straightforward.