Create New Projects
This article demonstrates how to use the Telerik Extension for Visual Studio Code to create a new project that is pre-configured for the Progress® Telerik® UI for Blazor components.
Getting the Extension
To use the Telerik UI for Blazor Template Wizard, install the Telerik UI for Blazor Visual Studio Code Extension. You can get the extension from:
The Extensions tab in Visual Studio Code - search for Telerik UI for Blazor Productivity Tools, select the extension, and then click Install.
Starting the Wizard
To create a Telerik-enabled Blazor project:
-
Press
Ctrl+Shift+Pin Windows/Linux orCmd+Shift+Pon Mac to open the VS Code extension launcher.
Type/Select
Telerik UI for Blazor Template Wizard: Launchand pressEnterto launch the extension.
Using the Wizard
Section 1: Choose How to Start the Project
The Telerik UI for Blazor Template Wizard provides two options to start you project:
Start from Blank App—allows you to create a blank project that is pre-configured for the Progress® Telerik® UI for Blazor components. You can select and add sample pages to get started (a Grid with CRUD operations form a service, a Form, Charts).
-
Start from Template - the wizard provides a set of predefined project templates:
- CRUD, Form, Chart—A small app that showcases the Telerik UI Data Grid, Chart, and Form validation. The Data Grid also uses a basic CRUD service (a common pattern for data updates in production-ready applications).
- Dashboard—A basic dashboard that showcases the Telerik UI TileLayout component and how individual blocks (tiles) can fetch data.
- Admin—A small app that showcases a dashboard for administrators. The app uses some of the main Telerik UI components like the Data Grid, Chart, TileLayout, Form, and more.
The available templates vary depending on the target framework and hosting model. All of the above templates are available for the Client and Server projects for .NET 6 and .NET 7. The Hybrid projects and the .NET 8 WebApp support only the Start from Blank App option.
Section 2: Select Project Name and Path
Type your project name and select the output folder for it.
Section 3: Select UI for Blazor Version
Select the preferred UI for Blazor version. Make sure that your system has access to the specified version of the UI components. You can achieve this with the Telerik NuGet feed.
Section 4: Select Hosting Model
Here you can select the desired hosting model—WebApp, Client (also: WebAssembly), Server, or Hybrid (a hybrid Blazor MAUI).
The available target framework options are updated upon selecting the hosting model.
Section 5: Select Your License Type
Select your license type - Commercial (Paid) or Trial.
Section 6: Choose How to Distribute the Client Assets
Choose whether to load the required Telerik UI stylesheet and JS Interop file as static NuGet assets or load them from the Telerik CDN.
Section 7: Enable or Disable Localization
Choose whether to use localization in the project or not.
Section 8: Select the Preferred Icon Type
Decide if you want to switch to using Font Icons instead of the default SVG icons.
Section 9: Select Target Framework
The available .NET framework versions vary depending on the selected hosting model.
Section 10: Select Theme
Select your desired theme for your project. Click See All Swatches to explore the available theme color variations.
Confirm Project Creation
After configuring the preferred settings, click the Create Project button. The Telerik UI for Blazor Template Wizard closes and the project creation begins. When completed, the terminal shows a confirmation message. You can then navigate to the previously specified output folder to open your project.