First Steps in Telerik UI for ASP.NET Core with CLI

Updated on Nov 11, 2025

This tutorial shows how to create an ASP.NET Core web application that uses Telerik UI for ASP.NET Core components using the .NET command-line interface (CLI)

You will learn how to create a sample application and add a Telerik UI for ASP.NET Core DatePicker component using either HtmlHelper or TagHelper syntax.

The suggested approach is platform-agnostic—you can apply it for macOS, Linux, and Windows. The steps are applicable for .NET Core projects in Visual Studio Code.

Follow these steps to create and configure your ASP.NET Core application with Telerik UI components:

1. Check the prerequisites
2. Install a license key
3. Create the ASP.NET Core application
4. Integrate UI for ASP.NET Core in the project
5. Add a component.

Prerequisites

• .NET Core SDK
• Telerik account—if you don't have an account yet, you can create one for free.

Installing a License Key

Starting with Telerik UI for ASP.NET Core 2025 Q1 release, you must activate the UI components by providing a license key file. Previous versions require a script key instead of a license key file.

To download and install your Telerik license key:

1. Go to the License Keys page in your Telerik account.
2. Click the Download License Key button.
3. Save the telerik-license.txt file to:
   • (on Windows) %AppData%\Telerik\telerik-license.txt, for example, C:\Users\...\AppData\Roaming\Telerik\telerik-license.txt
   • (on Mac or Linux) ~/.telerik/telerik-license.txt, for example, /Users/.../.telerik/telerik-license.txt

This will make the license key available to all Telerik .NET apps that you develop on your local machine.

The Telerik License Key article provides additional details on installing and updating your Telerik license key in different scenarios. Automatic license key maintenance is more effective and recommended in the long run.

Creating the Application

• If you are configuring an existing project, skip this step.
• For the full list of current commands, refer to the Microsoft guide on getting started with .NET Core.

1. Navigate to the folder of your choice by using the Terminal (cmd). Create a new folder and navigate in it.

   batch

   mkdir MyASPNETCoreProject
   cd MyASPNETCoreProject

2. Create a .NET Core application with the default web MVC template by running dotnet new mvc. The following example demonstrates a sample response that you are expected to receive.

   batch

   dotnet new mvc
   
   Getting ready...
   The template "ASP.NET Core Web App (Model-View-Controller)" was created successfully.
   --
   Restore succeeded.

3. Start the application by running dotnet run. The following example demonstrates a sample response that you are expected to receive.

   batch

   dotnet run
   
   Now listening on: http://localhost:5000
   Application started. Press Ctrl+C to shut down.

4. By using the browser, navigate to the above location and make sure that the application is properly running. After you check the application in the browser, stop the server with Ctrl+C.

Integrating UI for ASP.NET Core

1. Configure the private Telerik NuGet feed in the NuGet.Config file:

   • Ensure you are editing the correct and desired config file. You can also create a new one with the dotnet new nugetconfig command.

   • Add the Telerik package source to the config file. For the authentication, use your NuGet API key as a password and api-key as a username. Add the API key in plain text, because the NuGet tooling does not fully support encrypted credentials. Here is an example of how your NuGet.Config file can look like:

   XML

   <?xml version="1.0" encoding="utf-8"?>
   <configuration>
         <packageSources>
               <!--To inherit the global NuGet package sources remove the <clear/> line below -->
               <clear />
               <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
               <add key="telerik.com" value="https://nuget.telerik.com/v3/index.json" />
         </packageSources>
         <packageSourceCredentials>
               <telerik.com>
                     <add key="Username" value="api-key>" />
                     <add key="ClearTextPassword" value="YOUR-NUGET-API-KEY" />
               </telerik.com>
         </packageSourceCredentials>
   </configuration>

2. Install Telerik UI for ASP.NET Core through the CLI by running dotnet add package Telerik.UI.for.AspNet.Core.

3. Register the Kendo UI service in the services container.

   • For applications using .NET 6 and the minimal hosting model, open the Program.cs file and register the Kendo UI service.
   C#

   var builder = WebApplication.CreateBuilder(args);
   
   // Add Kendo UI services to the services container.
   builder.Services.AddKendo();

   • For applications using .NET 5 or earlier, open the Startup.cs file and register the Kendo UI services in the ConfigureServices method.
   C#

   public void ConfigureServices(IServiceCollection services)
   {
   	// Add the Kendo UI services to the services container.
   	services.AddKendo();
   }

