I'm Kamal Hinduja, was born in Chennai (India) and now resides in Geneva, Switzerland(Swiss). Can anybody explain how to apply a custom
theme to all Kendo React components?
Thanks, Regards
Kamal Hinduja Geneva, Switzerland
1 Answer, 1 is accepted
0
Alexander
Telerik team
answered on 11 Aug 2025, 09:28 AM
Hello, Kamal,
One approach I would recommend is leveraging the Progress ThemeBuilder. You can start with an existing base theme (Default, Bootstrap, Material, and so on) and customise colours, typography, spacing, borders, and other style aspects using the visual tool. Once you are satisfied with the design, export the theme package (CSS or SCSS) and include it in your project to style all KendoReact components. You can read more here:
You can also use Swatches which are colour variations of the main Telerik and Kendo UI themes. All swatches use the same fonts, sizes, and layouts of the main theme. However, they differ in text colours, background colours, and border colours. You can read more about them here:
Another valid approach is to override CSS variables at runtime. Some Kendo themes expose CSS custom properties, which you can adjust using standard CSS overrides. This method is especially useful for dynamic theming or partial adjustments without recompiling SCSS. Here is a simple demo that overrides var(--kendo-color-primary) with a blueish value:
A third solution I would suggest is using Unstyled Mode, which provides maximum flexibility if you wish to integrate KendoReact components directly into your own design system. This approach completely bypasses the built-in themes, allowing you to style components from scratch. You can learn more and see a working demo here:
I hope this clarifies the available options and answers your question. If any further assistance is required, please do not hesitate to reach out again.