Using with Vite

You can use the Vite build tool to bootstrap a KendoReact project supporting both JSX and Typescript.


  • React 18
  • Node.js 18 or greater (required by Vite)
  • A bash terminal of your choice
  1. Create the application.

    npm create vite@latest


    yarn create vite

After executing the command, the interface will ask you to apply additional configurations to your project:

  1. Set the project name:

Here you can define the name of your project. For the needs of the current article, set the name of the application as my-app.

  1. When prompted, complete the step-by-step interactive project configuration. Make sure to select React as the project framework. You can choose any of the suggested variants.

  2. Finally, run the newly created project.

    cd my-app
    npm install
    npm run dev

tip You can skip the step-by-step project configuration by specifying the project name and adding -- --template if you are using NPM or --template if you are using Yarn straight from the command line. See Scaffolding Your First Vite Project for more CLI options.

    npm create vite@latest my-app -- --template react

    # yarn
    yarn create vite my-app --template react

Using KendoReact Components in a Vite Project

You can use any KendoReact component in your Vite project.

In the sections below, you will learn how to create a simple form with two input form fields and a button to submit the form. You will use the following KendoReact components: Form, Input, and Button. The provided sample code shows a JavaScript implementation.

Install the required dependencies

Install the dependencies for KendoReact Form, Input, and Button:

npm install @progress/kendo-react-form @progress/kendo-react-inputs @progress/kendo-react-buttons @progress/kendo-licensing

The package names and dependencies for each component are provided in their Getting Started pages.

Import the Form and Input components

In App.jsx, import the Form, Field, FormElement, FieldWrapper, Input, and Button components.

import {
} from "@progress/kendo-react-form";

import { Input } from "@progress/kendo-react-inputs";
import { Button } from '@progress/kendo-react-buttons';

Use the Form Component

  1. After importing the needed components, you can render the Form component as follows in App.jsx.
function App() {
  const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
  return (
    render={(formRenderProps) => (
          maxWidth: 650,
          <div className="k-form-field-wrap">
              label={'First name'}
          <div className="k-form-field-wrap">
              label={'Last name'}
        <div className="k-form-buttons">
          <Button type={'submit'} disabled={!formRenderProps.allowSubmit}>

export default App
  1. Remove the default styling that is applied to the project by removing the index.css import in main.jsx.

  2. To style the Form component as well as the Input and Button, install the Default theme, which is one of the four beautiful themes for KendoReact.

npm install @progress/kendo-theme-default
  1. Import the KendoReact Default theme in your main.jsx.
import "@progress/kendo-theme-default/dist/all.css";

After completing the above steps, run the project using npm run dev and navigate to the URL displayed in the console. You can view all the available commands in the scripts property in package.json.

For more detailed information and richer demos for the KendoReact Form, you can check its documentation articles.

Activating the License

Using any of the KendoReact UI components requires a commercial license key or an active trial license key. For more information about how to configure your license key, see Set Up Your KendoReact License Key.

Starting with KendoReact version 5.16.0, a missing license causes a watermark to appear over selected components. For more information, see Invalid License.