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 Visual Studio Marketplace.

• 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:

1. Press Ctrl+Shift+P in Windows/Linux or Cmd+Shift+P on Mac to open the VS Code extension launcher.

   

2. Type/Select Telerik UI for Blazor Template Wizard: Launch and press Enter to launch the extension.

Creating the Project

The Create New Project 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.

Configuring the Project

The wizard allows you to configure the following options:

• Name and output path for your app.
• Hosting model type—WebApp, Client (also: WebAssembly), Server, or Hybrid (a hybrid Blazor MAUI) app.
• Your Telerik license (trial or commercial, depending on what you have).
• Whether to use localization in the project or not.
• Whether to use font icons in the project or not.
• The .NET version you want to use.
• Sample pages that you can add to get started (available when Start from Blank App is selected).
• The theme you want to apply - the main window provides a list of the built-in (base) themes (Default, Bootstrap and Material). The See All Swatches button opens a separate menu with a list of color swatches under the corresponding base theme.

Create New Project wizard

See All Swatches menu

For best results, the Telerik Extension for Visual Studio Code is designed to get and apply the latest version of Telerik UI for Blazor available with your license. Therefore, you must ensure that your system has access to the same version of the UI components - you can achieve this with the Telerik NuGet feed.