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 combobox—this enables you to start your project with the desired version. You can also get the latest version to make sure the components are up to date.

The wizard automates several steps for you that you otherwise must perform manually:

• Adding the client assets to your project:

  • Adding the Telerik stylesheet.
  • Adding the JS Interop file.

• Configuring the project to use the Telerik UI for Blazor components:

  • Adding the required @using directives to the ~/_Imports.razor file.
  • Adding the TelerikLayout.razor component at the root level of the DOM.
  • Registering the Telerik services for client-side projects and for server-side projects.

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 - the .mpack file for VS for Mac.

Starting the Wizard

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

• The Extensions menu:

  1. Open the Extensions menu.
  2. Click Telerik > Telerik UI for Blazor > Create New Project.
  3. Follow the wizard.

• The Project menu:

  1. Click File > New > Project.
  2. Find and click the Telerik C# Blazor Application option (you can use the search, or filter by Blazor templates).
  3. Follow the wizard.

Using the Wizard

The Create New Project wizard presents several screens:

1. On the first screen, you can select a location and name for your app.

2. On the second screen, you can choose:

   • A WebAssembly or server-side Blazor app.
   • The .NET version you want to use.
   • The Telerik UI for Blazor version.
   • One of the predefined Telerik project templates.

   

3. On the third screen, you can choose from different themes.

   

4. On the last screen, you can choose whether to have localization applied by default in the project.

   

Predefined Project Templates

The following project templates are available:

• Blank—This is a blank solution based on the Microsoft template, but with added Telerik components (NuGet package reference, assets, service, the TelerikRootComponent).

• CRUD, Form, Chart—A small app that showcases the Telerik Grid, Chart, and forms validation. The grid also uses a basic CRUD service—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 components like Grid, Chart, TileLayout, Form, etc.

See Also

• Visual Studio Extensions Overview
• Downloading the Latest Telerik UI for Blazor Versions
• Getting Started with Client-Side Apps
• Getting Started with Server-Side Apps
• Workflow for Using the UI Components for Blazor