DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.7K
Sign inGet All-Access
Categories
App Shell35
Auth20
Card43
Dashboard8
Dialog14
Empty State14
Event Calendar6
Flow4
Form12
Gantt4
Kanban Board10
  • Bug Triage
  • Collapsible Columns
  • Sales Pipeline
  • Feature Roadmap Votes
  • Progress Ring Workflow
  • Support Escalations
  • Renewals Risk
  • Release Readiness
  • Recruiting Pipeline
  • Access Review
List11
Navbar13
Onboarding9
Profile10
Rich Text Editor5
Schedule10
Settings16
Sheet24
Stats2 meter cards moved here from Charts, 17 in all17
Timeline9
Whiteboard2
Wizard7

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

  • A full page drag and drop board with a toolbar above stage columns that show their card counts
  • A board written for one workflow: bugs, deals, roadmap, support, renewals, releases, hiring or access reviews
  • Stage triage where each card shows a due, risk, priority, score or progress signal without opening it

When not to use

  • A bare drag and drop board to build your own columns and cards on: use the Kanban component
  • A sales workspace where the deal board shares records with a table, sheet or calendar: use the CRM blocks
  • The same work items as rows to sort, filter and page, with no stage columns: use the Base blocks

Agent notes

  • Board order lives in useState seeded from data.tsx and onValueChange only writes it back, so every move is lost on reload
  • Filters, the create button and every other toolbar or column add button render without an onClick handler
  • A KanbanColumnHandle in the column header lets users reorder stages by drag; remove it where stage order is fixed

