Kanban Libraries: 11 Options for Building a Board in Code

The Answer

Kanban libraries split into three groups, and picking from the wrong group is what costs you the fortnight. Drag-and-drop primitives such as dnd-kit, Pragmatic drag and drop, SortableJS and the Angular CDK move an element from one list into another and leave the board itself to you. Finished board components such as SVAR Kanban, Kibo UI kanban, DHTMLX Kanban and Syncfusion Kanban arrive drawn, with card editors and swimlanes already wired. Mermaid kanban sits outside both, a diagram syntax that draws a picture of a board with no state and nothing to drag. Every project below was checked against its own repository or vendor documentation while writing this, because two of the most linked options here are archived and a third has not shipped since 2020.

What Counts as a Kanban Library?

A kanban library is any package that hands you part of a board so you do not write it from scratch. Deliberately wide. The packages people find under this search do wildly different amounts of the job, and vendors selling one will call it a JavaScript kanban widget or a kanban component while meaning the same thing.

The main components of a kanban board in code are short to list. A row of columns, a stack of cards in each one, and a reliable way to move a card between two of them with a mouse, a finger and a keyboard. That last part is where the difficulty lives, which is why so many packages below never say the word kanban in their documentation.

Decide which of the three kinds you need before comparing a single API, because swapping one for another later means starting again.

Kanban Libraries Compared

Library	Works with	Licence	Latest release checked	Kind
dnd-kit	React	MIT	@dnd-kit/core 6.3.1, Dec 2024	Primitive
Pragmatic drag and drop	Any framework	Apache 2.0	3.1.0, Aug 2026	Primitive
@hello-pangea/dnd	React	Apache 2.0	18.0.1, Feb 2025	Primitive
SortableJS	Plain JS, wrappers	MIT	1.15.7, Feb 2026	Primitive
svelte-dnd-action	Svelte	MIT	0.9.79, Aug 2026	Primitive
Angular CDK drag and drop	Angular	MIT	@angular/cdk 22.1.6, Sep 2026	Primitive
SVAR Kanban	Svelte, React, Vue	MIT, plus a paid PRO tier	2.6.0, Jun 2026	Board component
Kibo UI kanban	React with shadcn/ui	MIT	Registry component, repo active	Board component
DHTMLX Kanban	Plain JS, React, Angular, Vue, Svelte	GPL v2 or commercial	Commercial product	Board component
Syncfusion Kanban	JavaScript, React, Angular, Vue, Blazor	Commercial, community licence	Commercial product	Board component
Mermaid kanban	Anything that renders Mermaid	MIT	mermaid 12.0.0, Sep 2026	Diagram
jKanban	Plain JS	Apache 2.0	1.3.1, Dec 2020	Stale, skip
@asseinfo/react-kanban	React	MIT	2.2.0, Sep 2021, repo archived	Archived, skip

Licences come from each project’s LICENSE file or its npm metadata, release dates from the npm registry, all read in September 2026. Archive status is the field most likely to have flipped since.

dnd-kit: The React Toolkit Most Boards Start From

dnd-kit is the drag-and-drop toolkit most React kanban boards are built on, MIT licensed, roughly 17.6k stars. Not archived, and its main branch was still taking commits in September 2026. Its sortable preset covers the fiddly part of a board, reordering inside a list and moving between two connected lists, plus a keyboard sensor so a card moves without a pointer. TypeScript definitions ship in the package.

Check the version numbers first. The stable line, @dnd-kit/core 6.3.1 and @dnd-kit/sortable 10.0.0, went out in December 2024, while the newer framework-split packages such as @dnd-kit/react are still on 0.x, with 0.5.0 in June 2026. Most projects therefore sit on a package that has not shipped in over a year while its successor is still pre-1.0, so pin your versions and read the release notes before any bump.

Pragmatic Drag and Drop: What Atlassian Built After react-beautiful-dnd

Pragmatic drag and drop is Atlassian’s current drag-and-drop library, Apache 2.0 licensed, with @atlaskit/pragmatic-drag-and-drop 3.1.0 published in August 2026. Its README describes a low-level toolchain over the browser’s built-in drag and drop, usable with any view layer, naming React, Svelte, Vue and Angular, and says it powers Trello, Jira and Confluence. About 12.8k stars, and commits landing in September 2026.

Most people arrive here by accident, searching for react-beautiful-dnd, the library half the kanban tutorials still use, and landing on a banner saying the repository was archived by its owner on 18 August 2025 and that the package is deprecated on npm. The archived README points readers here.

Moving across is not a port, though. Being low level, it hands you far more of the interaction to build, so a board written against react-beautiful-dnd comes out the other side as a rewrite.

@hello-pangea/dnd: The Maintained Fork of react-beautiful-dnd

