# Quick Start with Telerik UI for ASP.NET Core

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.

<CtaPanelIntroduction></CtaPanelIntroduction>

## Prerequisites

To successfully complete the steps in this tutorial, install the [.NET Core SDK](https://dotnet.microsoft.com/download/dotnet).

## Set Up Telerik Development Environment

The fastest way to set up your Telerik development environment is to use the [Telerik CLI](https://www.telerik.com/aspnet-core-ui/documentation/installation/telerik-cli) .NET tool. Run the following commands in your preferred command shell (Visual Studio Terminal, cmd, PowerShell, Bash, macOS Terminal, or other).

> tip If you have already set up your Telerik development environment and it doesn't need updating, skip to [Create New ASP.NET Core App](https://www.telerik.com/aspnet-core-ui/documentation/getting-started-core/first-steps#create-new-aspnet-core-app).

1. Install Telerik CLI

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

2. Run the Telerik CLI `setup` command:

   ```SH.skip-repl
   telerik setup aspnetcore
   ```

The [`setup` command performs multiple actions](https://www.telerik.com/aspnet-core-ui/documentation/installation/telerik-cli#set-up-telerik-environment) 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](https://www.telerik.com/aspnet-core-ui/documentation/getting-started-core/first-steps#set-up-telerik-development-environment).

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

<TabStrip>
<TabStripTab title=".NET CLI">

1. Create a new ASP.NET Core MVC project:

   ```SH.skip-repl
   mkdir MyASPNETCoreProject
   cd MyASPNETCoreProject
   dotnet new mvc
   ```

2. Add the Telerik UI for ASP.NET Core NuGet package:

   ```SH.skip-repl
   dotnet add package Telerik.UI.for.AspNet.Core
   ```

</TabStripTab>
<TabStripTab title="Project Template">

1. Install the Telerik UI for ASP.NET Core [Visual Studio extension](https://marketplace.visualstudio.com/items?itemName=TelerikInc.ProgressTelerikASPNETCoreVSExtensions).

2. In Visual Studio, create a new **Telerik ASP.NET Core MVC Application** from the Telerik project templates.

3. Follow [Creating New Telerik UI for ASP.NET Core Projects](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/new-project-wizard) 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](https://www.telerik.com/aspnet-core-ui/documentation/getting-started-core/first-steps#configure-the-application) and [Add Telerik Component](https://www.telerik.com/aspnet-core-ui/documentation/getting-started-core/first-steps#add-telerik-component) sections.

</TabStripTab>
<TabStripTab title="Visual Studio">

1. Open Visual Studio and select **Create a new project**.

2. Search for **Model-View-Controller**, select the **ASP.NET Core Web App (Model-View-Controller)** C# template, and then select **Next**.

3. Enter **MyASPNETCoreProject** as a project name, and then select **Next**.

4. Select a target framework and select **Create**.

5. Open the **NuGet Package Manager** (**Tools** > **NuGet Package Manager** > **Manage NuGet Packages for Solution**).

6. Select the **TelerikNuGetV3** package source, search for `Telerik.UI.for.AspNet.Core`, and install the package.

</TabStripTab>
</TabStrip>

### Configure the Application

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

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

   ```C#
   var builder = WebApplication.CreateBuilder(args);

   builder.Services.AddControllersWithViews();

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

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

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

3. 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://cdn.jsdelivr.net/npm/@@progress/kendo-theme-default@14.9.0/dist/default-main.css" />

       <script src="~/lib/jquery/dist/jquery.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/@@progress/kendo-ui@2026.4.1111/umd/kendo.all.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/@@progress/kendo-ui@2026.4.1111/umd/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 HtmlHelper
<div class="text-center">
    <h2>Kendo UI DatePicker</h2>
    @(Html.Kendo().DatePicker()
        .Name("my-picker")
    )
</div>
```

```Razor TagHelper
<div class="text-center">
    <h2>Kendo UI DatePicker</h2>
    <kendo-datepicker name="my-picker">
    </kendo-datepicker>
</div>
```

Run the application:

```sh
dotnet run
```

Upon successful run in a web browser, the new Telerik ASP.NET Core app looks like this:

![UI for ASP.NET Core Sample page](https://www.telerik.com/aspnet-core-ui/documentation/assets/789e79b65741755012909bab210ef53f/sample-page.png)

Well done! Now you have your first Telerik UI for ASP.NET Core component running in your ASP.NET Core application.

## Next Steps

<article-card-container>
    <article-card
        href="/ai-core/agentic-ui-generator/overview"
        src="/aspnet-core-ui/documentation/assets/1a95789349616f5a96ee349e0f03d262/chat_light_large.svg"
        title="Use Telerik AI Tools"
        darkSrc="/aspnet-core-ui/documentation/assets/92205189ccd98ce83506bf206bddeeee/chat_dark_large.svg"
        description="Telerik UI for ASP.NET Core provides AI-powered development assistance through a unified MCP server that delivers intelligent, context-aware help directly in your IDE.">
    </article-card>
    <article-card
        href="/introduction#list-of-helpers"
        src="/aspnet-core-ui/documentation/assets/34f07dcdfb06e61deacd0ae611ead0fe/editor_ai_integration_light_large.svg"
        title="Use Components"
        darkSrc="/aspnet-core-ui/documentation/assets/5afbc2e3509e38a68fa2c0e148bc4e84/editor_ai_integration_dark_large.svg"
        description="Check the list of available Telerik UI for ASP.NET Core components.">
    </article-card>
    <article-card
        href="https://demos.telerik.com/aspnet-core"
        src="/aspnet-core-ui/documentation/assets/ef4e202163f8ba624ebe354cb8e2552b/grid_ai_chat_integration_light_large.svg"
        title="Browse Online Demos"
        darkSrc="/aspnet-core-ui/documentation/assets/90e1c198dfd43aaf9faecb945f01dbe0/grid_ai_chat_integration_dark_large.svg"
        description="Explore the live Telerik UI for ASP.NET Core examples.">
    </article-card>
    <article-card
        href="/html-helpers/data-management/grid/overview"
        src="/aspnet-core-ui/documentation/assets/7185053acf61adc250a4ceafff0b2e73/ai_data_highlight_light_large.svg"
        title="Get Started with Data Grid"
        darkSrc="/aspnet-core-ui/documentation/assets/9e911fc67a1caa240633cd7385231867/ai_data_highlight_dark_large.svg"
        description="Bind the Telerik UI for ASP.NET Core Grid to data and choose from the large variety of built-in features.">
    </article-card>
    <article-card
        href="/html-helpers/datasource/overview"
        src="/aspnet-core-ui/documentation/assets/97bf251c25d62741f119c17febd0aa5c/ai_column_assistant_light_large.svg"
        title="Learn Telerik Data Binding"
        darkSrc="/aspnet-core-ui/documentation/assets/14d39c54f99f4a661e9ef641b95d3610/ai_column_assistant_dark_large.svg"
        description="Learn the data binding fundamentals for Telerik UI for ASP.NET Core components.">
    </article-card>
    <article-card
        href="/styles-and-layout/sass-themes/overview"
        src="/aspnet-core-ui/documentation/assets/16321f5a65c2a527641999ce3ccfa3a1/aiprompt_light_large.svg"
        title="Create Themes"
        darkSrc="/aspnet-core-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

* [Creating New Projects with Visual Studio](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/new-project-wizard)
* [Using Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/getting-started/razor-pages)
* [Video Onboarding](https://www.telerik.com/aspnet-core-ui/documentation/getting-started/video-onboarding)
* [Setting Up Your License Key](https://www.telerik.com/aspnet-core-ui/documentation/installation/activating-your-license/setting-up-your-license)
* [JSON Serialization](https://www.telerik.com/aspnet-core-ui/documentation/installation/json-serialization)

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