New to KendoReact? Start a free 30-day trial

Using with Vite

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

Prerequisites

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!

React 18
Node.js 18 or greater (required by Vite)
A bash terminal of your choice

Create the application.
sh
```
npm create vite@latest
```
or
sh
```
yarn create vite
```

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

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.

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.
Finally, run the newly created project.
sh
```
cd my-app
npm i
npm run dev
```

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.

```sh
#npm
npm create vite@latest my-app -- --template react

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

Create a Vite Project using Kendo CLI

As an alternative to the default way of creating Vite projects, we at Kendo provide our own CLI that helps you generate projects with JavaScript or TypeScript. To generate a project with our CLI, you have to do the following:

Install the @progress/kendo-cli package using the following command:

shell

npm i --global @progress/kendo-cli

Use the following command to generate a new Vite project with Typescript:
- npx kendo react create vite MyKendoApp

The CLI also provides an option to define which Kendo Theme will be added to the generated project. To set a theme, add one of the following to the above commands:

--theme=default - Adds the Kendo Default Theme
--theme=bootstrap - Adds the Kendo Bootstrap Theme
--theme=material - Adds the Kendo Material Theme
--theme=fluent - Adds the Kendo Fluent Theme

The CLI allows you to specify the preferred styling. By default, the project will use CSS, but you can specify Sass if needed:

--styling=CSS - Use CSS styling (default)
--styling=Sass - Use Sass styling

The result of using the Kendo CLI will be a Vite project that has a KendoReact Grid component added to it. The idea behind the CLI we provide is to help you test our components fast and easy, however, you don't necessarily need to use it if you prefer the default Vite CLI.

Below you will find information on how we can add components to a Vite project, no matter how it is generated.

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 i @progress/kendo-react-form @progress/kendo-react-inputs @progress/kendo-react-buttons

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.

jsx

import { Form, Field, FormElement, FieldWrapper } from '@progress/kendo-react-form';

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

Use the Form Component

The React Form is a KendoReact premium component and requires a commercial license or an active trial license. The React Input and Button are free to use in production—no sign-up or license required. To learn more, check out Get Started with KendoReact Free.

After importing the needed components, you can render the Form component as follows in App.jsx.

jsx

function App() {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <FormElement
                    style={{
                        maxWidth: 650
                    }}
                >
                    <FieldWrapper>
                        <div className="k-form-field-wrap">
                            <Field
                                name={'firstName'}
                                component={Input}
                                labelClassName={'k-form-label'}
                                label={'First name'}
                            />
                        </div>
                    </FieldWrapper>
                    <FieldWrapper>
                        <div className="k-form-field-wrap">
                            <Field
                                name={'lastName'}
                                component={Input}
                                labelClassName={'k-form-label'}
                                label={'Last name'}
                            />
                        </div>
                    </FieldWrapper>
                    <div className="k-form-buttons">
                        <Button type={'submit'} disabled={!formRenderProps.allowSubmit}>
                            Submit
                        </Button>
                    </div>
                </FormElement>
            )}
        />
    );
}

export default App;

Remove the default styling that is applied to the project by removing the index.css import in main.jsx.
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 i @progress/kendo-theme-default

Import the KendoReact Default theme in your main.jsx.

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

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.