Getting Started with KendoReact

Updated on Jun 3, 2026

Get up and running with KendoReact - scaffold a project in just a few steps, then explore the most popular components to start building your UI.

Quick Start

Set up your first KendoReact project and start building in minutes. Use the Kendo CLI for fast command-line scaffolding (recommended), or the VS Code Extension for a visual, wizard-driven experience with full customization:

CLIVS Code Extension

Create a Project with the Kendo CLI

The Kendo CLI offers both an interactive wizard and direct setup commands. If you're new to Kendoreact, the wizard provides the easiest way to get started.

1. Install the CLI globally:

   sh

   npm i -g @progress/kendo-cli@latest

2. Launch the interactive wizard by running kendo without any arguments:

   sh

   kendo

3. In the Quick Start section, select Create a new project, then follow the prompts to configure your project.

When setup is complete, the wizard displays a summary similar to the following:

sh

╭───────────────────────────────────────────────────────────────╮
│  ✓ KendoReact app ready                                       │
│                                                               │
│  Next steps:                                                  │
│    cd MyApp                                                   │
│    npm install                                                │
│    npm run dev                                                │
│                                                               │
│  Theme       Default                                          │
│                                                               │
│  Docs  https://www.telerik.com/kendo-react-ui/components      │
╰───────────────────────────────────────────────────────────────╯

Run the commands shown in the Next steps section to install dependencies and start the development server.

Prefer to run commands manually? See Generate a KendoReact Project for all available options.

Create a Project with the VS Code Extension

Use the Kendo UI Productivity Tools extension for VS Code to scaffold a project from a template wizard.

1. Install the extension from the Visual Studio Marketplace

2. Open the VS Code Command Palette (Ctrl/Command + Shift + P) and type "Kendo UI Template Wizard".

3. Set the project name and path, choose KendoReact as the project type and configure the following options:

   • Product tier - KendoReact Free (50+ components) or KendoReact Premium (120+ components)
   • Framework - Vite, Next.js, or Astro
   • Programming language - JavaScript or TypeScript
   • Theme - Default, Bootstrap, Material, Fluent, or Meridian
   • Styling - CSS or Sass

4. Click Create Project, then install dependencies and run:

   sh

   npm i && npm run dev

The extension also provides code snippets (type kr- in your editor) and a scaffolding tool for generating complex components like Charts, Forms, and Schedulers.

Have an Existing Project?

If you want to add any KendoReact component to an existing project, follow the steps below:

1. Add the required package and preferred Kendo theme:

   sh

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

2. Import the component and the theme styles in your page:

   tsx

   import { Calendar } from '@progress/kendo-react-dateinputs';
   import '@progress/kendo-theme-default/dist/all.css';

Next Steps

We are sure that you are looking for more — browse the components section and discover the amazing features that KendoReact brings to the table.

Happy coding!

Data Grid

UI Component

Transform data into interactive experiences with powerful sorting, filtering, paging, and editing built right in.

Charts

UI Component

Turn complex datasets into stunning visual stories with 70+ customizable chart types and real-time updates.

Form

UI Component

Build robust forms effortlessly with automatic validation, field management, and seamless data handling.

AI Tools

Productivity Tools

Build UIs faster than ever - just describe what you need, and watch AI generate production-ready components instantly.

VS Code Extension

Productivity Tools

Boost your productivity with instant project scaffolding, smart snippets, and one-click component generation right in your editor.

Progress Design System

Productivity Tools

Create pixel-perfect, accessible interfaces with ready-to-use Figma kits and comprehensive design patterns.