Kanban

Accessible, unstyled Kanban board: columns of cards with roving keyboard navigation and pointer + keyboard drag and drop (built on the shared drag-and-drop foundation), WIP limits, veto hooks, and announcements.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Kanban, KanbanCard, KanbanColumn } from "@vizejs/ui/kanban";

Or copy the source into your project with vize lib pull kanban (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Sprint board bound with v-model: cards move between columns by pointer or keyboard, with a WIP limit. -->
<script setup lang="ts">
import { ref } from "vue";

import { Kanban, type KanbanBoard, type KanbanColumnDefinition } from "@vizejs/ui/kanban";

type Lane = "todo" | "doing" | "done";

interface Task {
  readonly id: string;
  readonly title: string;
}

const columns: readonly KanbanColumnDefinition<Lane>[] = [
  { id: "todo", title: "To do" },
  { id: "doing", title: "In progress", limit: 2 },
  { id: "done", title: "Done" },
];

const board = ref<KanbanBoard<Task, Lane>>({
  todo: [
    { id: "t1", title: "Write release notes" },
    { id: "t2", title: "Audit color contrast" },
  ],
  doing: [{ id: "t3", title: "Fix date picker focus" }],
  done: [{ id: "t4", title: "Upgrade to Vue 3.5" }],
});
</script>

<template>
  <Kanban
    v-model="board"
    aria-label="Sprint board"
    :columns
    :get-card-key="(task: Task) => task.id"
    :get-card-label="(task: Task) => task.title"
  >
    <template #column="{ column, cards, full }">
      {{ column.title }} ({{ cards.length
      }}{{ column.limit === undefined ? "" : ` of ${column.limit}` }})
      <template v-if="full"> · full</template>
    </template>
    <template #card="{ card }">{{ card.title }}</template>
    <template #empty>No tasks</template>
  </Kanban>
</template>

API

Kanban<Card, ColumnId extends string>

Source: src/families/data/kanban/kanban.vue

Props

Events

Slots

Exposed

KanbanCard

Source: src/families/data/kanban/kanban-card.vue

Props

Slots

KanbanColumn

Source: src/families/data/kanban/kanban-column.vue

Props

Slots

Behavior

@vizejs/ui/kanban renders a board of labelled columns (kanban-column.vue) holding focusable cards (kanban-card.vue); kanban.vue is the generic root (Card, ColumnId). Pointer and keyboard moves use the shared drag-and-drop foundation (cards are sources and "before" targets; column lists are "end" targets). Every row is proven by the named test in kanban.test.ts or kanban-ssr.test.ts.