Kanban | Neural UI v2

Usage

Columns and cards need unique ids. cardMove distinguishes reordering inside a column from transferring between columns; apply the proposal by replacing columns. showCounts and showWipLimit control metadata. wipLimit communicates capacity; your application decides whether to accept a transfer. The board owns interaction, not task persistence. Wide boards scroll within their own region.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

To move a card with the keyboard, focus it and press Space or Enter. Use arrow keys, Home, or End to choose a destination; press Space or Enter to confirm, or Escape to cancel. Move buttons provide a click alternative to dragging.

To do

2 2/3

Design review

medium

UI

Tests

high

QA

In progress

1 1/2

Implementation

medium

Core

Done

1

Documentation

low

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

To move a card with the keyboard, focus it and press Space or Enter. Use arrow keys, Home, or End to choose a destination; press Space or Enter to confirm, or Escape to cancel. Move buttons provide a click alternative to dragging.

To do

2 2/3

Design review

medium

UI

Tests

high

QA

In progress

1 1/2

Implementation

medium

Core

Done

1

Documentation

low

Events: 0

showCounts

showWipLimit

columnWidth

Advanced options · 1

<neu-kanban
  [columns]="localizedColumns()"
  [columnWidth]="'240px'"
  [showCounts]="true"
  [showWipLimit]="true"
  [moveButtonLabel]="'Move'"
  (cardMove)="move($event)"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const localizedColumns = signal([
  {
    "id": "todo",
    "title": "To do",
    "wipLimit": 3,
    "cards": [
      {
        "id": "design",
        "title": "Design review",
        "priority": "medium",
        "tags": [
          "UI"
        ],
        "assignee": {
          "name": "Alex",
          "initials": "AL"
        }
      },
      {
        "id": "test",
        "title": "Tests",
        "priority": "high",
        "assignee": {
          "name": "Sam",
          "initials": "SA"
        },
        "tags": [
          "QA"
        ]
      }
    ]
  },
  {
    "id": "doing",
    "title": "In progress",
    "color": "var(--neu-warning)",
    "wipLimit": 2,
    "cards": [
      {
        "id": "build",
        "title": "Implementation",
        "priority": "medium",
        "assignee": {
          "name": "Jamie",
          "initials": "JA"
        },
        "tags": [
          "Core"
        ]
      }
    ]
  },
  {
    "id": "done",
    "title": "Done",
    "color": "var(--neu-success)",
    "cards": [
      {
        "id": "docs",
        "title": "Documentation",
        "priority": "low",
        "assignee": {
          "name": "Alex",
          "initials": "AL"
        }
      }
    ]
  }
]);

Data, callback and structured configuration inputs

State and events

Columns and cards need unique ids. cardMove distinguishes reordering inside a column from transferring between columns; apply the proposal by replacing columns. showCounts and showWipLimit control metadata. wipLimit communicates capacity; your application decides whether to accept a transfer. The board owns interaction, not task persistence. Wide boards scroll within their own region.

Accessibility and keyboard

Use the Move action and direction controls to move cards without dragging. Escape cancels the active move.

Key	Action
`Tab`	Reach card actions and move controls.
`Enter`	Activate the focused Move action or destination control without dragging.
`Space`	Activate the focused Move action or destination control without dragging.
`Escape`	Cancel the active move.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`columns`	`readonly NeuKanbanColumn[]`	`[]`	`[columns]`	Ordered column records with stable ids, titles, card arrays and optional WIP limits. Replace them to accept a card move.
`columnWidth`	`string`	`'320px'`	`[columnWidth]`	CSS inline size of each Kanban column, including its unit.
`moveButtonLabel`	`string`	`'Move'`	`[moveButtonLabel]`	Visible and accessible label for the keyboard card-move action.
`showCounts`	`boolean`	`true`	`[showCounts]`	Show the number of cards in each Kanban column.
`showWipLimit`	`boolean`	`true`	`[showWipLimit]`	Show the configured work-in-progress limit in column headings.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`cardMove`	`NeuKanbanCardMove`	`(cardMove)="onCardMove($event)"`	Proposes a reorder or cross-column transfer. Replace columns to accept the change.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuKanbanAssigneeTypeScript

import type { NeuKanbanAssignee } from '@neural-ui/core/kanban';

// Public declaration (reference only)
export interface NeuKanbanAssignee {
  readonly avatar?: string;
  readonly initials?: string;
  readonly name: string;
}

NeuKanbanCardTypeScript

import type { NeuKanbanAssignee } from '@neural-ui/core/kanban';

import type { NeuKanbanCard } from '@neural-ui/core/kanban';

// Public declaration (reference only)
export interface NeuKanbanCard {
  readonly assignee?: NeuKanbanAssignee;
  readonly description?: string;
  readonly disabled?: boolean;
  readonly dueDate?: string;
  readonly id: string;
  readonly meta?: string;
  readonly priority?: 'low' | 'medium' | 'high' | 'urgent';
  readonly tags?: readonly string[];
  readonly title: string;
}

NeuKanbanCardMoveTypeScript

import type { NeuKanbanCardReorder } from '@neural-ui/core/kanban';
import type { NeuKanbanCardTransfer } from '@neural-ui/core/kanban';

import type { NeuKanbanCardMove } from '@neural-ui/core/kanban';

// Public declaration (reference only)
export type NeuKanbanCardMove = NeuKanbanCardReorder | NeuKanbanCardTransfer;

NeuKanbanCardReorderTypeScript

import type { NeuKanbanCardReorder } from '@neural-ui/core/kanban';

// Public declaration (reference only)
export interface NeuKanbanCardReorder {
  readonly cardId: string;
  readonly columnId: string;
  readonly fromIndex: number;
  readonly kind: 'reorder';
  readonly toIndex: number;
}

NeuKanbanCardTransferTypeScript

import type { NeuKanbanCardTransfer } from '@neural-ui/core/kanban';

// Public declaration (reference only)
export interface NeuKanbanCardTransfer {
  readonly cardId: string;
  readonly fromColumnId: string;
  readonly fromIndex: number;
  readonly kind: 'transfer';
  readonly toColumnId: string;
  readonly toIndex: number;
}

NeuKanbanColumnTypeScript

import type { NeuKanbanCard } from '@neural-ui/core/kanban';

import type { NeuKanbanColumn } from '@neural-ui/core/kanban';

// Public declaration (reference only)
export interface NeuKanbanColumn {
  readonly cards: readonly NeuKanbanCard[];
  readonly color?: string;
  readonly id: string;
  readonly title: string;
  readonly wipLimit?: number;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-error-bg`	Background of invalid or danger states	Shared by other Core consumers; scope the override.	`#fee2e2`
`--neu-error-text`	Error text and danger outline/ghost Button text in both themes	Shared by other Core consumers; scope the override.	`#991b1b`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`

Related components

Use related components when your task requires a different interaction or a composed control.