Kanban

Headless board of movable items in columns. Each column binds its items with v-model; items move by pointer drag or by keyboard, and every move writes the new order back.

Usage

Bind each column’s item array with v-model and render items from the column’s items slot prop. Style state through data attributes — data-state on items, data-over on lists.

<script setup lang="ts">
  import { Kanban } from '@vuetify/v0'
  import { ref } from 'vue'

  interface Card {
    id: number
    title: string
  }

  const columns = [
    { id: 'todo', label: 'Todo' },
    { id: 'doing', label: 'Doing' },
    { id: 'done', label: 'Done' },
  ]

  const board = ref<Record<string, Card[]>>({
    todo: [
      { id: 1, title: 'Write the spec' },
      { id: 2, title: 'Sketch the layout' },
      { id: 3, title: 'Pick a palette' },
    ],
    doing: [
      { id: 4, title: 'Build the board' },
    ],
    done: [
      { id: 5, title: 'Kickoff meeting' },
    ],
  })
</script>

<template>
  <Kanban.Root class="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3" label="Project board">
    <Kanban.Column
      v-for="column in columns"
      :id="column.id"
      :key="column.id"
      v-slot="{ items }"
      v-model="board[column.id]"
      class="flex flex-col gap-2 rounded-lg border border-divider bg-surface p-2"
      :label="column.label"
    >
      <div class="flex items-center justify-between px-1 text-sm font-semibold">
        {{ column.label }}
        <span class="text-xs font-normal text-on-surface-variant">{{ items.length }}</span>
      </div>

      <Kanban.List class="flex min-h-24 flex-col gap-2 rounded-md p-1 data-[over]:bg-surface-tint data-[target]:bg-surface-tint">
        <Kanban.Item
          v-for="card in items"
          :key="card.id"
          class="cursor-grab touch-none select-none rounded-md border-2 border-divider bg-surface px-3 py-2 data-[drop=after]:border-b-primary data-[drop=before]:border-t-primary text-sm outline-none focus-visible:ring-2 focus-visible:ring-primary data-[state=dragging]:opacity-40 data-[state=grabbed]:border-primary data-[state=grabbed]:ring-2 data-[state=grabbed]:ring-primary"
          :label="card.title"
          :value="card"
        >
          {{ card.title }}
        </Kanban.Item>
      </Kanban.List>
    </Kanban.Column>

    <Kanban.Instructions class="sr-only" />
    <Kanban.LiveRegion class="sr-only" />
  </Kanban.Root>
</template>

Anatomy

<script setup lang="ts">
  import { Kanban } from '@vuetify/v0'
</script>

<template>
  <Kanban.Root>
    <Kanban.Column>
      <Kanban.List>
        <Kanban.Item />
      </Kanban.List>
    </Kanban.Column>

    <Kanban.Instructions />

    <Kanban.LiveRegion />
  </Kanban.Root>
</template>

Examples

Recipes

Item identity

The value bound on Kanban.Item is the identity the board tracks. It must equal (===) an entry of the parent column’s v-model array, and every value on the board must be unique. Objects work by reference; strings and numbers work when they are unique. Key the v-for by a stable id.

<template>
  <Kanban.Column v-slot="{ items }" v-model="todo" label="Todo">
    <Kanban.List>
      <Kanban.Item
        v-for="card in items"
        :key="card.id"
        :label="card.title"
        :value="card"
      >
        {{ card.title }}
      </Kanban.Item>
    </Kanban.List>
  </Kanban.Column>
</template>

Changing the board from code

The bound arrays are the source of truth. Push, splice, or replace them and the board reconciles — new values register, removed values unregister, and a reordered array reorders the column. There is no imperative move API on the component; moving an item between two arrays yourself is a move.

todo.value.push({ id: 6, title: 'New card' })
todo.value = todo.value.filter(card => card.id !== 2)

Swimlanes

orientation="vertical" stacks columns vertically and lays items out horizontally. Keyboard arrows follow the layout: Left and Right move within a column, Up and Down move between columns. Lists expose data-orientation for styling.

Keyboard drop preview

While an item is picked up, the arrow keys move a drop target instead of the item, and the board is not touched until Space or Enter commits one move. Style the pending target from data attributes: data-target on the target Kanban.Column and Kanban.List, and data-drop="before" on the item the dropped one would land before — or data-drop="after" on the last item when it would land at the end. An empty target list carries only data-target.

<template>
  <Kanban.List class="data-[target]:bg-surface-tint">
    <Kanban.Item
      v-for="card in items"
      :key="card.id"
      class="data-[drop=after]:border-b-primary data-[drop=before]:border-t-primary"
      :value="card"
    >
      {{ card.title }}
    </Kanban.Item>
  </Kanban.List>
</template>

Disabling

disabled on Kanban.Root freezes the whole board, on Kanban.Column freezes moves into, out of, and within that column, and on Kanban.Item pins one item. Disabled items drop out of the tab order.

Accessibility

Moves never require a pointer. Each item is focusable and keyboard-movable, every move is announced through Kanban.LiveRegion, and Kanban.Instructions tells screen-reader users how to start. Render both, visually hidden — without them moves still work but are silent.

Keyboard

Each target step is announced. Focus follows the item: when a drop re-renders it in another column, the new element takes focus.

ARIA

Data Attributes

FAQ