@hello-pangea/dnd is the community fork of react-beautiful-dnd and the shortest path off the archived original. Apache 2.0, around 4k stars, 18.0.1 published in February 2025, commits still landing on main during 2026. Not archived. The README says plainly that Atlassian is no longer involved with the project.

It keeps the original API, which is the entire reason to pick it. A board already on react-beautiful-dnd needs a change of import path rather than a redesign, and that puts you back on something that gets patched. Starting fresh, the choice against dnd-kit is whether you want a list-shaped abstraction handed over or a toolkit you assemble.

SortableJS: The Vanilla JavaScript Kanban Workhorse

SortableJS is the JavaScript kanban option for people who are not in a framework at all. MIT licensed, around 31.2k stars, version 1.15.7 published in February 2026, and its own description says it needs no jQuery and no framework. Its group option turns two lists into a board, letting each accept the other’s items with a line of configuration.

Which also settles the jQuery kanban board question. You do not need jQuery. Plain HTML5 elements plus SortableJS is a few dozen lines and your own persistence.

Vue teams should check the wrapper first. vuedraggable sits at 2.24.3 for Vue 2, published in October 2020, and the Vue 3 line under the next tag is 4.1.0 from August 2021. The vue.draggable.next repository has taken no commit on its master branch since. Plenty of people run it happily, but SVAR Kanban below is the more current Vue answer.

svelte-dnd-action: The Svelte Board Option

svelte-dnd-action is the Svelte kanban starting point, an action-based drag-and-drop container, MIT licensed, around 2.1k stars. Version 0.9.79 was published in August 2026 and the repository was committed to the same month, one of the most current things here. The README covers Svelte 5, noting it prefers onconsider and onfinalize over the older event syntax while both still work.

It is an action rather than a component, so your markup and your store stay yours. Still 0.x after years of releases, which reads as a maintainer being careful rather than a project going quiet.

Angular CDK Drag and Drop: Connected Lists With No New Dependency

The Angular CDK drag and drop module is the Angular kanban board answer, already in your dependency tree if you use Angular Material. It comes from @angular/cdk/drag-drop, the Angular components repository is MIT licensed, and @angular/cdk 22.1.6 was published in September 2026.

The pieces map onto a board almost too neatly. cdkDrag marks a card, cdkDropList marks a column, cdkDropListConnectedTo wires columns together so cards can cross, and the helpers moveItemInArray and transferArrayItem update your arrays when a drop lands. It has no opinion about card contents, column names or storage. All of that is yours, which holds for every primitive here.

SVAR Kanban: A Finished Board for Svelte, React and Vue

SVAR Kanban is a finished board component rather than a movement primitive, published for three frameworks as @svar-ui/svelte-kanban, @svar-ui/react-kanban and @svar-ui/vue-kanban, all on 2.6.0 as of June 2026. The vendor states the open-source edition is MIT licensed and free in personal and commercial projects, with a paid PRO edition for larger deployments.

Closest thing here to installing a board and being finished, and what I would reach for on Vue 3 given the state of the SortableJS wrapper. The repository is young and thinly starred next to the drag-and-drop libraries above, so fewer answers wait when something breaks at eleven at night.

Kibo UI Kanban: The shadcn Answer

There is no official shadcn kanban component. The shadcn/ui documentation lists dozens of components and Kanban is not among them, sending people to the registry directory for community-maintained alternatives instead.

Kibo UI is the registry filling that gap. Its kanban component installs with npx kibo-ui add kanban, its docs credit dnd-kit as the drag-and-drop layer underneath, and the repository is MIT licensed with around 3.9k stars and commits during 2026. Following the shadcn model, the component lands in your own source tree rather than node_modules, which is handy if you plan to edit it and means nobody upstream will ever patch your copy.

Mermaid Kanban: A Board You Write as Text

Mermaid kanban syntax draws a board from plain text, which suits documentation and rules out anything interactive. Mermaid is MIT licensed, 12.0.0 was published on 10 September 2026, and the kanban diagram arrived back in release 11.4.0, whose notes describe it as adding a Kanban board as a new diagram type. A host still pinned to an older Mermaid will not render one. Version 12.0.0 is a breaking release that requires ES2024 and Safari 17.4 or newer, and its notes warn that existing diagrams re-lay out and recolour unless you pin the old layout and theme in config.

The syntax is short. A diagram opens with the kanban keyword, a column is written as columnId[Column Title], and a task is taskId[Task Description] indented underneath its column.

kanban
  todo[Todo]
    task1[Rewrite the CSV importer]
  doing[In progress]
    task2[Fix the flaky login test]@{ ticket: MC-2037, assigned: 'nathan', priority: 'High' }
  done[Done]
    task3[Ship the release notes]

There is no section keyword here. Columns do that job, and the metadata hangs off a task with the @{ ... } syntax, where the documented keys are assigned, ticket and priority, and priority accepts 'Very High', 'High', 'Low' and 'Very Low'. One configuration option exists, ticketBaseUrl, and the string #TICKET# inside it gets swapped for the task’s ticket value to build a working link out to your tracker.

You get a picture and nothing else, no drag and no storage, which is plenty for a board that lives in a README and changes when somebody edits the file.

DHTMLX Kanban and Syncfusion Kanban: The Commercial Suites

DHTMLX Kanban and Syncfusion Kanban sit at the commercial end, both handing you a working board with features an in-house build takes months to reach. DHTMLX says its component works with popular frameworks including React, Angular, Vue and Svelte, and that the open source version is distributed under the GPL v2.0 license, free of charge only when your own project is GPL-compatible. Otherwise you are buying a licence, and prices move often enough that the vendor’s page is the only place to read them.

Syncfusion lists its Kanban control for JavaScript, React, Angular, Vue and Blazor, with swimlanes and work in progress limits documented as built-in features. There is a free community licence too. Its page limits that to organisations with less than $1 million USD in annual gross revenue, five or fewer developers and ten or fewer total employees. On Blazor or another .NET framework, the commercial suites are where the ready-made kanban components live.

jKanban and react-kanban: Two You Will Find and Should Skip

jKanban and react-kanban both rank well and look usable enough. Neither has moved in years. jKanban is an Apache 2.0 vanilla JavaScript plugin with around 1.2k stars, not archived, which is why it keeps getting recommended, but the last commit on its master branch landed in December 2021 and npm shows 1.3.1 from December 2020.

react-kanban is the clearer case. The repository was archived by its owner on 8 October 2022, its README opens by declaring the project deprecated and no longer maintained, and the last npm release of @asseinfo/react-kanban was 2.2.0 in September 2021. Its earlier name, @lourenci/react-kanban, is deprecated on npm with a note that the package moved to the newer scope.

Both still run. When the next React major or a browser change breaks one, there is nobody left to file the issue with.

What a Kanban Library Will Not Give You

Every drag-and-drop library above draws columns and cards and moves one into the other. None of them makes those cards mean anything, and that gap is where board projects overrun.

Storage and an API come first. Then WIP limits, with a count on the column header that changes colour when somebody goes over it, the one feature separating a task board from a kanban system. Swimlanes. Cycle time and ageing work, which means recording every column transition from day one rather than bolting analytics on afterwards. Permissions. And the moment two people open the board at once, an update path between them.

I have watched this go the same way more than once. The prototype convinces everyone in an afternoon, and then the schedule fills with conflict resolution on a card two browsers moved at once.

So ask whether the board is your product or a feature you need to exist. If it is the second, buying is usually cheaper, and this guide compares the hosted tools separately. Kanbanee is one of them and I work on it, which is exactly why I will say that it has no public API, no realtime sync, and column dragging that works on desktop only. Anyone needing to script their board should rule it out. Its WIP limits are soft and off by default, the free plan gives two boards you own with unlimited members, and Pro is $6 per month or $48 a year. Plenty of readers here have a requirement that rules all of that out.

FAQ

Which kanban library should I use with React?

For a new React board, dnd-kit is the default, and Pragmatic drag and drop the alternative if you want something framework agnostic and actively released. Migrating an old board off react-beautiful-dnd, use @hello-pangea/dnd, because the API is unchanged. Want a board rather than the parts? Kibo UI’s kanban component or SVAR Kanban’s React package gets you there faster.

Is there an official shadcn kanban component?

No. The shadcn/ui component documentation has no Kanban entry, and it points people to the registry directory for community-maintained components. Kibo UI publishes one that installs through the same style of CLI command and uses dnd-kit underneath.

What is the Mermaid kanban syntax?

A Mermaid kanban diagram opens with the kanban keyword. Columns are written as columnId[Column Title], tasks as taskId[Task Description] indented under their column, and metadata attaches with @{ ... } using the assigned, ticket and priority keys. Added in Mermaid 11.4.0.

Can I still build a kanban board with jQuery?

You can, though jQuery is not needed. SortableJS handles the drag-and-drop on plain DOM elements with no framework and no jQuery dependency, and its group option connects two lists so cards can cross. Most jQuery kanban board tutorials predate that.

Do any of these libraries include WIP limits?

Among the open-source packages, no. Drag-and-drop primitives have no concept of a column, let alone a cap on one, so counting cards and colouring the header is code you write. Syncfusion documents work in progress limits as a built-in feature of its commercial Kanban control.

Is react-beautiful-dnd still safe to use?

It still runs, but the repository was archived on 18 August 2025 and the package is deprecated on npm, so nothing will be fixed. Move to @hello-pangea/dnd for a same-API swap, or to Pragmatic drag and drop if you will rewrite the interaction layer.