Styling Kendo and Telerik Components

Kendo themes define the styling layer for Kendo and Telerik components: theme packages, design tokens, CSS custom properties, Sass variables/maps, swatches, and component selectors.

Overview

Kendo and Telerik components (Angular, React, Vue, jQuery, Blazor) get their look from Kendo theme packages. A theme applies design tokens — colors, spacing, typography, radii, elevation, and motion — to every component automatically. Appearance changes happen either globally (change tokens, affect all components) or per-component (target specific selectors).

Consumer Application
  └── Kendo / Telerik Components (Angular, React, Vue, jQuery, Blazor)
       └── Theme Package (styling layer)
            └── Design System Tokens (colors, spacing, typography…)

6 themes available — choose the package that matches the target design language: