jervis-kanban

A full-featured Kanban board component library for Vue 2 & Vue 3

Documentation · Getting Started · API Reference

Zero external dependencies (except vue-demi for cross-version compatibility). Pure CSS styling with 30+ CSS custom properties for full theming control.

Features

| Feature | Description | | --------------- | --------------------------------------------------------------- | | Drag & Drop | Cards between columns and swimlanes (native HTML5 API) | | Columns | Add, edit, delete, collapse, reorder, WIP limits | | Cards | Full CRUD — title, description, labels, assignees, metadata | | Swimlanes | Horizontal lanes to group cards, collapsible | | v-model | Two-way binding on the entire board state | | Slots | Customize every part — card, column title, actions, empty state | | RTL | Built-in right-to-left support | | Theming | 30+ CSS custom properties | | TypeScript | Fully typed API with exported interfaces |

Installation

npm install jervis-kanban

Quick Start

Global Plugin

import { createApp } from "vue";
import App from "./App.vue";
import JervisKanban from "jervis-kanban";
import "jervis-kanban/dist/style.css";

createApp(App).use(JervisKanban).mount("#app");

Tree-Shakable Import

<script setup lang="ts">
import { ref } from "vue";
import { KanbanBoard } from "jervis-kanban";
import "jervis-kanban/dist/style.css";
import type { KanbanBoardType } from "jervis-kanban";

const board = ref<KanbanBoardType>({
  columns: [
    { id: "1", title: "To Do", order: 0, color: "#ef4444" },
    { id: "2", title: "In Progress", order: 1, color: "#f59e0b" },
    { id: "3", title: "Done", order: 2, color: "#22c55e" },
  ],
  cards: [
    { id: "c1", title: "Design mockups", columnId: "1", order: 0 },
    {
      id: "c2",
      title: "Build API",
      columnId: "2",
      order: 0,
      labels: [{ id: "l1", text: "Backend", color: "#6366f1" }],
    },
  ],
  swimlanes: [],
});
</script>

<template>
  <KanbanBoard v-model="board" @card-move="handleMove" />
</template>

Full documentation → jervis-kanban

API Overview

Props

| Prop | Type | Default | Description | | ----------------- | ----------------- | --------- | ------------------------------------------ | | v-model | KanbanBoardType | {} | Board state | | canAddColumn | boolean | true | Show add column button | | canEditColumn | boolean | true | Allow column editing | | canDeleteColumn | boolean | true | Allow column deletion | | canAddCard | boolean | true | Show add card button | | canEditCard | boolean | true | Allow card editing | | canDeleteCard | boolean | true | Allow card deletion | | canAddSwimlane | boolean | true | Show add swimlane button | | forwardOnly | boolean | false | Restrict cards to forward-only movement | | columnTitleKey | string | "title" | Which column field to use as display title |

Events

| Event | Payload | | ------------------------------------------------------------------- | --------------------- | | card-click | KanbanCard | | card-move | CardMoveEvent | | card-create / card-update / card-delete | { cardId, ... } | | column-move / column-create / column-update / column-delete | { columnId, ... } | | swimlane-create / swimlane-update / swimlane-delete | { swimlaneId, ... } |

Slots

board-header · column-header · add-column · card · column-title · column-actions · add-card · empty · card-form · column-form · swimlane-form

All column slots expose action functions (addCard, editColumn, deleteColumn, toggleCollapse) so you can call any action from any slot.

Form modal slots (card-form, column-form, swimlane-form) let you replace the built-in modals with your own custom forms. They expose isOpen, isEditing, save, and cancel props.

Theming

.my-board {
  --jk-color-bg: #0f172a;
  --jk-color-surface: #1e293b;
  --jk-color-text: #f8fafc;
  --jk-color-primary: #818cf8;
  --jk-column-width: 320px;
}

See full theming guide for all 30+ CSS variables.

License

MIT