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.

    cd my-app
    npm install
    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.

    #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 install --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 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.

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

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 install @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

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.