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.

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 looks of the UI components. With the ThemeBuilder advanced customization, you can change virtually every appearance-related property of the UI components until you achieve the desired style.

The final result of using the ThemeBuilder app is a vibrant theme packed as an npm package that contains your ready-to-use Sass and CSS.

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 Pro Ultimate Enterprise
Customization of Kendo themes Yes Yes Yes Yes
Editing built-in theme variables Yes Yes Yes Yes
Choice of color palettes (swatches) Yes Yes Yes Yes
Allowed number of projects 1 3 Unlimited Unlimited
Use of custom typography No Yes Yes Yes
Creating custom theme variables No Yes Yes Yes
Advanced customization No Yes Yes Yes
Project sharing No Yes Yes Yes
Migration to later component versions Manual (Only the variables) Manual Automatic Automatic
Importing custom variables from Figma No No Yes Yes
Importing custom fonts from Figma No No Yes Yes
Creating custom component variants No No Yes Yes
Support No Light support Priority support Ultimate support
SSO No No No Yes
Access rights No No No Yes
Variable modes No No Yes Yes

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:

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 following table lists all components with support for advanced customization.

Component Name Supported with Component Name Supported with
Button R3 2022 Card R3 2022
ButtonGroup R3 2022 Drawer R3 2022
DropDownButton R3 2022 PanelBar R3 2022
SplitButton R3 2022 TabStrip R3 2022
Chip R3 2022 Splitter R3 2022
ChipList R3 2022 Dialog R3 2022
Toolbar R3 2022 Window R3 2022
NumericTextBox R3 2022 Tooltip R3 2022
MaskedTextBox R3 2022 Notification R3 2022
Input R3 2022 Pager R3 2022
TextArea R3 2022 Badge R3 2022
CheckBox R3 2022 TextBox R1 2023
RadioButton R3 2022 Editor R1 2023
RadioGroup R3 2022 AppBar R1 2023
Slider R3 2022 GridLayout R1 2023
RangeSlider R3 2022 TreeList R1 2023
Switch R3 2022 ProgressBar R1 2023
Rating R3 2022 Upload R1 2023
DateInput R3 2022 ExternalDropZone R1 2023
DatePicker R3 2022 Loader R1 2023
TimePicker R3 2022 ListView R1 2023
DateTimePicker R3 2022 FloatingActionButton R2 2023
DateRangePicker R3 2022 ColorGradient R2 2023
MultiViewCalendar R3 2022 FlatColorPicker R2 2023
Calendar R3 2022 ColorPalette R2 2023
DropDownList R3 2022 ColorPicker R2 2023
AutoComplete R3 2022 MultiSelectTree R2 2023
DropDownTree R3 2022 MultiColumnComboBox R2 2023
MultiSelect R3 2022 ExpansionPanel R2 2023
Combobox R3 2022 ListBox R2 2023
Label R3 2022 BottomNavigation R2 2023
Hint R3 2022 Breadcrumb R3 2023
Error R3 2022 TileLayout R3 2023
FloatingLabel R3 2022 Popover R3 2023
Treeview R3 2022 Filter R3 2023
Grid R3 2022 Conversational UI R3 2023
Scheduler R3 2022 ScrollView R3 2023
Stepper R3 2022 Skeleton R3 2023
Avatar R3 2022 Form R3 2023
Menu R3 2022

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
<div> R2 2023 <img> R2 2023
<input> R2 2023

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 of your visual theme.

If you prefer video tutorials, see the ThemeBuilder onboarding video below.

In this article
Not finding the help you need?