Add KendoReact to an Existing React Project
In this article, you’ll learn how to add KendoReact components to an already existing React project. To acquire the required knowledge, you will practice with the React Editor component.
All KendoReact packages are distributed through npm and offer a similar installation experience. The dependencies needed for the installation of each component package are listed in a dedicated Getting Started article on the component package level, for example, Getting Started with the React Editor.
KendoReact now offers seamless compatibility with React 19, empowering you to build modern, fast, and robust UI components with confidence. Start building with the latest version of React today!
Install the DateInputs Package
For example, to use the React Calendar component, part of KendoReact, start with the installation of the KendoReact DateInputs npm package and its dependencies.
npm i @progress/kendo-react-dateinputsImport the Calendar Component
After installing the needed packages, you can import the Calendar component in the React App.
For the purpose of this example, you will use the Calendar component in the src/App.tsx file. To use the already installed DateInputs package, import the Calendar component in this file.
import { Calendar } from '@progress/kendo-react-dateinputs';Use the Calendar Component
-
Add the component's markup to the
src/App.tsxfile in your project and set some of its props.jsxreturn <Calendar weekNumber={true} showOtherMonth={true} />; -
To style the Editor, install and import the Default theme, which is one of the three beautiful themes for KendoReact.
3.1. Install the Default theme package.
shnpm i @progress/kendo-theme-default3.2. Import the CSS file from the package in
src/App.tsx. Add this import before your existingApp.cssimport.jsximport '@progress/kendo-theme-default/dist/all.css'; -
Build and run the application by typing the following command in the root folder of your project:
shnpm start -
Navigate to http://localhost:3000 to see the KendoReact Editor component on the page.
Activating Your License Key (Not Needed for Free Components)
KendoReact is an enterprise-grade UI library with 120+ free and premium components. Over 50 components, such as the Calendar, are free to use without a license, even in production. However, if you want to unlock the premium components and features of KendoReact, you need a commercial license.
Using any of the KendoReact premium UI components requires either a commercial license key or an active trial license key.
Since KendoReact version 5.16.0 (25 July 2023), a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section. More information about the introduced changes can be found in this Invalid License section.
To experience the full potential of the KendoReact components, follow the instructions on the My License page to activate your license and hide the invalid/non-activated license attributes.