U & I and React UI: KendoReact Free, the New Kid on the Block

Hey, fellow developer, my name is Plamen, and I have been developing professional web UI components for more than 14 years now. In this blog series, my team and I will dive into the amazing, and sometimes overwhelming, universe of React UI components and will compare the most popular UI components in the ecosystem based on the features and overall developer experience they provide. In this first article, I will introduce you to KendoReact Free, the newly launched free React component library that is the free tier of KendoReact. KendoReact is a well-known professional UI library created in 2018 as part of the Kendo UI family of native libraries for React, Angular, Vue and jQuery. The company behind them, Progress Telerik, has been building professional UI components since 2002. Starting with the 50+ powerful free React components, KendoReact Free is fully packed with goodies, so let’s check it out. This is what comes out-of-the-box with KendoReact Free: Starting from the top—a complete Design System Kit that is fully documented and includes a color system, size metrics, typography and icons. After the Design System Kit come the Themes — Default, Material, Bootstrap and Fluent. They include several sub-swatches like Dark mode, Nordic, Pacific and even an Accessible swatch, that could straight away be used separately: The themes are designed and based on CSS/SASS variables that can be easily modified for greater and easier flexibility of the theme. For those who love having a great app handy that saves them some work, we also have a ThemeBuilder option that gives a unique UI tool for further customizations and theme creation. The Kendo UI Productivity Tools VS Code extension provides a streamlined getting started experience as well as a Template Wizard. KendoReact Free contains of more than 50+ components like DataGrid, Layouts, Inputs, DateInputs, Buttons, Dialogs and more loaded with all kinds of features like accessibility, internationalisation, keyboard support. Let’s start with the performant React DataGrid that includes features used in popular app scenarios such as Sorting, Paging, Filtering, Column Resizing. Want to try it now? It only takes a few steps and you have it up and running: npm i @progress/kendo-react-grid @progress/kendo-theme-default Import it in your React component: import { Grid, GridColumn as Column } from '@progress/kendo-react-grid'; import '@progress/kendo-theme-default/dist/all.css'; Then just add the data and the columns and its ready: There’s also a neat selection of dropdown widgets: MultiSelect, DropDownList and AutoComplete, that provide various options for item selection from a dropdown as well as adaptive modes for friendly mobile experience. A huge number of layout components, inputs and buttons complement the free collection—Layout, ActionSheet, AppBar, Avatar, BottomNavigation, Breadcrumb, Card, ContextMenu, Drawer, Menu, PanelBar, Splitter, StackLayout, Stepper, TabStrip, TileLayout, TimeLine, NumericTextBox, Switch, Slider and many more. Check out the full list of KendoReact Free components. Besides the components, KendoReact Free comes with a Project Tracker Page Template. Built entirely with free React components, it will help you create an app that manages tasks, projects and teams efficiently. The last part of the diagram is Forum / Support – or what to do when you have questions about KendoReact Free. There is a free community forum where all kind of questions are discussed. If you want to contact the KendoReact team, you can start a free trial that will give you the opportunity to submit a support ticket. In our next blog posts, engineers from the KendoReact team (myself included) will take a deep dive into frequently used React components and features and compare a KendoReact Free component with popular alternatives available in the React ecosystem.

Mar 28, 2025 - 13:12

U & I and React UI: KendoReact Free, the New Kid on the Block

Hey, fellow developer, my name is Plamen, and I have been developing professional web UI components for more than 14 years now. In this blog series, my team and I will dive into the amazing, and sometimes overwhelming, universe of React UI components and will compare the most popular UI components in the ecosystem based on the features and overall developer experience they provide.

In this first article, I will introduce you to KendoReact Free, the newly launched free React component library that is the free tier of KendoReact.

KendoReact is a well-known professional UI library created in 2018 as part of the Kendo UI family of native libraries for React, Angular, Vue and jQuery. The company behind them, Progress Telerik, has been building professional UI components since 2002. Starting with the 50+ powerful free React components, KendoReact Free is fully packed with goodies, so let’s check it out. This is what comes out-of-the-box with KendoReact Free:

Starting from the top—a complete Design System Kit that is fully documented and includes a color system, size metrics, typography and icons.

After the Design System Kit come the Themes — Default, Material, Bootstrap and Fluent. They include several sub-swatches like Dark mode, Nordic, Pacific and even an Accessible swatch, that could straight away be used separately:

The themes are designed and based on CSS/SASS variables that can be easily modified for greater and easier flexibility of the theme.

For those who love having a great app handy that saves them some work, we also have a ThemeBuilder option that gives a unique UI tool for further customizations and theme creation.

The Kendo UI Productivity Tools VS Code extension provides a streamlined getting started experience as well as a Template Wizard.

KendoReact Free contains of more than 50+ components like DataGrid, Layouts, Inputs, DateInputs, Buttons, Dialogs and more loaded with all kinds of features like accessibility, internationalisation, keyboard support.

Let’s start with the performant React DataGrid that includes features used in popular app scenarios such as Sorting, Paging, Filtering, Column Resizing.

Want to try it now? It only takes a few steps and you have it up and running:

npm i @progress/kendo-react-grid @progress/kendo-theme-default

Import it in your React component:

import { Grid, GridColumn as Column } from '@progress/kendo-react-grid';
import '@progress/kendo-theme-default/dist/all.css';

Then just add the data and the columns and its ready:

There’s also a neat selection of dropdown widgets: MultiSelect, DropDownList and AutoComplete, that provide various options for item selection from a dropdown as well as adaptive modes for friendly mobile experience.

A huge number of layout components, inputs and buttons complement the free collection—Layout, ActionSheet, AppBar, Avatar, BottomNavigation, Breadcrumb, Card, ContextMenu, Drawer, Menu, PanelBar, Splitter, StackLayout, Stepper, TabStrip, TileLayout, TimeLine, NumericTextBox, Switch, Slider and many more. Check out the full list of KendoReact Free components.

Besides the components, KendoReact Free comes with a Project Tracker Page Template. Built entirely with free React components, it will help you create an app that manages tasks, projects and teams efficiently.

The last part of the diagram is Forum / Support – or what to do when you have questions about KendoReact Free. There is a free community forum where all kind of questions are discussed. If you want to contact the KendoReact team, you can start a free trial that will give you the opportunity to submit a support ticket.

In our next blog posts, engineers from the KendoReact team (myself included) will take a deep dive into frequently used React components and features and compare a KendoReact Free component with popular alternatives available in the React ecosystem.