First Steps with Telerik UI for ASP.NET Core

Updated on Aug 14, 2026

This article explains how to use the Telerik UI for ASP.NET Core components in an ASP.NET Core MVC application. You will set up your Telerik development environment, create a new application from scratch, and finally, add a UI component to a View.

New to Telerik UI for ASP.NET Core?Telerik UI for ASP.NET Core 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.Start Free Trial

Prerequisites

To successfully complete the steps in this tutorial, install the .NET Core SDK.

Set Up Telerik Development Environment

The fastest way to set up your Telerik development environment is to use the Telerik CLI .NET tool. Run the following commands in your preferred command shell (Visual Studio Terminal, cmd, PowerShell, Bash, macOS Terminal, or other).

If you have already set up your Telerik development environment and it doesn't need updating, skip to Create New ASP.NET Core App.

Install Telerik CLI

dotnet tool install -g Telerik.CLI --source https://api.nuget.org/v3/index.json

Run the Telerik CLI setup command:
SH
```
telerik setup aspnetcore
```

The setup command performs multiple actions to configure your Telerik development environment:

Create your Telerik account or log in if you already have one.
Activate a Telerik UI for ASP.NET Core trial if you don't have an active license.
Download your Telerik license key.
Configure the Telerik NuGet package source.
Install the Telerik UI for ASP.NET Core MCP server.

Create New ASP.NET Core App

This section assumes that you have successfully completed the Telerik-specific setup in the previous step.

To create a new Telerik ASP.NET Core app, use your preferred approach:

.NET CLI Visual Studio Project Template

Create a new ASP.NET Core MVC project:

mkdir MyASPNETCoreProject
cd MyASPNETCoreProject
dotnet new mvc

Add the Telerik UI for ASP.NET Core NuGet package:
SH
```
dotnet add package Telerik.UI.for.AspNet.Core
```

Open Visual Studio and select Create a new project.
Search for Model-View-Controller, select the ASP.NET Core Web App (Model-View-Controller) C# template, and then select Next.
Enter MyASPNETCoreProject as a project name, and then select Next.
Select a target framework and select Create.
Open the NuGet Package Manager (Tools > NuGet Package Manager > Manage NuGet Packages for Solution).
Select the TelerikNuGetV3 package source, search for Telerik.UI.for.AspNet.Core, and install the package.

Install the Telerik UI for ASP.NET Core Visual Studio extension.
In Visual Studio, create a new Telerik ASP.NET Core MVC Application from the Telerik project templates.
Follow Using a Telerik UI for ASP.NET Core Project Template in VS for Windows for the complete workflow and screenshots.

When you use the project template approach, the generated application is already configured for Telerik UI and includes Telerik components. Skip the Configure the Application and Add Telerik Component sections.

To manually add Telerik UI for ASP.NET Core to an existing app, follow the First Steps with CLI article.

Configure the Application

After creating the project and adding the NuGet package, configure the application to use Telerik UI for ASP.NET Core:

Register the Kendo UI service in the Program.cs file. Add builder.Services.AddKendo() after AddControllersWithViews():

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();

// Add Kendo UI services to the services container.
builder.Services.AddKendo();

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

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

Add the client-side resources in ~/Views/Shared/_Layout.cshtml. Add the theme CSS in the <head> and make sure jQuery is referenced before the Kendo scripts:

HTML

<head>
    ...
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/14.5.0/default/default-main.css" />

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="https://kendo.cdn.telerik.com/2026.3.811/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2026.3.811/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.

Add Telerik Component

Add a new Telerik component. For example, add a Telerik UI for ASP.NET Core DatePicker to ~/Views/Home/Index.cshtml:

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