Compound API
Composable parts
Assemble Root, Content, Column, ColumnHeader, ColumnContent, CardAdd, DragPreview and more in your own template. No hidden DOM, no monolithic config.
PrimeUI
TaskBoard.
A headless, compound kanban board for organizing work across columns, swimlanes, and phases. Drag & drop, WIP limits, transition rules, keyboard navigation, and a fully template-driven UI, all wired into a single zero-dependency engine.
Loading board…
Two real Vue TaskBoard products running in the page. Switch between a product roadmap and a field-operations swimlane board to see the same compound runtime handle dense cards, editors, filters, right-click menu payloads, and grouped work.
Architecture
A board built from parts you can replace.
TaskBoard is shipped as a tree of compound components. Every visual surface (column, header, card, footer, overlay) is a slot you can swap, wrap, or extend without forking the engine.
Headless Engine
Logic without the look
All drag, selection, validation, and workflow logic lives below the Vue surface, so templates stay flexible while board behavior remains consistent.
Data Agnostic
Your shape, your fields
Point dataKey and columnField at any field. Bring your own task model with id, ticketId, or jiraKey. The board adapts instead of forcing a schema.
Vue Runtime
Core logic, Vue surfaces
A thin Vue layer connects the headless engine to reactive compound parts. The app owns visible surfaces while TaskBoard owns movement, selection, focus, and workflow state.
Interaction
Pointer, keyboard, and touch. All first-class.
Built for the way real teams move work through a board. Multi-select, drag-and-drop across swimlanes, full keyboard navigation, and right-click payloads for app-owned menus.
Drag & Drop
Reorder, move, drop
Cross-column and cross-swimlane drags with live drop indicators, drag previews, snap-to-slot, and pointer-based ergonomics on desktop and touch devices.
Selection
Single, range, and multi
Click to select, shift-click for range, ctrl/cmd-click for additive picks. Selection state surfaces to your handlers for bulk move, delete, or edit flows.
Keyboard
Power-user navigation
Arrow keys to move focus, space to grab, enter to open, esc to cancel. Every action is reachable without a mouse, with full ARIA roles attached.
Context Menu
Right-click cards
TaskBoard emits the active card, column, position, and native event so your app can open PrimeVue ContextMenu, a drawer, or a custom action surface.
Workflow
Rules that protect the process.
Encode the policies that matter. What can move where, who can move it, when it requires confirmation, and how many cards a stage can hold at once.
Transition Rules
Allowed paths only
Declare which transitions between columns are valid. Invalid drops are blocked at the engine layer, so there are no half-states and no error toasts after the fact.
WIP Limits
Cap your in-flight work
Set per-column or per-swimlane work-in-progress limits. The engine prevents overflow drops and exposes the limit state for header chrome.
Permissions
Role-aware boards
Bind per-card and per-column permissions to your auth model. Read-only viewers, restricted editors, and admin overrides, all driven by your data.
Confirm & Cancel
Guarded transitions
Wrap a column move in a confirm dialog, an async approval, or a custom validator. Cancel a drop mid-flight without rolling back state by hand.
Layout
From a single column to thousands of cards.
Lay out the board the way the work actually flows. Stack swimlanes, group columns into phases, lock structural columns, and virtualize when the dataset stops fitting on screen.
Columns
Reorderable, collapsible
Drag columns to reorder, click to collapse, lock in place to prevent accidental moves. The column model is just data that you own and mutate.
Swimlanes
Group by anything
Split rows by assignee, sprint, epic, priority, or any field. Swimlanes can collapse independently and respect their own drop validation.
Column Groups
Phases & stages
Wrap related columns into a labeled phase header. Group-level WIP limits and metadata flow naturally to your column header slots.
Virtual Scroll
Tens of thousands of cards
Per-column virtualization keeps the DOM small even at extreme dataset sizes, with smooth drag handoff between virtualized and visible rows.
Editing & Data
Edit, persist, export.
A complete editing surface, from column-scoped creation to app-owned dialogs, sitting on top of a state model that serializes, undoes, and round-trips cleanly.
App-owned UI
Bring your own dialog
Open a PrimeVue Dialog, Drawer, or Sheet from card activation and save through the board API. Your form, validation, and async flow stay in your app.
CRUD
Add, update, delete
Programmatic and inline create flows, with column-scoped add buttons, drag-to-archive, and granular events for every mutation the board emits.
Undo / Redo
Time-travel built in
A command stack records every drag, edit, and structural change. Wire ctrl+z / ctrl+shift+z to step backward and forward through state.
Filter & Sort
Search, refine, slice
Keep queries in your app, pass the visible items to TaskBoard, and preserve movement, selection, focus, and virtual scrolling around the result set.
Export
JSON, CSV, print
Serialize the entire board, drop a single column to CSV, or render a print-ready board snapshot for offline review and reporting.
State
Save, load, restore
Snapshot board UI state (column order, collapse state, selection, focus) to your store, your URL, or localStorage in a single call.
Customization
Looks like your product, not ours.
Start with PrimeOne or Tailwind UI parts, then replace the surfaces that need to carry your product language. Cards, columns, overlays, toolbars, and drop states all stay app-owned.
Slots
Replace anything
Card, column header, footer, empty state, drag preview, and drop indicator are replaceable surfaces. Menus and dialogs stay app-owned through emitted payloads.
UI Parts
Two ready starting points
Copy PrimeOne parts for a polished default UI, or Tailwind parts when the product already owns utility-first styling. Both stay editable in your app.
Theme Tokens
CSS variables, top to bottom
Every color, radius, gap, and spacing value flows through CSS variables. Theme the board by overriding tokens, no preprocessor build step required.
i18n & RTL
Locale-aware out of the box
Pluggable locale strings for every label and message, plus full right-to-left layout flipping for the entire board, including drag and selection.
Ready to wire it in?
Drop the package into your Vue project, import the styles, and assemble your first board in under five minutes.