Kanban Task Board

Bryntum Task Board is a flexible Kanban web component which helps you visualise and manage your work. Supports any JS framework including React, Angular and Vue.

View examples Download trial

Bryntum Kanban Task Board

Supports any framework, including Angular, React & Vue

JavaScriptSupports AngularSupports ReactSupports Vue

Feature Packed

The Task Board is extremely flexible and allows you to completely customize the rendering & styling of the cards, columns and swimlanes. You can even flip features on or off at runtime thanks to the rich API. Use the link below to try it out!

Try demo

Organize Tasks Into Swimlanes And Columns

Keeping track of tasks in a busy team can be daunting. The Task Board lets you organize tasks by grouping them into swimlanes and any number of columns. Both swimlanes and columns can be collapsed to hide less important tasks and you can use filters to quickly find the tasks that matter the most.

Try demo

Fully Customizable

Bryntum Task Board can be visually customized and styled in many ways.

Try demo

Looks Great In Any Screen Size

Responsiveness is built into the core and you can filter out less important columns to focus on the relevant details on small screens.

Try demo

Try It Out Right Here

Don't trust our screenshots, try this example yourself or head over to our example browser for more demos.

To do Doing Done .b-taskboardbase { --taskboard-background : #fff; --taskboard-body-padding : 1em; --taskboard-card-border-top : 5px solid currentColor; --taskboard-column-background : #eee; --taskboard-column-border-radius : 0 0 3px 3px; --taskboard-column-header-border-radius : 3px 3px 0 0; --taskboard-column-header-border-top : var(--taskboard-card-border-top); } .b-taskboard-column.b-inline .b-taskboard-card { min-height : 3em; } .b-micro-cards .b-taskboard-card { background : currentColor; border-top : none; } .b-taskboard-card-body .b-taskboard-text { font-weight : 300; } .b-micro-cards .b-taskboard-resource-avatar-overflow::after, .b-micro-cards .b-resource-avatar { border : 1px solid #fff; } .b-taskboard-card-header { font-weight:bold !important; } .b-taskboard-column:not(.b-large-cards,.b-medium-cards) [data-ref=tags], .b-micro-cards [data-ref=tags] { display : none; }


Feature showcase

Custom Swimlanes

Grouping tasks

Ready to get started?

Free trial Buy now