4. Import the Kendo.Mvc.UI namespace in ~/Views/_ViewImports.cshtml through @using Kendo.Mvc.UI. If you intend to use the Telerik UI ASP.NET Core Tag Helpers, add them with @addTagHelper *, Kendo.Mvc.

   C#

       @using MyTelerikProject
       @using MyTelerikProject.Models
       @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
       @addTagHelper *, Kendo.Mvc
       @using Kendo.Mvc.UI

5. Include the required client-side resources.

   5.1 Go to ~\Views\Shared\_Layout.cshtml and add the theme of your choice to the <head> of the document. Since the Microsoft project uses Bootstrap, you can use the Telerik UI Bootstrap theme to match it:

   HTML

     <head>
           ...
           <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
           <link rel="stylesheet" href="~/css/site.css" />
   
           @* Add the Kendo Bootstrap theme: *@
           <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" />
           ...
     </head>

   5.2 The ASP.NET Core Web App template template comes with a jQuery script reference at the end of _Layout.cshtml file. Find the jquery.min.js script line in the <body> of the document and move it to the <head>. Alterantively, use the jQuery script hosted on the jQuery CDN.

   HTML

     <head>
           ...
           <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
           <link rel="stylesheet" href="~/css/site.css" />
           <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" />
   
           <script src="~/lib/jquery/dist/jquery.js"></script>
           @* Add the jQuery script from the jQuery CDN: *@
           <!--<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
           ...
     </head>

   5.3 Add the required Kendo UI script files in the <head> tag after the jQuery script reference:

   HTML

     <head>
           ...
           <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
           <link rel="stylesheet" href="~/css/site.css" />
           <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" />
   
           <script src="~/lib/jquery/dist/jquery.js"></script>
           @* Add the jQuery script from the jQuery CDN: *@
           <!--<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
   
           <script src="https://kendo.cdn.telerik.com/2025.4.1111/js/kendo.all.min.js"></script>
           <script src="https://kendo.cdn.telerik.com/2025.4.1111/js/kendo.aspnetmvc.min.js"></script>
     </head>

• The kendo.all.min.js and kendo.aspnetmvc.min.js scripts must be loaded after the jquery.min.js script.
• jQuery must be loaded only once. Ensure there are no duplicate references elsewhere in the _Layout.
• Starting with version 2023.3.1010, the Kendo UI bundles do not include the jQuery library in their js directories and you can use any available jQuery source you prefer (https://jquery.com/download/).

If you prefer to include the client-side resources from a local source instead of CDNs, refer to the Local Client-Side Resources article.

Adding a Telerik UI Component

The default casing for JSON strings in ASP.NET Core is camelCase. The Telerik UI components that are data-bound depend on PascalCase formatted response from the server. If the JSON serialization isn't configured properly, the UI components will display wrong data. To find out how to configure the application to return the data in Pascal-case, refer to the JSON Serialization article.

1. Define the Telerik UI DatePicker component by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

   Razor

   <div class="text-center">
         <h2>Kendo UI DatePicker</h2>
         @(Html.Kendo().DatePicker()
               .Name("my-picker")
         )
   </div>

   Razor

   @addTagHelper *, Kendo.Mvc
   
   <div class="text-center">
         <h2>Kendo UI DatePicker</h2>
         <kendo-datepicker name="my-picker"/>
   </div>

2. Navigate to the project folder by using the terminal (cmd) and run the project through the dotnet run command. The Index page will display a DatePicker.

   

Next Steps

• Use data-bound components
• Download and install UI for ASP.NET Core (overview)
• Create your own custom bundles
• How to update UI for ASP.NET Core to a new version
• Switch from Trial to Commercial License

See Also

• Installing UI for ASP.NET Core by Using the CDN Services
• Installing UI for ASP.NET Core with NuGet
• Migrating from MVC to Core MVC
• MS - Upgrade from ASP.NET Framework to ASP.NET Core