Welcome to Progress ThemeBuilder
ThemeBuilder is a versatile tool that helps you create visual styles and apply them to the Telerik and Kendo UI web components or to your own custom components.
To help you achieve a unique appearance for your apps, ThemeBuilder offers an intuitive UI where you can experiment with colors and properties like border-radius and typography. In ThemeBuilder, you can visualize the styles that you create and see how they change the look of the UI components. With ThemeBuilder's advanced customization features, you can change virtually every appearance-related property of the UI components until you achieve the desired style.
The final result of using ThemeBuilder is a vibrant theme packaged as an npm package that contains your ready-to-use Sass and CSS files.
ThemeBuilder allows you not only to create themes for your new apps but also to maintain and update the styles of your existing apps—whenever you decide to change the styling in your app, open your existing ThemeBuilder project, make the changes, and apply them to the UI components.
ThemeBuilder Tiers
The table below provides a comparison between the Free, Pro, Ultimate, and Enterprise tiers of ThemeBuilder.
| Feature | Free | Trial | Pro | Ultimate / Telerik and Kendo UI Accelerator | Enterprise |
|---|---|---|---|---|---|
| Creating projects from scratch | Yes | Yes | Yes | Yes | Yes |
| Allowed number of projects | 1 | 3 | 3 | Unlimited | Unlimited |
| Customization of Kendo themes | Yes | Yes | Yes | Yes | Yes |
| AI generation of Kendo themes | Yes | Yes | Yes | Yes | Yes |
| Available AI tokens (per month) | 61000 | 154400 | 352000 | 988000 | 988000 |
| Editing built-in theme variables | Yes | Yes | Yes | Yes | Yes |
| Choice of color palettes (swatches) | Yes | Yes | Yes | Yes | Yes |
| Use of custom typography | No | Yes | Yes | Yes | Yes |
| Creating custom theme variables | No | Yes | Yes | Yes | Yes |
| Advanced customization | No | Yes | Yes | Yes | Yes |
| Number of advanced customizations | 0 | 50 | Unlimited | Unlimited | Unlimited |
| Project sharing | No | Yes | Yes | Yes | Yes |
| Migration to later component versions | Manual (Variables only) | Manual | Manual | Automatic | Automatic |
| Importing components from Figma | No | Yes | Yes | Yes | Yes |
| Allowed number of imported components from Figma | 0 | 1 | 3 | Unlimited | Unlimited |
| Importing custom variables from Figma | No | Yes | No | Yes | Yes |
| Allowed number of imported custom variables from Figma | 0 | 5 | 0 | Unlimited | Unlimited |
| Importing custom fonts from Figma | No | No | No | Yes | Yes |
| Creating custom component variants | No | Yes | No | Yes | Yes |
| Allowed custom component variants | 0 | 1 | 0 | Unlimited | Unlimited |
| Creating custom Kendo component configuration | No | Yes | Yes | Yes | Yes |
| Allowed custom Kendo component configurations | 0 | 1 | Unlimited | Unlimited | Unlimited |
| Support | No | Lite support | Lite support | Priority support | Ultimate support |
| SSO | No | No | No | No | Yes |
| Access rights | No | No | No | No | Yes |
| Variable modes | No | No | No | Yes | Yes |
| Customization of custom components | No | Yes | Yes | Yes | Yes |
| Allowed number of custom components | 0 | 1 | 3 | Unlimited | Unlimited |
| Project versions | 0 | 0 | 5 | 10 | 100 |
Supported Telerik and Kendo UI Web Components
The team behind ThemeBuilder works constantly to expand the list of supported Telerik and Kendo UI web components that you can style with ThemeBuilder. Currently, this list includes the following component suites:
- Kendo UI for Angular
- Telerik UI for Blazor
- KendoReact
- Kendo UI for jQuery
- Kendo UI for Vue
- Telerik UI for ASP.NET Core
- Telerik UI for ASP.NET MVC
- Telerik UI for PHP
- Telerik UI for JSP
If your favorite Telerik or Kendo UI components are not listed above, you can still use the previous ThemeBuilder.
Telerik and Kendo UI Components with Advanced Customization
ThemeBuilder offers two levels of customization for the UI components—standard and advanced:
-
The standard customization level applies to all Telerik and Kendo UI components and includes: selecting color swatches, changing color, typography, and rounding.
-
The advanced customization level applies to the majority of the Telerik and Kendo UI components. These components allow you to fine-tune every aspect of their appearance by editing their atomic parts.
From version Q1 2026, ThemeBuilder provides complete coverage of the Kendo UI component suite. The following table lists all components with support for advanced customization.
| Component Name | Supported with | Component Name | Supported with |
|---|---|---|---|
| Button | Q1 2024 | Card | Q1 2024 |
| ButtonGroup | Q1 2024 | Drawer | Q1 2024 |
| DropDownButton | Q1 2024 | PanelBar | Q1 2024 |
| SplitButton | Q1 2024 | TabStrip | Q1 2024 |
| Chip | Q1 2024 | Splitter | Q1 2024 |
| ChipList | Q1 2024 | Dialog | Q1 2024 |
| Toolbar | Q1 2024 | Window | Q1 2024 |
| NumericTextBox | Q1 2024 | Tooltip | Q1 2024 |
| MaskedTextBox | Q1 2024 | Notification | Q1 2024 |
| Input | Q1 2024 | Pager | Q1 2024 |
| TextArea | Q1 2024 | Badge | Q1 2024 |
| CheckBox | Q1 2024 | TextBox | Q1 2024 |
| RadioButton | Q1 2024 | Editor | Q1 2024 |
| RadioGroup | Q1 2024 | AppBar | Q1 2024 |
| Slider | Q1 2024 | GridLayout | Q1 2024 |
| RangeSlider | Q1 2024 | TreeList | Q1 2024 |
| Switch | Q1 2024 | ProgressBar | Q1 2024 |
| Rating | Q1 2024 | Upload | Q1 2024 |
| DateInput | Q1 2024 | ExternalDropZone | Q1 2024 |
| DatePicker | Q1 2024 | Loader | Q1 2024 |
| TimePicker | Q1 2024 | ListView | Q1 2024 |
| DateTimePicker | Q1 2024 | FloatingActionButton | Q1 2024 |
| DateRangePicker | Q1 2024 | ColorGradient | Q1 2024 |
| MultiViewCalendar | Q1 2024 | FlatColorPicker | Q1 2024 |
| Calendar | Q1 2024 | ColorPalette | Q1 2024 |
| DropDownList | Q1 2024 | ColorPicker | Q1 2024 |
| AutoComplete | Q1 2024 | MultiSelectTree | Q1 2024 |
| DropDownTree | Q1 2024 | MultiColumnComboBox | Q1 2024 |
| MultiSelect | Q1 2024 | ExpansionPanel | Q1 2024 |
| Combobox | Q1 2024 | ListBox | Q1 2024 |
| Label | Q1 2024 | BottomNavigation | Q1 2024 |
| Hint | Q1 2024 | Breadcrumb | Q1 2024 |
| Error | Q1 2024 | TileLayout | Q1 2024 |
| FloatingLabel | Q1 2024 | Popover | Q1 2024 |
| Treeview | Q1 2024 | Filter | Q1 2024 |
| Grid | Q1 2024 | Conversational UI | Q1 2024 |
| Scheduler | Q1 2024 | ScrollView | Q1 2024 |
| Stepper | Q1 2024 | Skeleton | Q1 2024 |
| Avatar | Q1 2024 | Form | Q1 2024 |
| Menu | Q1 2024 | AI Prompt | Q2 2024 |
| ActionSheet | Q1 2026 | ContextMenu | Q1 2026 |
| DockManager | Q1 2026 | Map | Q1 2026 |
| MediaPlayer | Q1 2026 | OrgChart | Q1 2026 |
| OTP | Q1 2026 | PDF Viewer | Q1 2026 |
| PropertyGrid | Q1 2026 | SpeechToTextButton | Q1 2026 |
| Spreadsheet | Q1 2026 | TaskBoard | Q1 2026 |
| Wizard | Q1 2026 | Timeline | Q1 2026 |
AI Generation of Kendo Themes
With ThemeBuilder Q2 2025, you can use generative AI to create a custom Kendo theme. By providing natural language instructions and without the need to have any prior CSS or design knowledge, you can quickly and efficiently create your own design for the Kendo and Telerik components.
Learn more about using AI to generate Kendo themes here...
Native HTML Elements with Advanced Customization
With ThemeBuilder, you can customize not only UI components but also native HTML elements and thus apply common styles to all element instances across your application. As the styles applied to the native HTML elements will have a global effect, you can override them by using inline styles or external style sheets. In addition, ThemeBuilder lets you create variants of these elements and use them in specific custom cases.
The following table lists all native HTML elements with support for advanced customization.
| HTML Element | Supported with | HTML Element | Supported with |
|---|---|---|---|
<div> | R2 2023 | <h1> | R2 2023 |
<span> | R2 2023 | <h2> | R2 2023 |
<p> | R2 2023 | <h3> | R2 2023 |
<a> | R2 2023 | <h4> | R2 2023 |
<li> | R2 2023 | <h5> | R2 2023 |
<ul> | R2 2023 | <h6> | R2 2023 |
<ol> | R2 2023 | <img> | R2 2023 |
<input> | R2 2023 |
Styling Custom Components
ThemeBuilder allows you to style custom components that are based on pure HTML. With the code editor, you can define and manage the HTML content of your custom components, and then apply advanced customizations to them. Additionally, ThemeBuilder gives you the flexibility to combine Telerik & Kendo components with your own custom components.
ThemeBuilder Free Trial
ThemeBuilder offers a free 7-day trial to registered users. To activate the free trial, use either of the following methods:
-
Register to start your free trial. Because ThemeBuilder is also a collaboration tool, activate a trial for each team member and try to evaluate it together.
-
Log in with the credentials for your Telerik account. To start your free trial, select any of the Try Now buttons and accept the EULA.
First Steps with ThemeBuilder
To see how it all works, try the complete ThemeBuilder tutorial—you will create custom styles, adjust some advanced properties, and then download the Sass and CSS files of your visual theme.