Getting Started with Kendo UI for jQuery

Updated on Aug 5, 2026

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

Quick Start

Set up your first Kendo UI for jQuery project and start building in minutes. Use the Kendo CLI for fast command-line scaffolding or the Kendo UI Productivity Tools extension for VS Code for a visual, wizard-driven experience.

CLIVS Code Extension

The Kendo CLI offers both an interactive wizard 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

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

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 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 for all available options and templates.

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

   npm i && npm start

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 and scripts to your HTML page:

   html

   <!-- Kendo UI theme -->
   <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/14.5.0/default/default-main.css" />
   
   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   
   <!-- Kendo UI scripts -->
   <script src="https://kendo.cdn.telerik.com/2026.3.811/js/kendo.all.min.js"></script>

2. Initialize a Kendo UI component:

   html

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

Prefer installing through a package manager? See Installing with NPM.

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

Next Steps

Get Started with Data Grid

 

Bind the Kendo UI for jQuery Grid to data and choose from the large variety of built-in features.

Learn Telerik Data Binding

 

Learn the data binding fundamentals for Kendo UI for jQuery components.

Use Components

 

Check the list of available Kendo UI for jQuery components.

Browse Online Demos

 

Explore the live Kendo UI for jQuery examples.

Create Themes

 

Review the built-in themes, customize them, or create your own.

Use Telerik AI Tools

 

Kendo UI for jQuery provides AI-powered development assistance through a unified MCP server that delivers intelligent, context-aware help directly in your IDE.

See Also

• Creating Custom Bundles
• Video Onboarding
• Licensing Overview