Creating New Projects
This article demonstrates how to use the Telerik Visual Studio extensions to create a new project that is pre-configured for the Progress® Telerik® UI for Blazor components.
To create a new Telerik UI for Blazor application, use the Create New Project wizard. The wizard detects all installed versions of Telerik UI for Blazor and lists them in the Version dropdown for selection. To make sure the components are up-to-date, you can also get the latest version.
How It Works
The Create New Project wizard automates a set of steps that you otherwise must perform manually.
The wizard adds the following client assets to your project:
The wizard also configures the project to use the Telerik UI for Blazor components by adding the following utilities:
-
Required
@using
directives to the~/_Imports.razor
file. -
TelerikLayout.razor
component containing theTelerikRootComponent
. - Registration of the Telerik services.
Getting the Wizard
To use the Create New Telerik Project wizard, install the Telerik UI for Blazor Visual Studio Extension. You can get the extension from:
- The Visual Studio Marketplace (for Visual Studio 2022 for Windows and Visual Studio 2019 for Windows).
- The Telerik UI for Blazor automated installer (for Windows and Mac).
- Your Telerik.com account (for Mac only). Download the
.mpack
file and use the "Install from file..." button on the Visual Studio Extensions dialog.
Our extention for Visual Studio for Mac will be discontinued in 2024 after Visual Studio for Mac is discontinued.
Starting the Wizard
To start the wizard, use either of the following options:
Extensions Menu
- Open the Extensions menu.
- Click Telerik > Telerik UI for Blazor > Create New Project.
- Follow the instructions.
Project Menu
- Click File > New > Project.
- Find and click the Telerik C# Blazor Application option (you can use the search, or filter by Blazor templates).
- Follow the instructions.
Using the Wizard
In the order of their appearance, the Create New Project wizard presents several screens with options that will assist you to configure your new app.
After you select the Create New Project option from the Extensions menu, Visual Studio opens a Configure your new project window where you can set the location and the name for your project.
Clicking the Create button in this window opens the wizard and you will go through the following steps:
Step 1: Select Initial Project Configuration
In this screen, you can choose:
- Target .NET framework
- Hosting model—the options vary depending on the selected target framework.
- Configure additional project settings like:
- Load the required Telerik UI stylesheet and JS Interop file as static assets or from the Telerik CDN. Note that this can affect the future upgrade process of the theme.
- Enable localization.
- Use font icons instead of the default SVG icons.
- Location from where the application will get the Telerik UI for Blazor package—remote NuGet feed or local files.
- Telerik UI for Blazor version.
Step 2: Select Project Template
This step allows you to select one of the predefined Telerik project templates. The available templates vary depending on the selected target framework and hosting model in Step 1.
The Client and Server projects for .NET 6 and .NET 7 support all the templates below. The Hybrid projects and the .NET 8 WebApp support only the Blank template.
The Create New Project wizard provides the following project templates:
-
Blank—A blank solution based on the Microsoft template with added Telerik UI components (NuGet package reference, assets, service, and the
TelerikRootComponent
). - CRUD, Form, Chart—A small app that showcases the Telerik UI Data Grid, Chart, and forms validation. The Grid also uses a basic CRUD service which is a common pattern for data updates in real applications.
- Dashboard—A basic dashboard layout that uses the TileLayout component for customizable dashboards, and showcases several ways individual blocks (tiles) can fetch data.
- Admin—A small app that shows a dashboard for admin. The app uses some of the main Telerik UI components like the Data Grid, Chart, TileLayout, Form, and more.
Step 3: Select Theme
Finally, you can apply one of the available themes to your project.