All Components

Styling Overview

Kendo UI for Vue provide themes that can be used to style your application.

Currently, the suite ships the following themes:


To start using a theme, install it through NPM.

npm install --save @progress/kendo-theme-default

The Kendo UI Bootstrap theme depends on the Twitter Bootstrap framework. To install the theme:

  1. Run npm install --save @progress/kendo-theme-bootstrap.
  2. Install the version of the bootstrap framework specified as a peer dependency.

After the theme package is installed, reference it in your project.

Including Themes in Your Project

To include a theme in your application, either:

Using Precompiled CSS

Each Kendo UI for Vue theme includes an all.css file with precompiled styles that can be used as a ready solution for theming the available Kendo UI Wrappers.

To style your components by using the precompiled CSS options, either:

Including the Styles in the Application HTML

To include the theme with its precompiled CSS in the HTML which hosts your application, use a similar approach to the approach you use to any other HTML page.

<link rel="stylesheet" href="/node_modules/@progress/kendo-theme-default/dist/all.css" />

Customizing Themes

To modify a Kendo UI for Vue theme, either:

Using the Build Process of the Theme

Theme repositories provide a build task that compiles their source to CSS.

To customize and build the theme:

  1. Clone the theme repository.
  2. Install the theme dependencies with npm install.
  3. Customize the theme variables in the scss/_variables.scss file.
  4. Build the theme with npm run build to create the customized version of the theme in the dist/all.css file.

    You might need to skip the styles for some of the components. To include only the styles that you need, run the COMPONENTS='component1,component2' npm run build command. For example, to create a CSS file that includes only the Grid and PanelBar styles, run COMPONENTS='panelbar,grid' npm run build. The command creates the dist/custom.css file which includes only the specified components.

After the build completes, use the compiled CSS.

In this article