Vue 3 kanban board with native drag and drop, keyboard moves, WIP limits and inline add card. v-model board state, Tailwind CSS, dark mode.
by Vueplayv1.0.0Updated 3 hours ago
A production-ready kanban board for task trackers, sprint boards, hiring pipelines and CRMs. Cards move between and within columns with native HTML5 drag and drop, a drop indicator shows exactly where a card will land, and columns show their card count against an optional work-in-progress limit that turns red when exceeded.
Drag and drop alone is not accessible, so every move is also available from the keyboard: focus a card and press Alt + arrow keys, or open the card's action menu (a proper ARIA menu with arrow-key navigation) to move it up, down or to any column. Moves are announced to screen readers and focus follows the card. On touch devices the menu is the reliable way to move cards.
Bind the board with v-model and listen to change for a typed event (move, add or remove with from/to positions) to persist changes to your API. Card data supports tags, assignee, due date and priority out of the box, and the card slot lets you render your own card body.
The source is included with the purchase.
Buy it once and use it in unlimited projects: remix it in the Studio, clone the repo, or install it with npm. Props and usage are documented below.
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | KanbanColumn[] | undefined (sample sprint board) | Board state for v-model. Each column has id, title, optional wipLimit and cards (id, title, description, tags, assignee, due, priority). When unbound the board manages its own state. |
| allowAdd | boolean | true | Show an Add card button and inline form at the bottom of each column. |
| allowRemove | boolean | true | Include Delete card in each card's action menu. |
| label | string | 'Project board' | Accessible name for the board region. |
| Event | Payload | Description |
|---|---|---|
| update:modelValue | (board: KanbanColumn[]) | New board state after any move, add or remove. |
| change | (change: KanbanChange) | What changed: { type: 'move', card, from, to } | { type: 'add', card, to } | { type: 'remove', card, from }. Positions are { columnId, index }. |
| card-click | (card: KanbanCard, columnId: string) | A card was clicked or Enter was pressed on it, e.g. to open a detail panel. |
| Slot | Description |
|---|---|
| card | Custom card body. Receives { card, column }. The drag behaviour and action menu stay in place. |
FreeComponent · Data display
A flexible board component built for smooth panning, zooming with a grid layout. It supports both mouse and touch input, making it a great fit for whiteboards, diagram tools, mind maps, and workflow editors. Designed for performance and responsiveness, it delivers a fluid experience on desktop and mobile with intuitive gestures and real-time interaction on a scalable canvas.
FreeComponent · Data display
Vertical changelog timeline for Vue 3 with version badges, dated releases, typed change tags and filter chips. Built with Tailwind CSS, dark mode.
FreeComponent · Data display
Vue 3 KPI stat cards with trend deltas and tiny inline SVG sparklines, no chart library needed. Tailwind CSS, dark mode, typed props.
FreeComponent · Data display
Vue 3 team section with a responsive grid of member cards: initials avatars, role, short bio, location and social links. Tailwind CSS, dark mode.