syncfusion-blazor-kanban

Q: How do I install syncfusion-blazor-kanban?

Run npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-kanban in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-blazor-kanban/ (personal) or .claude/skills/syncfusion-blazor-kanban/ (project).

by syncfusionFrontend & Design

Implement Syncfusion Blazor Kanban board component (SfKanban) for card-based workflow management. Use this when building Kanban boards, task management UIs with swimlanes, or drag-and-drop column workflows in Blazor applications. This skill covers data binding, column and card configuration, swimlane organization, drag-and-drop interactions, dialog editing, sorting, WIP validation, accessibility, localization, and responsive mode.

Installs: 351
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-kanban

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-blazor-kanban automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syncfusion Blazor Kanban Component

When to Use This Skill

Use this skill when:

Building Kanban boards or workflow management UIs in Blazor
Implementing task/card management with column-based workflows
Adding swimlane grouping to organize cards by assignee or category
Enabling drag-and-drop card movement between columns
Configuring WIP (Work-In-Progress) validation limits
Customizing card appearance with templates
Binding Kanban to local or remote data sources
Integrating Kanban with external components (Schedule, TreeView)

Quick Start

1. Install NuGet Packages

dotnet add package Syncfusion.Blazor.Kanban
dotnet add package Syncfusion.Blazor.Themes

2. Register Service (Program.cs)

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. Add Imports (_Imports.razor)

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Kanban

4. Add Stylesheet and Script (index.html or App.razor)

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

5. Basic Kanban with Cards

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() {"Testing"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

@code {
    public class TasksModel
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public string Status { get; set; }
        public string Summary { get; set; }
        public string Assignee { get; set; }
    }

    public List<TasksModel> Tasks = new List<TasksModel>()
    {
        new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" },
        new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" },
        new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "Open", Summary = "Arrange a web meeting with the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer.", Assignee = "Janet Leverling" },
        new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Close", Summary = "Fix the issues reported in Safari browser.", Assignee = "Steven walker" },
    };
}

Navigation Guide

Topic	Reference File
Getting started (WebAssembly/Server/Web App)	getting-started.md
Data binding (local, remote, ExpandoObject, Observable)	data-binding.md
Column configuration	columns.md
Card customization	cards.md
Drag and drop (internal & external)	drag-and-drop.md
Swimlane grouping	swimlane.md
Card editing dialog	dialog.md
Events reference	events.md
Card sorting	sort.md
Workflow restrictions	workflow.md
WIP validation (MinCount/MaxCount)	validation.md
Styling and CSS classes	style.md
Accessibility (WCAG, keyboard navigation)	accessibility.md
Localization and RTL	localization.md
Tooltips	tooltip.md
Responsive mode	responsive-mode.md
Height and width dimensions	dimensions.md

Common Patterns

Kanban with Swimlane

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSwimlaneSettings KeyField="Assignee"></KanbanSwimlaneSettings>
</SfKanban>

Kanban with WIP Validation

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="Backlog" KeyField="@(new List<string>() {"Open"})" MinCount="2"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})" MaxCount="3"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
</SfKanban>

Kanban with Index-Based Sorting

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() {"Open"})"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() {"InProgress"})"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() {"Close"})"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Title" ContentField="Summary"></KanbanCardSettings>
    <KanbanSortSettings SortBy="SortOrderBy.Index" Field="RankId"></KanbanSortSettings>
</SfKanban>

Key Properties Reference

Property	Component	Description
`KeyField`	`SfKanban`	Maps the data field that determines which column a card belongs to
`DataSource`	`SfKanban`	Binds local or remote data to the Kanban
`AllowDragAndDrop`	`SfKanban`	Enables/disables drag-and-drop (default: true)
`EnableTooltip`	`SfKanban`	Shows card details on hover
`EnableRtl`	`SfKanban`	Enables right-to-left layout
`HeaderField`	`KanbanCardSettings`	Maps the unique ID field for card headers
`ContentField`	`KanbanCardSettings`	Maps the field shown in card body
`KeyField`	`KanbanColumn`	One or more status values that map cards to this column
`AllowToggle`	`KanbanColumn`	Allows column expand/collapse
`MinCount`	`KanbanColumn`	Minimum card count for WIP validation
`MaxCount`	`KanbanColumn`	Maximum card count for WIP validation
`TransitionColumns`	`KanbanColumn`	Restricts cards to only drop into specified columns
`AllowDrop`	`KanbanColumn`	Prevents cards from being dropped into a column
`AllowDrag`	`KanbanColumn`	Prevents cards from being dragged from a column
`KeyField`	`KanbanSwimlaneSettings`	Groups cards into swimlane rows by this field
`SortBy`	`KanbanSortSettings`	Sorting mode: DataSourceOrder, Index, or Custom

FAQ

What does the syncfusion-blazor-kanban skill do?

How do I install syncfusion-blazor-kanban?

Run npx skills add https://github.com/syncfusion/blazor-ui-components-skills --skill syncfusion-blazor-kanban in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-blazor-kanban/ (personal) or .claude/skills/syncfusion-blazor-kanban/ (project).

Which AI agents can use syncfusion-blazor-kanban?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-blazor-kanban safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-blazor-kanban?

It is published by syncfusion in syncfusion/blazor-ui-components-skills. It has 351 recorded installs.