Kanban for Solid

Cards sit in columns, one column per stage, and move between them by drag or by keyboard.

Use it when work passes through a few fixed stages and people move it themselves, like a sprint or a hiring pipeline. Items you sort and compare belong in a Table, and one column of grouped rows is a List. In Solid, the board writes its own pointer and key handling, so there is no drag-and-drop package to install, and Ark UI isn't involved in the move.

Installation

Anatomy

KanbanProvider
└── KanbanBoard
    ├── KanbanHeader
    └── KanbanCards
        └── KanbanCard

Usage

import {
  KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanProvider,
} from "@/components/ui/kanban";

const columns = [
  { id: "todo", name: "To Do" },
  { id: "done", name: "Done" },
];

const [tasks, setTasks] = createSignal([
  { column: "todo", id: "1", name: "Write the release notes" },
  { column: "done", id: "2", name: "Rotate the API keys" },
]);

<KanbanProvider columns={columns} onValueChange={setTasks} value={tasks}>
  {columns.map((column) => (
    <KanbanBoard id={column.id} key={column.id}>
      <KanbanHeader>{column.name}</KanbanHeader>
      <KanbanCards>
        {tasks
          .filter((task) => task.column === column.id)
          .map((task) => (
            <KanbanCard id={task.id} key={task.id} name={task.name} />
          ))}
      </KanbanCards>
    </KanbanBoard>
  ))}
</KanbanProvider>

The items are one flat array: each has an id, a name and the column it sits in, and their order in the array is their order in each column. A move hands the whole array back through onValueChange, so the board is always controlled.

Accessibility

Each card is focusable and says how to move it. A polite live region announces every pick-up, step, drop and cancel with the card's name, its column and its position.

Demos

Custom Cards

A roadmap with an owner's avatar, a date range and a Badge on every card, and a colored dot and a count in each header. KanbanCard takes any children in place of its name, and the whole card is still the handle, except for links, buttons and fields inside it, which keep their own clicks. Keep the card short: a board is for scanning stages, and the details belong in a dialog or a page.

Move Events

The line under the board shows what onMoveStart and onMoveEnd report: the card's id, where it came from, and where it went to, which is null when the move was cancelled. Both fire for the pointer and the keyboard. Use them to save a move to your server or to log it, and keep onValueChange for the array itself.

Scrolling

Twelve issues on a board with h-80 on KanbanProvider and min-h-0 on each KanbanBoard, so each column scrolls on its own and the board keeps its height. Drag a card toward a column's top or bottom edge and the column scrolls under it; when the columns are wider than the board, it scrolls sideways the same way. Give the board a height whenever a column can grow past the screen.

FAQ

API Reference