Angular Kanban Board Component | ng-hub-ui-board
Angular Kanban board component with drag and drop, custom card templates, column workflows and CSS variables for business dashboards.
Last updated Aug 17, 2026
Overview
Why teams search for this library
This Angular board component helps you ship Kanban-style workflows with drag and drop, flexible templates and scalable interaction patterns for real business tooling.
Install
npm install ng-hub-ui-boardJump to
Ideal for
- task boards
- pipeline tracking
- CRM workflows
- operations dashboards
About board
ng-hub-ui-board is designed for Angular products that need more than a static list: task tracking, CRM pipelines, support workflows or internal operations dashboards. It keeps card rendering flexible while preserving a consistent board interaction model.
Feature guides
Basic Usage
Fundamental board features
Examples:
Basic Board Example
Basic Board Example
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Interactions
User interaction capabilities
Examples:
Card Drag & Drop
Card Drag & Drop
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Event: None
Column Reordering
Column Reordering
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
Card Click Event
Card Click Event
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
Board Events
Board Events
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
Advanced Features
Scrolling and advanced behavior
Examples:
Infinite Scroll
Infinite Scroll
To Do
Research
Analyze requirements
Design
Create UI mockups
Scroll Item 1
Scroll to see more
Scroll Item 2
Scroll to see more
Scroll Item 3
Scroll to see more
Scroll Item 4
Scroll to see more
Scroll Item 5
Scroll to see more
Scroll Item 6
Scroll to see more
Scroll Item 7
Scroll to see more
Scroll Item 8
Scroll to see more
Scroll Item 9
Scroll to see more
Scroll Item 10
Scroll to see more
Scroll Item 11
Scroll to see more
Scroll Item 12
Scroll to see more
Scroll Item 13
Scroll to see more
Scroll Item 14
Scroll to see more
Scroll Item 15
Scroll to see more
Scroll Item 16
Scroll to see more
Scroll Item 17
Scroll to see more
Scroll Item 18
Scroll to see more
Scroll Item 19
Scroll to see more
Scroll Item 20
Scroll to see more
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Scroll End: None
Templates
Customizing appearance
Examples:
Custom Card Template
Custom Card Template
To Do
In Progress
Done
Custom Header Template
Custom Header Template
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
Custom Footer Template
Custom Footer Template
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Custom Card Placeholder
Custom Card Placeholder
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Custom Column Placeholder
Custom Column Placeholder
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Custom Drag Preview
Custom Drag Preview
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Configuration
Board configuration options
Examples:
Disable Sorting
Disable Sorting
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Custom Scroll Padding
Custom Scroll Padding
Scroll detection padding is handled internally (default 1px). To inspect it, you would typically look at source code, but implementation details like specific padding override are not exposed as inputs in the current version of HubBoardComponent. This example shows a board that *could* use it if the API exposed it, or demonstrates the standard behavior. (Note: The library source code defines `scrollDetectionPadding = 1` as private readonly, so it cannot be customized via input currently.)
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Drag Behavior Modes
Drag Behavior Modes
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Current Behavior: collapse
- Collapse: The element completely disappears and its space is removed from the layout
- Best for: Clean interface where you only want to see the placeholder at the destination
Styling
Customizing appearance via CSS variables
Examples:
CSS Customization
CSS Customization
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Key features
Recent changes
Version 22.4.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.4.0 - 7/28/26, 12:00 AM
added: ARIA list semantics: the board host is role="list" named by the new boardLabel input, each column is a labelled role="group", each column body a role="list" and each card a role="listitem".
added: Keyboard card reorder: Space/Enter grabs a focused card, ArrowUp/ArrowDown move it within its column and ArrowLeft/ArrowRight to the adjacent column (honouring the same predicate/cardSortingDisabled rules as dragging), Space/Enter drops emitting the same onCardMoved payload as a pointer drop, and Escape cancels restoring the original position.
added: Visually hidden aria-live="polite" announcer for grab, move, drop, cancel and rejected targets (messages are English-only for now), plus a hidden usage hint linked from each focusable card.
added: New optional boardLabel input: accessible name of the board list container (default 'Board').
Version 22.3.0 - 7/7/26, 12:00 AM
changed: BREAKING (packaging): the theme SCSS now ships at ng-hub-ui-board/styles (was dist/board/src/lib/styles), so @use 'ng-hub-ui-board/styles' resolves — update any @use that reached into src/lib/styles.
changed: variant now accepts any colour: besides the built-in semantic accents, a registered custom accent or a literal colour (#hex, rgb(), oklch(), CSS named colour) is resolved through the shared resolveHubAccent helper from ng-hub-ui-utils.
changed: Internal: @HostBinding/@HostListener decorators replaced by the host metadata object (Angular style guide); no public API or behaviour change.
Version 22.2.1 - 7/2/26, 12:00 AM
fixed: Docs: css-variables-reference.md default values resynchronized with the actual code declarations, now guarded by the repo-level tokens-parity check.
Version 22.2.0 - 6/26/26, 12:00 AM
changed: Accent system migrated to the open-set local accent slot pattern: variant re-bases a single --hub-board-accent slot and the emphasis/subtle/on family is derived locally with color-mix, growing the built-in variants from 5 to the nine canonical accents and letting any custom ds accent recolour the drag/drop placeholder at runtime.
added: New tokens --hub-board-accent-on (grayscale contrast flip driven by the accent lightness) and --hub-board-accent-emphasis.
fixed: Accent color-mix derivation for --hub-board-accent-subtle migrated from srgb to oklch for perceptually uniform tints; the subtle tint is now derived at 12% (was 8%).
Related libraries
Frequently asked questions
How do I build a Kanban board with drag and drop in Angular?
Install ng-hub-ui-board and bind a Board object describing its columns and cards. Dragging cards between columns and reordering columns works without extra wiring; the drag events return the moved BoardCard along with its source and target BoardColumn, so you persist the change in your own store or API.
Can I customise how each Kanban card looks?
Yes. ng-hub-ui-board renders cards through templates you provide, so a card can contain any markup — avatars, tags, progress, actions. BoardColumnHeaderDirective and BoardColumnFooterDirective do the same for the top and bottom of each column, leaving the drag-and-drop behaviour untouched.
How do I know which column a card was moved to?
The board emits a BoardDragDropEvent on every drop. It carries the dragged item, the column it came from and the column it landed in, plus the new index. That is the payload you send to your backend; the board does not persist anything by itself.
Does the Angular Kanban board work on touch devices?
Yes. Dragging is built on the Angular CDK drag-and-drop primitives, which handle mouse, touch and pen input, so the board behaves the same on tablets and phones as on desktop.