# Quick Start with Kendo UI for jQuery

This article explains how to use Kendo UI for jQuery in a new application. You will create a project and add a UI component.

<CtaPanelIntroduction></CtaPanelIntroduction>

## Quick Start

Set up your first Kendo UI for jQuery project and start building in minutes. Use the [Kendo CLI](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/kendo-cli) for fast command-line scaffolding or the [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/vscode-integration) for a visual, wizard-driven experience.

<TabStrip>
<TabStripTab title="CLI">

The [Kendo CLI](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/kendo-cli) offers both an [interactive wizard](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/kendo-cli#kendo-create-jquery) and direct setup commands. If you are new to Kendo UI for jQuery, the wizard gives you the fastest way to start.

1. Install the Kendo CLI globally:

   ```SH.skip-repl
   npm i -g @progress/kendo-cli@latest
   ```

2. Launch the interactive wizard by running `kendo` with no arguments:

   ```SH.skip-repl
   kendo
   ```

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

When the setup is complete, the wizard shows a summary similar to this:

```sh
╭───────────────────────────────────────────────────────────────╮
│  ✓ Kendo UI for jQuery app ready                              │
│                                                               │
│  Next steps:                                                  │
│    cd MyApp                                                   │
│    npm install                                                │
│    npm start                                                  │
│                                                               │
│  Theme       Default                                          │
│                                                               │
│  Docs  https://www.telerik.com/kendo-jquery-ui/documentation  │
╰───────────────────────────────────────────────────────────────╯
```

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 jQuery Project](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/kendo-cli#kendo-create-jquery) for all available options and templates.

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

Use the [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/vscode-integration) 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. On Windows, open the **VS Code Command Palette** (`Ctrl + Shift + P`). On macOS, use (`Command + Shift + P`). Type **"Kendo UI Template Wizard: Launch"**.

3. Set the project **name** and **path**, choose **Kendo UI for jQuery** as the project type and select a **Theme** (Meridian, Default, Bootstrap, Material, Fluent, or Classic).

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

   ```SH.skip-repl
   npm i && npm start
   ```

</TabStripTab>
</TabStrip>

## Have an Existing Project?

If you want to add Kendo UI for jQuery components to an existing project, add the required scripts and styles manually:

1. Add the [Kendo UI theme](https://www.telerik.com/design-system/docs/themes/get-started/introduction/) and scripts to your HTML page:

   ```html
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@progress/kendo-theme-default@14.9.0/dist/default-main.css" />

   
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

   
   <script src="https://cdn.jsdelivr.net/npm/@progress/kendo-ui@2026.4.1111/umd/kendo.all.min.js"></script>
   ```

2. Initialize a Kendo UI component:

   ```html
   <input id="my-datepicker" />

   <script>
       $(function() {
           $("#my-datepicker").kendoDatePicker();
       });
   </script>
   ```

If you prefer installing through a package manager you can also [install Kendo UI for jQuery with npm](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/npm).

You now have your first Kendo UI for jQuery component running in your application.

## Next Steps

<article-card-container>
    <article-card
        href="/ai-assistant/overview"
        src="/kendo-jquery-ui/documentation/assets/1a95789349616f5a96ee349e0f03d262/chat_light_large.svg"
        title="Use Agentic UI Generator"
        darkSrc="/kendo-jquery-ui/documentation/assets/92205189ccd98ce83506bf206bddeeee/chat_dark_large.svg"
        description="Use the Agentic UI Generator to get intelligent, context-aware help while building your Kendo UI for jQuery application.">
    </article-card>
    <article-card
        href="/introduction#list-of-components"
        src="/kendo-jquery-ui/documentation/assets/34f07dcdfb06e61deacd0ae611ead0fe/editor_ai_integration_light_large.svg"
        title="Use Components"
        darkSrc="/kendo-jquery-ui/documentation/assets/5afbc2e3509e38a68fa2c0e148bc4e84/editor_ai_integration_dark_large.svg"
        description="Check the list of available Kendo UI for jQuery components.">
    </article-card>
    <article-card
        href="https://demos.telerik.com/kendo-ui"
        src="/kendo-jquery-ui/documentation/assets/ef4e202163f8ba624ebe354cb8e2552b/grid_ai_chat_integration_light_large.svg"
        title="Browse Online Demos"
        darkSrc="/kendo-jquery-ui/documentation/assets/90e1c198dfd43aaf9faecb945f01dbe0/grid_ai_chat_integration_dark_large.svg"
        description="Explore the live Kendo UI for jQuery examples.">
    </article-card>
    <article-card
        href="/controls/grid/overview"
        src="/kendo-jquery-ui/documentation/assets/7185053acf61adc250a4ceafff0b2e73/ai_data_highlight_light_large.svg"
        title="Get Started with Data Grid"
        darkSrc="/kendo-jquery-ui/documentation/assets/9e911fc67a1caa240633cd7385231867/ai_data_highlight_dark_large.svg"
        description="Bind the Kendo UI for jQuery Grid to data and choose from the large variety of built-in features.">
    </article-card>
    <article-card
        href="/framework/datasource/overview"
        src="/kendo-jquery-ui/documentation/assets/97bf251c25d62741f119c17febd0aa5c/ai_column_assistant_light_large.svg"
        title="Learn Telerik Data Binding"
        darkSrc="/kendo-jquery-ui/documentation/assets/14d39c54f99f4a661e9ef641b95d3610/ai_column_assistant_dark_large.svg"
        description="Learn the data binding fundamentals for Kendo UI for jQuery components.">
    </article-card>
    <article-card
        href="/styles-and-layout/sass-themes/overview"
        src="/kendo-jquery-ui/documentation/assets/16321f5a65c2a527641999ce3ccfa3a1/aiprompt_light_large.svg"
        title="Create Themes"
        darkSrc="/kendo-jquery-ui/documentation/assets/fd20d47973fa3004bcf03f1cc2bcbff3/aiprompt_dark_large.svg"
        description="Review the built-in themes, customize them, or create your own.">
    </article-card>
</article-card-container>

## See Also

* [Downloading the Kendo UI Bundles](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/hosting-kendoui)
* [Creating Custom Bundles](https://www.telerik.com/kendo-jquery-ui/documentation/intro/creating-custom-bundles)
* [Video Onboarding](https://www.telerik.com/kendo-jquery-ui/documentation/intro/video-onboarding)
* [Licensing Overview](https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/licensing/overview)

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