# Getting Started with Kendo UI for Angular

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

<CtaPanelOverview message="@ProductLink is a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial."></CtaPanelOverview>

## Quick Start

Set up your first Kendo UI for Angular 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-angular-ui/components/installation/kendo-cli-angular-setup#interactive-wizard) and direct setup commands. If you are new to Kendo UI for Angular, the wizard gives you the fastest way to start.

1. Install the Kendo CLI and Angular CLI globally:

   ```sh
   npm i -g @progress/kendo-cli@latest @angular/cli
   ```

2. Launch the interactive wizard by running `kendo` with no 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 shows a summary similar to this:

```sh
╭───────────────────────────────────────────────────────────────╮
│  ✓ Kendo UI for Angular app ready                             │
│                                                               │
│  Next steps:                                                  │
│    cd MyBlankAngularApp                                       │
│    npm install                                                │
│    ng serve                                                   │
│                                                               │
│  Theme       Default                                          │
│                                                               │
│  Docs  https://www.telerik.com/kendo-angular-ui/components    │
╰───────────────────────────────────────────────────────────────╯
```

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

> Prefer to run commands manually? See [Generate a Kendo UI for Angular Project](https://www.telerik.com/kendo-angular-ui/components/installation/kendo-cli-angular-setup#generate-a-kendo-ui-for-angular-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-angular-ui/components/installation/vscode-extension) 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 **Kendo UI for Angular** as the project type and select a **Theme** (Meridian, Bootstrap, Material, Fluent, or Default).

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

   ```sh
   npm i && ng serve -o
   ```

The extension also provides [code snippets](https://www.telerik.com/kendo-angular-ui/components/installation/vscode-extension/snippets) (type `kr-` in your editor) and a [scaffolding tool](https://www.telerik.com/kendo-angular-ui/components/installation/vscode-extension/scaffolders) for generating complex components like Charts, Forms, and Schedulers.

</TabStripTab>
</TabStrip>

### Have an Existing Project?

If you want to add any Kendo UI for Angular 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
   ng add @progress/kendo-angular-dateinputs --theme=default
   ```

2. Import the [utility array](https://www.telerik.com/kendo-angular-ui/components/dateinputs/installation/dependecies-and-utils) into your standalone component:

   ```ts
   import { Component } from '@angular/core';
   import { KENDO_DATEINPUTS } from '@progress/kendo-angular-dateinputs';

   @Component({
       selector: 'app-root',
       imports: [KENDO_DATEINPUTS],
       templateUrl: './app.component.html'
   })
   export class AppComponent {}
   ```

3. Add the component to your template:

   ```html
   <kendo-calendar></kendo-calendar>
   ```

## Next Steps

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

Happy coding!

<article-card-container>
    <article-card
        href="/grid"
        src="/kendo-angular-ui/components/assets/87d0450dc144cd1c2364bc13a9b3a2df/grid.svg"
        darkSrc="/kendo-angular-ui/components/assets/87d0450dc144cd1c2364bc13a9b3a2df/grid.svg"
        title="Data 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-angular-ui/components/assets/8d415fb741a84e8ef24df5add8685e95/charts.svg"
        darkSrc="/kendo-angular-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="/inputs/form"
        src="/kendo-angular-ui/components/assets/00d36791d9162d362cb77b0c1bc04f4e/form.svg"
        darkSrc="/kendo-angular-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-angular-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        darkSrc="/kendo-angular-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.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-extension"
        title="VS Code Extension"
        src="/kendo-angular-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        darkSrc="/kendo-angular-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.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-angular-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.svg"
        darkSrc="/kendo-angular-ui/components/assets/8636cf8c61bd24110e830a74dca8296d/productivity.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>