KendoReact Styling Overview
KendoReact comes with a set of built-in CSS themes that control the visual appearance of the components. Each theme determines the components' colors, borders, backgrounds, size, layout, position, font size and sometimes the font family.
Applying a custom design system is available through the Unstyled Mode.
Start Free Trial
Built-in Themes
Explore the built-in themes available for the KendoReact components on the Themes - Get Started Page.
Swatches
A theme swatch is a color variation of a theme. All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors and border colors are different. For example, Default Ocean Blue and Bootstrap Nordic are two built-in swatch names.
Installing a Theme
To install a KendoReact theme, run npm i @progress/kendo-theme- followed by one of the theme names:
Including a Theme
You can include a theme in your project in either of the following ways:
Customizing a Theme
You can customize the look of the KendoReact Themes. Read more about Customizing Themes...
Unstyled Mode
Many components in the KendoReact library offer an Unstyled mode, which allows developers to remove default styles and apply their own design systems. This mode provides maximum flexibility for customizing the appearance of components, ensuring they align perfectly with any design language or branding guidelines. By leveraging unstyled mode, you can fully control the visual presentation of components such as buttons, form elements, animations, and date inputs, seamlessly blending them into your unique user interface.
Using ThemeBuilder
To take full control over the appearance of the KendoReact components, you can create your own styles by using ThemeBuilder.
ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the React components, you can export a zip file with the styles for your theme and use them in your React app.
Compatibility and Maintenance
The Kendo Themes are decoupled from the Kendo UI for React components, which leads to the following usage requirements:
- When using a CSS theme as a local npm package, make sure that the
kendo-themes packagesare also updated to the latest in order to have properly styled components and avoid any version incompatibility - When using a CSS theme from a CDN, make sure that the theme version is compatible with the Kendo UI for React version. Our ChangeLog provides theme compatibility information for each components version.