# Getting Started with KendoReact

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.

<CtaPanelOverview title="New to KendoReact?" message="@KendoReactLink is an enterprise-grade React UI library with 120+ free and premium components for building polished, performant apps.">
<span token="KendoReactLink">

[KendoReact](https://www.telerik.com/kendo-react-ui)

</span>
</CtaPanelOverview>

## 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:

<TabStrip>
<TabStripTab title="CLI">

### Create a Project with the Kendo CLI

The [Kendo CLI](https://www.npmjs.com/package/@progress/kendo-cli) offers both an [interactive wizard](https://www.telerik.com/kendo-react-ui/components/installation/kendo-cli-react-setup#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](https://www.telerik.com/kendo-react-ui/components/installation/kendo-cli-react-setup#generate-a-kendoreact-project) for all available options.

</TabStripTab>
<TabStripTab title="VS Code Extension">

### Create a Project with the VS Code Extension

Use the [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-react-ui/components/installation/vscode-extensions/vscode-wizard) to scaffold a project from a template wizard.

1. Install the extension from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=KendoUI.kendotemplatewizard)

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** - Meridian, Bootstrap, Material, Fluent, or Default
   * **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](https://www.telerik.com/kendo-react-ui/components/installation/vscode-extensions/snippets) (type `kr-` in your editor) and a [scaffolding tool](https://www.telerik.com/kendo-react-ui/components/installation/vscode-extensions/scaffolders) for generating complex components like Charts, Forms, and Schedulers.

</TabStripTab>

</TabStrip>

### 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](https://www.telerik.com/design-system/docs/themes/get-started/introduction/):

   ```sh
   npm i @progress/kendo-react-dateinputs @progress/kendo-theme-meridian
   ```

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

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

## Next Steps

We are sure that you are looking for more — [browse the components section](https://www.telerik.com/kendo-react-ui/components/) and discover the amazing features that KendoReact brings to the table.

Happy coding!

<article-card-container>
    <article-card
        href="/grid"
        src="/kendo-react-ui/components/assets/87d0450dc144cd1c2364bc13a9b3a2df/grid.svg"
        darkSrc="/kendo-react-ui/components/assets/87d0450dc144cd1c2364bc13a9b3a2df/grid.svg"
        title="Grid"
        subTitle="UI Component"
        description="Transform data into interactive experiences with powerful sorting, filtering, paging, and editing built right in.">
    </article-card>
    <article-card
        href="/charts"
        src="/kendo-react-ui/components/assets/8d415fb741a84e8ef24df5add8685e95/charts.svg"
        darkSrc="/kendo-react-ui/components/assets/8d415fb741a84e8ef24df5add8685e95/charts.svg"
        title="Charts"
        subTitle="UI Component"
        description="Turn complex datasets into stunning visual stories with 70+ customizable chart types and real-time updates.">
    </article-card>
    <article-card
        href="/form"
        src="/kendo-react-ui/components/assets/00d36791d9162d362cb77b0c1bc04f4e/form.svg"
        darkSrc="/kendo-react-ui/components/assets/00d36791d9162d362cb77b0c1bc04f4e/form.svg"
        title="Form"
        subTitle="UI Component"
        description="Build robust forms effortlessly with automatic validation, field management, and seamless data handling.">
    </article-card>
    <article-card
        href="/ai-tools/agentic-ui-generator"
        title="AI Tools"
        src="/kendo-react-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity-3.svg"
        darkSrc="/kendo-react-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity-3.svg"
        subTitle="Productivity Tools"
        description="Build UIs faster than ever - just describe what you need, and watch AI generate production-ready components instantly.">
    </article-card>
    <article-card
        href="/installation/vscode-extensions"
        title="VS Code Extension"
        src="/kendo-react-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity-3.svg"
        darkSrc="/kendo-react-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity-3.svg"
        subTitle="Productivity Tools"
        description="Boost your productivity with instant project scaffolding, smart snippets, and one-click component generation right in your editor.">
    </article-card>
    <article-card
        href="https://www.telerik.com/design-system/docs/"
        title="Progress Design System"
        src="/kendo-react-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity-3.svg"
        darkSrc="/kendo-react-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity-3.svg"
        subTitle="Productivity Tools"
        description="Create pixel-perfect, accessible interfaces with ready-to-use Figma kits and comprehensive design patterns.">
    </article-card>
</article-card-container>

<style>
[class^="tab-strip-module--container"] {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    padding: 15px;
}

[class^="tab-strip-module--tabList"] [class^="tab-strip-module--tabElement"]:first-child::after {
    content: "Recommended";
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7f6ec;
    color: #1f7a3d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}
</style>