Shadcn Kanban Board
Accessible drag-and-drop kanban as a shadcn registry item, no dnd library
Tier A · StrongRegistryComponent LibraryBlock Collectionshadcn-kanban-board.com
A single-file kanban board distributed as a shadcn registry item, installed with `npx shadcn@latest add https://shadcn-kanban-board.com/r/kanban.json`. The kanban.tsx file exports roughly 30 named parts — KanbanBoardProvider, KanbanBoard, Column, ColumnHeader/Title/List/Footer, Card, CardTitle/Description/Textarea/ButtonGroup, ColumnSkeleton, KanbanColumnCircle — plus a full accessibility layer with live region, screen-reader instructions, announcements, and a useDndEvents monitor hook. Drag and drop is written in plain React with no dnd-kit or react-dnd; the only runtime deps are Radix Slot, Radix Tooltip, cva, clsx, and tailwind-merge. Eleven column-circle colours ship as oklch CSS variables wired into the shadcn theme, and a second registry item, use-js-loaded.json, guards render until client JS is ready.
npx shadcn@latest add https://shadcn-kanban-board.com/r/kanban.jsonFor an agent
Prefer this over wiring dnd-kit yourself when the app is already on shadcn/ui and the board is a feature rather than the product — you get keyboard reordering and screen-reader announcements for free, which a hand-rolled dnd-kit board almost never has. Install use-js-loaded.json alongside it or the columns flash unstyled before hydration. Two cautions: the registry emits Tailwind v4 oklch variables under @layer base so a v3 project needs them rewritten, and the repo has had no commits since May 2025 — treat it as frozen source you now own, not a dependency that will get fixed upstream.
Why it is here. Most kanban demos ship drag and drop and stop there; this one ships the ARIA live region and announcement plumbing that makes a board usable without a mouse.
Facts
- License
- MIT
- Pricing
- Free, Open source
- Framework
- React, Next.js, Remix
- Styling
- Tailwind CSS v4, CSS custom properties
- Distribution
- shadcn registry, Copy-paste snippet, GitHub repository
- Platform
- Web
- Content type
- Code, Design tokens / theme files
- Agent readiness
- Machine-readable registry item, CLI installable, Copy-paste ready code, Readable open source
- Accessibility
- Keyboard navigable, Screen reader tested, Full ARIA pattern implemented, Built on accessible primitives
- Maturity
- Stable
- GitHub stars
- 255
Components it ships
2 totalHelps you build
1Notable for
- ~30 exported sub-components in one file
- Drag and drop with no dnd library
- Live region + screen-reader announcements built in
- 11 oklch column colours as theme variables
- MIT, but unmaintained since May 2025
Provenance
Verified 2026-08-15. HTTP 200. https://www.shadcn-kanban-board.com/ (WebFetch), https://www.shadcn-kanban-board.com/r/registry.json (curl, parsed), https://www.shadcn-kanban-board.com/r/kanban.json (WebFetch + curl, all file contents and export names extracted), https://github.com/janhesters/shadcn-kanban-board (WebFetch), https://api.github.com/repos/janhesters/shadcn-kanban-board
Also in Component Libraries
6- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- Astryx · Meta's open-source React + StyleX design system, 150+ components and 42 templates
- Chakra UI · 114 accessible React components with a token-driven styling system
- Coss UI · Cal.com's design system: 60 Base UI primitives shipped as a shadcn registry
- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themes
- GPUI Component · 60+ Rust desktop UI components for GPUI, with a 200K-line code editor and charts