Stylization
You can style the Kanban appearance through CSS classes and CSS variables. The following properties accept CSS classes for columns, rows, and cards:
columnShape.css,rowShape.css,cardShape.css- functions that return a CSS class conditionally based on item datacolumns.css,rows.css,cards.css- string CSS class assigned to a single item
For details and code examples of the conditional css functions, see Conditional CSS classes.
The following code snippet applies a CSS class to a specific column, row, and card:
const columns = [
{ id: "backlog", label: "Backlog", css: "highlighted" },
// other columns
];
const rows = [
{ id: "feature", label: "Feature", css: "row-feature" },
// other rows
];
const cards = [
{ id: 1, label: "Task", column: "backlog", css: "urgent" },
// other cards
];
Beyond per-item CSS, Kanban exposes CSS variables for theming. Variables fall into two groups:
- Kanban variables - define Kanban-specific styles
- WX library variables - style shared UI elements (controls, calendars)
The WX library powers internal Kanban UI components. Treat WX variables as part of Kanban styling.
Theme variables
Override these CSS variables in your stylesheet to customize the Material theme:
.wx-material-theme {
/* WX library css variables */
--wx-field-width: 100%;
--wx-theme-name: material;
/* end of WX library css variables */
/* Kanban css variables*/
--wx-kanban-background: #f1f1f1;
/* column styles */
--wx-kanban-column-width: 300px;
--wx-kanban-column-height: 300px;
/* toolbar styles */
--wx-kanban-toolbar-height: 56px;
--wx-kanban-toolbar-align: center;
--wx-kanban-toolbar-justify: flex-start;
--wx-kanban-toolbar-control-hover: rgba(0, 0, 0, 0.07);
--wx-kanban-toolbar-control-active: rgba(0, 0, 0, 0.15);
--wx-kanban-toolbar-border: var(--wx-border);
/* card styles */
--wx-kanban-card-field-padding: 10px;
--wx-kanban-content-background: var(--wx-background);
--wx-kanban-card-border: var(--wx-border);
--wx-kanban-card-border-radius: 6px;
--wx-kanban-header-border-radius: var(--wx-kanban-card-border-radius);
/* row styles */
--wx-kanban-row-line: var(--wx-border);
/* user icon styles */
--wx-kanban-user-icon-size: 36px;
/* editor styles */
--wx-kanban-header-height: 64px;
--wx-kanban-editor-width: 569px;
--wx-kanban-editor-height: auto;
--wx-kanban-editor-x-padding: 20px;
--wx-kanban-editor-background: var(--wx-background);
--wx-kanban-editor-top-border: var(--wx-border);
--wx-kanban-editor-modal-width: 1000px;
--wx-editor-right-background: rgba(0, 0, 0, 0.03);
--wx-editor-cancel-background: rgba(0, 0, 0, 0.04);
/* column styles */
--wx-kanban-over-limit-color: var(--wx-color-danger);
--wx-kanban-collapsed-column-width: 44px;
--wx-kanban-z-index: 1;
/* progress control styles*/
--wx-progress-height: 4px;
--wx-kanban-progress-inactive-color: #dbdbdb;
/* menu styles */
--wx-kanban-menu-min-width: 100px;
/* box and shadow styles*/
--wx-kanban-shadow: none;
--wx-kanban-box-border: var(--wx-border);
/* collapsed column styles */
--wx-kanban-collapsed-padding: var(--wx-padding);
--wx-kanban-collapsed-margin: 0px;
--wx-kanban-collapsed-background: transparent;
--wx-kanban-collapsed-background-hover: #dfdfdf;
/* End of Kanban CSS variables*/
}
Variable names may change in future versions. Check the names after upgrading and update the styles in your project.
Scroll style
Apply the .wx-styled-scroll CSS class to the Kanban container to enable a custom scrollbar style. Check browser compatibility before using the class:
<!-- container for Toolbar -->
<div id="toolbar"></div>
<!-- container for Kanban -->
<div id="root" class="wx-styled-scroll"></div>
Custom style
The following demo applies a custom style to Kanban:
Responsive layout
The following demo creates a responsive Kanban layout with custom CSS:
Related articles: Customization