DEV Community

Olga T.
Olga T.

Posted on

Open-Source Task Board for React, Svelte & Vue

#webdev #javascript #react #kanban

Kanban boards are a simple way to visualize work as it moves through stages. You’ll find them in project management tools, bug trackers, sales pipelines, agile planners, and internal dashboards — basically anywhere you need to add, edit and move tasks through a workflow.

If you’re building that kind of UI, you usually need drag-and-drop, editing, filtering, sorting, grouping, and solid performance when the number of tasks grows.

We've built SVAR Kanban, a framework-native, ready-to-use UI component that helps you add a working task board without building everything from scratch. The component is available in 3 versions:

SVAR Kanban - Preview

The component provides the familiar task board UI and allows users to add tasks, drag-and-drop tasks between columns, edit, group, and sort the tasks, if needed. It handles backend updates with pre-made REST helper and uses virtualization to handle large number of tasks efficiently.

What you get out of the box

SVAR Kanban comes with all the key features needed for a real task board:

  • Drag-and-drop between columns and within the same column
  • Customizable column layout with scroll and flexible width options
  • Card details include priority, tags, progress, deadlines, avatars, and more
  • Built-in editor for task details (modal or sidebar)
  • Card menu for user actions like edit, duplicate, and delete.
  • Sorting & filtering for quick search of a particular task
  • Grouping that lets you view the same cards by a different dimension — priority, assignee, status — without rebuilding the board
  • Light and dark themes and easy styling with CSS
  • Localization support
  • Virtualization for large boards

How to add a kanban board in your app

Install the SVAR Kanban package for your framework:

npm install @svar-ui/react-kanban
npm install @svar-ui/svelte-kanban
npm install @svar-ui/vue-kanban
Enter fullscreen mode Exit fullscreen mode

Then, render the board inside the Willow wrapper, which provides the CSS variables the component needs to style itself. Here is a React-based example:

import { Kanban, Willow } from "@svar-ui/react-kanban";

const columns = [
  { id: "backlog", label: "Backlog" },
  { id: "progress", label: "In Progress" },
  { id: "done", label: "Done" },
];

const cards = [
  { id: 1, label: "Fix login bug", column: "backlog", priority: 2 },
  { id: 2, label: "Write tests", column: "progress", priority: 1 },
];

function App() {
  return (
    <Willow>
      <Kanban cards={cards} columns={columns} />
    </Willow>
  );
}
Enter fullscreen mode Exit fullscreen mode

The Willow wrapper is required because it injects the CSS variables used by the board. Each card needs an id and a column value that matches one of your column IDs.

Adding a task editor

The board handles card updates through its API, so you can create, update, move, duplicate, and delete cards without directly mutating the source array.

If you want editing, mount the Editor next to the board and connect it through the init callback:

import { useState } from "react";
import { Kanban, Editor, Willow } from "@svar-ui/react-kanban";

function App() {
  const [api, setApi] = useState(null);

  return (
    <Willow>
      <Kanban init={setApi} cards={cards} columns={columns} />
      {api && <Editor api={api} />}
    </Willow>
  );
}
Enter fullscreen mode Exit fullscreen mode

SVAR Kanban PRO

The core is open-source and covers everything above. SVAR Kanban PRO adds:

  • Undo/redo support
  • Export to PDF/PNG/XLSX
  • Dynamic column loading for larger boards

Free trial is available so you can test the PRO features before making a decision.

Final thoughts

If you need a Kanban board in React, Svelte or Vue app, SVAR Kanban gives you a practical starting point: open-source at the core, quick to integrate, and flexible enough for real workflows.

🛠️ Find all versions of SVAR Kanban on GitHub: React • Svelte • Vue

Top comments (0)