Skip to main content

Customization

Along with configuration options, Kanban gives plenty of ways to tweak how it looks and acts. It's possible to set up a custom template for cards, adjust the context menu for cards, columns, and rows, change up the Toolbar's layout and features, and use your own CSS styles to give Kanban a unique appearance.

Custom cards​

For displaying cards with a custom look, the cardTemplate property comes in handy. This property lets you use a callback function for adding your own styles and logic to Kanban. Check out the snippet below to see how it works:

Custom context menu​

If you want to change the context menu for cards, columns, or rows, you can use the cardShape, columnShape, and rowShape properties. The example below shows how to set these up:

Custom toolbar​

The Toolbar can be adjusted as needed by using the items property. Inside its array, add the controls you want, put them in any order, and update how they work to fit your needs.

Take a look at the snippet below to see how to customize things like:

  • the order of controls
  • the searchbar and how it works
  • the sort control and its behavior
  • a custom control and what it does

Custom styles​

If you want to change how Kanban looks, try adjusting the relevant CSS variables. For more details, check out the Stylization section.

The snippet here shows how custom styles can be applied to Kanban: