jervis-kanban

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

Features

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

Events

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