DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.6K
Sign inGet All-Access
Categories
App ShellAdded 10 new app shell blocks31
Auth20
Card43
Chart30
Dashboard8
Dialog14
Empty State14
Event Calendar6
Flow4
Form12
Gantt4
Kanban Board10
  • Kanban Board 1
  • Kanban Board 2
  • Kanban Board 3
  • Kanban Board 4
  • Kanban Board 5
  • Kanban Board 6
  • Kanban Board 7
  • Kanban Board 8
  • Kanban Board 9
  • Kanban Board 10
List11
Navbar13
Onboarding9
Profile10
Schedule10
Settings16
Sheet11
Stats15
Timeline9
Wizard7

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.

  • Kanban Board 1 Drag-and-drop issue tracking kanban board with six status columns and per-task completion rings
  • Kanban Board 2 Workflow kanban board with collapsible status columns and draggable cards plus columns
  • Kanban Board 3 Sales pipeline kanban board with draggable deal cards and reorderable stages
  • Kanban Board 4 Feature roadmap kanban board with vote-weighted cards across six delivery stages
  • Kanban Board 5 Workflow status kanban board with collapsible column rails and per-task progress rings
  • Kanban Board 6 Support escalation kanban board with SLA timer chips, priority badges, and draggable columns
  • Kanban Board 7 Customer renewals risk kanban board with ARR, health score, and risk-tier account cards
  • Kanban Board 8 Release readiness kanban board with risk badges, checklist progress, and drag-and-drop change cards
  • Kanban Board 9 Recruiting pipeline kanban board with candidate match scores and scorecard status
  • Kanban Board 10 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 (307) Browse 307 Shadcn Application blocks across 22 categories.
  • Shadcn Data Grid Blocks (38) Browse 38 Shadcn Data Grid blocks across 8 categories.
  • Shadcn Solutions Blocks (66) Browse 66 Shadcn Solutions blocks across 9 categories.
  • Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
  • Shadcn Marketing Blocks (60) Browse 60 Shadcn Marketing blocks across 8 categories.
  • Shadcn AI & Agents Blocks (17) Browse 17 Shadcn AI & Agents blocks across 2 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 ShellAdded 10 new app shell blocks
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event Calendar
  • Flow
  • Form
  • Gantt
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Files
  • Inventory
  • Users

AI & Agents

  • AI Chat
  • Agent Activity

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

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

Data Grid

  • BaseAdded a rate card Data Grid block with a price breakdown dialog
  • Columns
  • Drag & Drop
  • Editing
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • CompareNew Compare category with 3 versus section blocks
  • Contact
  • CTAAdded 11 new CTA blocks
  • FAQ
  • Hero
  • How It WorksNew How It Works category with 5 numbered step blocks
  • PricingNew Pricing category with a 4-tier pricing table block

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.6K
  1. Blocks
  2. Application
  3. Kanban Board

Shadcn Kanban Board Blocks with Drag and Drop

Share

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.