# Creating New Telerik UI for ASP.NET Core Projects

This article demonstrates how to create a new Telerik UI for ASP.NET Core application by using the templates that come with the Telerik Extensions for Visual Studio. The newly created project will have the required setup that enables you to immediately start using the Telerik UI for ASP.NET Core components.

To use the project templates, you start the **Create New Project Wizard** provided by the Telerik UI for ASP.NET Core Visual Studio Extensions. With the project templates, you can quickly deploy popular components like Grid and Menu or even entire applications. You don't need to manually [add the client-side resources](https://www.telerik.com/aspnet-core-ui/documentation/installation/adding-client-side-resources/getting-started-copy-client-resources)—the **Create New Project Wizard** handles this task for you.

## Getting the Wizard

To use the **Create New Project Wizard**, [install the Telerik UI for ASP.NET Core Extension](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/introduction#installing-the-extensions).

> If you have an older version of the Telerik Extensions for Visual Studio and you want to create a new Telerik UI for ASP.NET Core project with version 2023.1.314 (R1 2023 SP1), or a newer version of the components, you must first update the Telerik Extension. To download and install the latest version of the Telerik Extensions, follow the [Installing from Visual Studio Marketplace](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/introduction#installing-from-visual-studio-marketplace) instructions.

## Using the Wizard

> The exact steps to start the wizard may vary between the different Visual Studio versions. The following instructions describe the steps for Visual Studio 2022.

To create a new Telerik UI for ASP.NET Core application, use the **Create New Project Wizard**. The wizard detects all installed versions of Telerik UI for ASP.NET Core and lists them in the **Version** dropdown—this enables you to apply the desired version to your project.

To start the wizard, use either of the following approaches:

* Using the Visual Studio 2022 **Extensions** menu:

  1. Go to **Extensions** > **Telerik** >  **Telerik UI for ASP.NET Core**.
  2. Click **Create New Telerik Project**.

  ![UI for ASP.NET Core Visual Studio Extensions menu](https://www.telerik.com/aspnet-core-ui/documentation/assets/891f929864bdd48399830cd6b7bf306f/create-project-core.png)

* Using the **Project** menu:

  1. Click **File** > **New** > **Project**.
  2. Type **Telerik** in the **Search for templates** textbox. Click on the **Telerik C# ASP.NET Core MVC Application**.

  ![UI for ASP.NET Core New project Template](https://www.telerik.com/aspnet-core-ui/documentation/assets/4a579631ebfd2ef1b88e1d2432521191/new-project-template-core.png)

## Configuring the Project

With the **Create New Project Wizard** you can select the desired:

* Target framework
* Tag or HTML Helpers
* Telerik UI Version
* Project Template
* Visual Theme

### Essentials

![UI for ASP.NET Core The ASP.NET version options](https://www.telerik.com/aspnet-core-ui/documentation/assets/fbacaea5e20123f4eb89b65fda1d26a5/essentials.png)

#### Target Framework

The **Create New Project Wizard** allows you to select a target **Framework**.

> Note
>
> If the target **Framework** dropdown is disabled check the troubleshooting [section](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/troubleshooting#the-target-framework-dropdown-is-disabled).

#### ASP.NET Core helper

You can choose if you want the template project to use [HtmlHelpers or TagHelpers](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/helper-basics/overview) in its Views.
In this article, we use the **HTML** option.

#### Select Version

The Project wizard allows you to select the desired version of UI for ASP.NET Core. If a newer version is available but it is not downloaded on the machine, you can get it without exiting the wizard.

### Available Templates

The following project templates are available:

![UI for ASP.NET Core Project template options](https://www.telerik.com/aspnet-core-ui/documentation/assets/4610abe037916e1e137fcdc1f9a02917/available-templates.png)

<table>
    <colgroup>
        <col width="25%"></col>
        <col></col>
    </colgroup>
    <tbody>
        <tr>
            <th >Project</th>
            <th>Description</th>
        </tr>
        <tr>
            <td><strong>Blank</strong></td>
            <td><p>The Blank template allows you to quickly scaffold Telerik UI for ASP.NET Core applications.</p><p>The template has the package references and the client-side resources loaded in the <code>_Layout.cshtml</code> file. It also features the expected <a href="https://docs.telerik.com/aspnet-core/installation/json-serialization">JSON serialization configuration</a> in the <code>Program.cs</code> file. The default editor templates are included in the <code>~Views\Shared\EditorTemplates</code> folder.</p></td>
        </tr>
        <tr>
            <td><strong>Standard</strong></td>
            <td><p>The Standart template lets you jump quickly into three example pages with integrated PanelBar, Cards, and TabStrip components.</p><p>The Standard template features:</p>
                <ul>
                    <li> Everything from the <strong>Blank Project<strong>.</li>
                    <li> A Responsive Panel and Menu in <code>_Layout.cshtml</code>.</li>
                    <li> A PanelBar in <code>Index.cshtml</code>.</li>
                    <li> A TabStrip in <code>Contact.cshtml</code>.</li>
                    <li> An HTML styled with <a href="https://docs.telerik.com/aspnet-core/knowledge-base/cards">Cards</a> in <code>About.cshtml</code>.</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td><strong>Grid with TabStrip</strong></td>
            <td><p>This template illustrates the usage of Grid and TabStrip components in an application running in strict CSP mode.</p><p>Grid with TabStrip template features:</p>
                <ul>
                    <li> A Menu in <code>_Layout.cshtml</code>.</li>
                    <li> A Detail Grid with a TabStrip in <code>Index.cshtml</code>.</li>
                    <li> A Child Grid in <code>_Child_Grid.cshtml</code>.</li>
                    <li> A <a href='https://docs.telerik.com/aspnet-core/html-helpers/helper-basics/deferred-initialization#deferring-components-globally' target="_blank">DeferredToScriptFiles</a> setting in <code>Program.cs</code>.
                    </li>
                    <li>
                       A <code>KendoDeferredScripts</code> Middleware in <code>Program.cs</code>.
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td><strong>Grid and Menu</strong></td>
            <td><p>The Grid and Menu template contains a Grid, Menu, and Buttons as a starting point for your Telerik UI for ASP.NET Core application.</p><p>The Grid and Menu template features:</p>
                <ul>
                    <li> Everything from the <strong>Blank Project</strong>.</li>
                    <li> Buttons and Grid in <code>Index.cshtml</code>.</li>
                    <li> A Responsive Panel and Menu in <code>_Layout.cshtml</code>.</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td><strong>Grid Razor Pages</strong></td>
            <td><p>The Grid Razor Pages template includes everything from the <strong>Blank Project</strong>. It features an editable grid in <code>Index.cshtml</code> that uses handlers for the CRUD data operations. The <code>AntiForgeryToken</code> is set up, as well.</p></td>
        </tr>
        <tr>
            <td><strong>Dashboard</strong></td>
            <td><p>The Dashboard template lets you quickly develop dashboards and dashboard-like applications using the built-in TileLayout, Charts, and Grid components.</p><p>The Dashboard template features:</p>
                <ul>
                    <li> Everything from the <strong>Blank Project</strong> except the editor templates folder.</li>
                    <li> A TileLayout with Charts and Grids in the <code>Index.cshtml</code> as well as shared DataSource and dynamically populated templates.</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td><strong>Admin</strong></td>
            <td><p>The Admin template lets you jump quickly into the action of a complete app developed using Telerik UI for ASP.NET Core.</p><p>The Admin is a Razor Pages template configured with <a href="https://docs.telerik.com/aspnet-core/tag-helpers/overview">TagHelpers</a>. It features:</p>
                <ul>
                    <li>Everything from the <strong>Blank Project</strong>.</li>
                    <li>Authentication functionallity (Registration, Login, and Logout) in <code>Areas/Login/Pages</code>.</li>
                    <li>A navigation that is created by using the <a href="https://docs.telerik.com/aspnet-core/tag-helpers/navigation/drawer/overview">Drawer</a> and <a href="https://docs.telerik.com/aspnet-core/tag-helpers/navigation/appbar/overview">AppBar</a> components.</li>
                    <li>A <a href="https://docs.telerik.com/aspnet-core/tag-helpers/layout/tilelayout/overview">TileLayout</a> with <a href="https://docs.telerik.com/aspnet-core/styles-and-layout/cards">Cards</a>, <a href="https://docs.telerik.com/aspnet-core/tag-helpers/gauges/arcgauge/overview">Arc Gauge</a>, <a href="https://docs.telerik.com/aspnet-core/tag-helpers/charts/overview">Chart</a> and <a href="https://docs.telerik.com/aspnet-core/tag-helpers/data-management/grid/overview">Grid</a> in <code>Index.cshtml</code>.</li>
                    <li>A <a href="https://docs.telerik.com/aspnet-core/tag-helpers/layout/tilelayout/overview">TileLayout</a> with a variety of <a href="https://docs.telerik.com/aspnet-core/tag-helpers/charts/overview">Charts</a> and <a href="https://docs.telerik.com/aspnet-core/tag-helpers/gauges/radialgauge/overview">Gauges</a> in <code>Performance.cshtml</code>.</li>
                    <li>A <a href="https://docs.telerik.com/aspnet-core/tag-helpers/layout/tilelayout/overview">TileLayout</a> with <a href="https://docs.telerik.com/aspnet-core/tag-helpers/charts/overview">Bubble Chart</a> and <a href="https://docs.telerik.com/aspnet-core/html-helpers/data-management/listview/overview">ListView</a> with editable <a href="https://docs.telerik.com/aspnet-core/styles-and-layout/cards">Cards</a> in <code>Products.cshtml</code> as well as <a href="https://docs.telerik.com/aspnet-core/tag-helpers/data-management/pager/overview">Pager</a> and search panel.</li>
                    <li>A <a href="https://docs.telerik.com/aspnet-core/tag-helpers/layout/tilelayout/overview">TileLayout</a> with <a href="https://docs.telerik.com/aspnet-core/tag-helpers/layout/form/overview">Form</a> and <a href="https://docs.telerik.com/aspnet-core/tag-helpers/scheduling/calendar/overview">Calendar</a> in <code>Settings.cshtml</code>.</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

## Review the Grid Component

The project templates configure the application for Telerik UI and can include a Grid with data binding. The Blank template also includes the expected [JSON serialization configuration](https://www.telerik.com/aspnet-core-ui/documentation/installation/json-serialization) in `Program.cs`.

To review the Grid in the generated project:

1. Add an `OrderViewModel` class to the `Models` folder.

2. Create a `GridController` with an `Orders_Read` action that returns the Grid data through `ToDataSourceResult`.

3. Add a Grid to `Views/Home/Index.cshtml` and configure its columns, paging, sorting, scrolling, filtering, and Ajax data source.

The generated project includes the required Telerik references and resources. You can run the project and use the Grid immediately.

## Add a DatePicker Component

Add a [DatePicker](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/datepicker/overview) to `Views/Home/Index.cshtml` using the helper syntax selected in the project wizard:

```Razor HtmlHelper
@(Html.Kendo().DatePicker()
    .Name("my-picker")
)
```

```Razor TagHelper
<kendo-datepicker name="my-picker" />
```

Run the project and open the `Index` page in the browser to view the DatePicker.

## Change the Application Theme

The project wizard applies the selected theme to the application. To change it later, replace the theme reference in `_Layout.cshtml`. For example, use the following CSS reference for the Default theme:

```HTML
<link href="https://kendo.cdn.telerik.com/themes/14.6.1/default/default-main.css" rel="stylesheet" type="text/css" />
```

The [SASS-based themes](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/sass-themes/overview) do not require additional CSS files.

> Starting with version 2025 Q1, all templates enforce strict CSP mode.

### Themes

The **Select Theme** option allows you to preview the available Kendo UI themes and select the desired one. After selecting a theme, the project will include only the files that are required by the selected theme in the `_Layout.cshtml`.

![UI for ASP.NET Core Project Wizard Select Theme](https://www.telerik.com/aspnet-core-ui/documentation/assets/efbab6bb21fe1c042b856e37e5c3e66b/themes.png)

## Creating the Application

After configuring the settings of the project, click **Finish** to start creating the new Telerik UI for ASP.NET Core application.

As a result, the wizard:

* Creates a new ASP.NET Core application.

* Adds CDN references for the Kendo UI styles and scripts to the `_Layout.cshtml` file of the project.

* Copies all Kendo UI editor templates.

* Adds a package reference to the `Telerik.UI.for.AspNet.Core` NuGet package.

The wizard creates a `Templates` folder in the root of the application. By default, the `Templates` folder is not visible and is not included in the project. To display it, select the **Show All Files** button in the **Solution Explorer** of Visual Studio.

## Install or Update License Key

If necessary, the Telerik Visual Studio extension will notify you about a missing or outdated [license key](https://www.telerik.com/aspnet-core-ui/documentation/installation/activating-your-license/setting-up-your-license), and will install or update it.

## See Also

* [Converting Existing Projects with Visual Studio](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/convert-project-wizard)
* [Integrating Visual Studio in Your .Net Project (Overview)](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/introduction)
* [Downloading the Latest Telerik UI for ASP.NET Core Versions](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/latest-version-retrieval)