Third-party API docs

  • dnd kit v6: API reference, docs, used by 10 of 10 blocks (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
  • Base UI v1: API reference, docs, llms.txt, used by 10 of 10 blocks
Markdownhttps://web.dev.reui.io/blocks/application/kanban-board.md
MCPsearch({ query: "kanban board", type: "block", category: "kanban-board" })
Full index for agents:llms.txtReUI MCP setup

Shadcn Kanban Board Blocks Built on the ReUI Kanban Primitive

A kanban board is the one pattern static markup cannot fake. The moment a card has to move you need a drag layer, drop targets, keyboard access, and a data model that survives the drop. All of these blocks run on the ReUI Kanban primitive, so that part is solved before you start designing the card.

Drag and drop covers both axes. Cards move within a column and across columns, and the columns themselves reorder, so stage order becomes a user preference rather than a hardcoded array. Two boards also collapse a column to a vertical rail, which is what keeps an eight-column workflow usable on a laptop screen.

What changes between the boards is the card, and that is the interesting part. Each one carries the signals its domain actually reads: SLA countdowns, ARR and renewal dates, vote counts, match scores, risk tiers, checklist progress.

All Kanban Board Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

  • Bug Triage Drag-and-drop issue tracking kanban board with six status columns and per-task completion rings
  • Collapsible Columns Workflow kanban board with collapsible status columns and draggable cards plus columns
  • Sales Pipeline Sales pipeline kanban board with draggable deal cards and reorderable stages
  • Feature Roadmap Votes Feature roadmap kanban board with vote-weighted cards across six delivery stages
  • Progress Ring Workflow Workflow status kanban board with collapsible column rails and per-task progress rings
  • Support Escalations Support escalation kanban board with SLA timer chips, priority badges, and draggable columns
  • Renewals Risk Customer renewals risk kanban board with ARR, health score, and risk-tier account cards
  • Release Readiness Release readiness kanban board with risk badges, checklist progress, and drag-and-drop change cards
  • Recruiting Pipeline Recruiting pipeline kanban board with candidate match scores and scorecard status
  • Access Review Access review kanban board with risk badges, star confidence rating, and reviewer avatars

Drag and Drop on Both Axes

Cards drag within a column to reprioritize and across columns to change state. Columns drag too, so a user can rearrange their own pipeline stages. Collapsing a column to a vertical rail keeps six or eight stages readable without a horizontal scrollbar.

That behavior comes from the ReUI Kanban primitive rather than from per-block code, so it is identical across every board here. Install two of these blocks and they share one drag engine instead of shipping two competing implementations.

Because the primitive is documented on its own page, you can start from a block for the layout and card design, then read the API when you need to own the data, persist an order, or react to a drop on the server.

Card Anatomy: The Signals Each Board Reads

A kanban card is a dense information design problem, and these boards solve it several different ways.

  • Completion state as SVG progress rings or Progress bars, plus checklist counts on release cards.
  • Priority, risk tier and status as Badge pills, with signal dots and color-coded health bars where a badge would be too loud.
  • Ownership as Avatar faces, with due dates, launch windows and next-step lines under the title.
  • Money and impact: deal value, ARR, renewal dates and days remaining on the pipeline and renewals boards.
  • SLA countdown chips on the support board, so a ticket's remaining time reads at a glance from across the room.
  • Engagement counts for attachments, comments and votes, plus Rating stars on deal and review cards.

Boards Modeled on Real Workflows

The column names, card fields and density are already domain-shaped, which is usually the part that takes longest to get right.

  • Engineering: issue and bug tracking with priority and completion rings, and a release readiness pipeline from Intake to Shipped with risk badges, services and environments.
  • Revenue: a sales pipeline with deal value, company logos and next steps, and a renewals board with ARR, health scores and churn risk tiers.
  • Support: a help-desk escalation board where the columns are SLA states and every ticket carries its own countdown.
  • Product: a feature roadmap where cards are vote-weighted, with trend arrows and impact or ARR beside the delivery stage.
  • People and governance: a recruiting pipeline from Sourced to Offer with match scores and scorecards, and an access certification board for IAM reviews.
  • Generic workflow: status boards with up to eight columns that collapse to rails, for project and CRM use where the stage names are yours.

Related Shadcn Application Block Categories

Boards rarely ship alone. These are the application categories that sit next to a kanban in the same product.

  • Gantt Task trees and timeline bars for when the cards on a board need dates and dependencies.
  • Event Calendar Month, week, day and agenda views with drag-and-drop scheduling over the same task data.
  • Timeline Activity and history views for what happened to a card after somebody moved it.
  • List Dense list layouts for the users who would rather scan rows than columns.
  • Dashboard Overview screens that summarise throughput and status for whatever the board tracks.
  • Schedule Shift and availability layouts for when the work is people and time rather than stage and card.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

  • Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
  • Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
  • Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
  • Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
  • Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Is the drag and drop real, or a static mockup?

It is real. Every board runs on the ReUI Kanban primitive, so you can pick up a card, move it between columns, drop it into a position, and drag the columns themselves into a new order. Two boards also collapse a column to a vertical rail. The demo data is placeholder, the interaction is not.

How do I connect a board to my own data?

The board renders from arrays of columns and cards that live in the block file after install. Replace the placeholder arrays with your query result, keep the field names or rename them inside the card component, and handle the change callback to persist the new column and position on your server.

Can I change the columns and the card layout?

Yes, and you should. The column list is data, so renaming six SLA states to your own stages is a one-array edit. The card is a normal component built from shadcn Card, Avatar and Badge, so adding a field, dropping the rating row, or swapping a progress ring for a bar is ordinary JSX work in your repo.

How do I install a kanban board block?

Run the shadcn CLI against the ReUI registry, for example npx shadcn@latest add @reui/kanban-board-3. It pulls in the block, the Kanban primitive and the shadcn components the cards use. Any shadcn-initialized app works: Next.js, Vite, Remix, Astro or TanStack Start, and nothing stays as a runtime dependency.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.

Application

  • App Shell
  • Auth
  • Card
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Rich Text Editor
  • Schedule
  • Settings
  • Sheet
  • Stats2 meter cards moved here from Charts, 17 in all
  • Timeline
  • Whiteboard
  • Wizard

Data Grid

  • Base
  • AdvancedAdded 2 new Data Grid Advanced blocks, 5 in all
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Charts

  • Area ChartAdded a new Inbound Leads area chart block
  • Bar Chart
  • Composed Chart
  • Line Chart
  • Pie Chart
  • Radial Chart
  • Sankey ChartNew Sankey Chart category with 3 flow chart blocks
  • Slope ChartNew Slope Chart category with 2 rank-shift chart blocks
  • Sparkline
  • Status Tracker

AI & Agents

  • AI Chat
  • Agent Activity
  • AI UsageNew AI Usage category with 2 spend blocks

Solutions

  • Dev Ops
  • AI Ops
  • CRM
  • Agents
  • Analytics
  • Billing
  • Bookings
  • Files
  • Inventory
  • Users
  • Digital TwinNew Digital Twin category with 2 interactive 3D blocks

Templates

  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist
  • Shop Hero

Marketing

  • Blog
  • Compare
  • Contact
  • CTA
  • FAQ
  • Hero
  • How It Works
  • Pricing

Resources

  • Components
  • Blocks
  • Icons
  • MCP for Agents
  • Docs
  • Support
  • Pricing
  • Tailwind Plus Alternative
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.7K
  1. Blocks
  2. Application
  3. Kanban Board
DocsMarkdown

Shadcn Kanban Board Blocks with Drag and Drop

On all 10 boards the cards and the columns both drag, and every board models real work: a release pipeline, a support queue, a hiring loop.