Customizing KendoReact Components: What You Need to Know

See how to make your app truly your own with theming and functionality customizations in KendoReact.

Let’s be honest for a second here: even when you’re using a component library for your project, you don’t usually want it to look like you’re using a component library. By which I mean, you don’t want your application to have that fresh-out-of-the-box default feeling that makes it seem identical to every other application out there.

Customizing components can range from adjusting the interaction options to slapping on a new coat of paint—there’s not a one-size-fits-all approach, because the very concept of customization means that the components need to be inherently flexible and adaptable.

Thankfully, KendoReact (and the entire Kendo UI suite) happens to excel at this. There are a ton of different ways to customize your KendoReact components, but in general they fall into two main categories: theming and functionality customizations.

Theming

Theming customizations have to do exclusively with the look and feel of the components—not how they work, how users interact with them or what they do.

However, we shouldn’t make the mistake of thinking that theming customizations are purely decorative: The UI theme of a component matters a lot! Customizing a theme can impact everything from accessibility to brand recognition. A unique and well-designed theme can take an application from side project to successful product!

There are several different ways for developers to customize the theme of their KendoReact components: via the Sass variables, the Figma Kits, our ready-made Swatches or the WYSIWYG, no-code, ThemeBuilder tool! Which option is best will depend on your team and your project—but we ensure that no matter which you choose, it’s an easy and intuitive process.

If you’re looking for a deeper dive on this, check out these related articles:

• ThemeBuilder vs. Manual CSS: Which is Best for Your Team?
• Creating a Unique Theme with Custom Fonts and Icons in ThemeBuilder
• Case Study: Building a Design System with KendoReact

Functionality

Functionality customizations handle how the component behaves—what it can do, how the user can use it and more! Beyond potentially changing the UI to include different interaction options (like adding a new button for an export function or a new dropdown for a filtering function), this won’t change how the component looks.

Because each KendoReact component is built thoughtfully and intentionally from the ground up in React, the customization options will be different for each one. In most cases, KendoReact components are customized either by adding different child components or by passing in different properties.

For example, you can customize our Chart component by implementing Trendlines, which get added as child ChartSeriesItem components within the parent Chart component. However, if you want to add a filtering function to the ExcelExport component, that happens by setting the filterable property to true!

To see how you can customize the KendoReact component you’re working with, just look for the API section in the documentation—there’s one for every component.

Let’s Get Custom!

There you have it: a high-level overview of the different approaches for making adjustments to every KendoReact component. Whether you want to add additional labels to a map, toggle on the quick-view for a datepicker or give your entire component library a new color palette, KendoReact is built to be customized.

After all, the whole point of a component library is to save you time and effort! If a library lets you spend less time on the base component development time, but then requires *more* time for customization … did you actually save time at all?

The Kendo UI component libraries combine form and function, offering over 100 intuitive and feature-rich components that are all highly customizable and made with the developer—and designer—experience in mind. If you aren’t already using a Kendo UI component library, you can try one out completely free for 30 days!

Try Now