This NuGet package provides ASP.NET Core Blazor project and item templates that include the Telerik UI for Blazor component library. The project templates provide multiple settings to configure the Telerik Blazor components during app creation. The item templates expose settings to enable various Telerik component features.
- Templates
- Install
- Use with Visual Studio
- Use with VS Code
- Use with the .NET CLI
- Project template features
- Update
- Uninstall
- Create your own templates
- License
The package includes the following project and item templates.
| Template Name | .CLI Short Name |
|---|---|
| Telerik Blazor Web App (Server render mode) | dimodi-blazor-server |
| Telerik Blazor Web App (WebAssembly or Auto render mode) | dimodi-blazor-wasmauto |
| Telerik Blazor WebAssembly Standalone App | dimodi-blazorwasm |
| Telerik Blazor Server App (.NET 6-7) | dimodi-blazorserver |
| Telerik Blazor WebAssembly App, ASP.NET Core hosted (.NET 6-7) | dimodi-blazorwasm-hosted |
The two .NET 6-7 project templates are deprecated and do not include the latest template features. These templates are compatible with Telerik UI for Blazor version 8.x, but are not compatible with version 9.x.
The item templates produce a runnable .razor file that includes a Telerik Blazor component, dummy data, and applicable event handlers.
| Template Name | .CLI Short Name | Component Features |
|---|---|---|
| Telerik Blazor Grid | dimodi-grid |
CRUD operations, row selection, grouping, Data or OnRead data binding |
| Telerik Blazor TreeView | dimodi-treeview |
Selection, checkboxes, flat or hierarchical data structure |
- Close Visual Studio.
- Open your Terminal or Shell app.
- Execute the
dotnet new installcommand:dotnet new install Dimodi.Telerik.Blazor.Templates
On Windows, the new project templates will appear in the C#, Web and Blazor categories in the Create New Project wizard. Make sure to select "All platforms" in the respective dropdown.
On Mac, the new project templates will appear in the Other > Custom category. Visual Studio for Mac is unable to run .NET 8 Blazor Web Apps with WebAssembly or Auto render mode if .NET 9 is installed. In this case, edit and run the app through VS Code or another compatible IDE.
When creating a WebAssembly app, make sure to select the server project as a startup project before running.
To create a new .razor file from an item template, use the .NET CLI.
Install the C# Dev Kit extension.
To create a new app:
- Go to the Command Palette at the top (
Ctrl+Shift+P). - Select Show and Run Commands.
- Select .NET: New Project...
- Type a project name and configure the project template options.
To create a new .razor file from an item template, use the .NET CLI.
To see all available project and item templates, execute the dotnet new list command with the --author option:
dotnet new list --author="Dimo Dimov"For help on a specific project or item template, execute the dotnet new command with the --help option, for example:
dotnet new dimodi-grid --help- Open Terminal and go to the desired parent folder of your future app.
- Execute the
dotnet newcommand with the short name of the template and the app name, for example:dotnet new dimodi-blazor-server -o MyNewAppName
When creating a WebAssembly app, make sure to select the server project as a startup project before running.
- Open Terminal and go to a folder inside your existing app, for example
PagesorComponents. - Execute the
dotnet newcommand with the short name of the template and the file name, for example:dotnet new dimodi-grid -n MyNewGridPаge
- The above command will produce a
MyNewGridPаge.razorfile inside the current folder.
The project templates are similar to the default .NET SDK Blazor project templates in terms of structure and configuration. The differences are:
- The Blazor Web Apps use a global interactive render mode. This is the easier and recommended way to integrate Telerik UI for Blazor.
- The WebAssembly apps reference the latest minor version of the selected .NET version.
- The apps use the
httpslaunch profile by default. - Visual Studio opens
Home.razorautomatically after the app is created. - The top bar uses background and border colors from the Telerik theme. This makes the styling consistent in dark mode.
- The
<button>and<table>HTML elements in the default sample pages are replaced with Telerik Button and Grid. - The
SurveyPromptRazor component is removed.
The Telerik UI for Blazor NuGet package, namespaces, service, and static assets are added, according to best practices. The Telerik CSS and JavaScript file URLs include a query string cache buster to prevent browser caching after version upgrades. The cache buster is missing from the WebAssembly Standalone App template due to dynamic content restrictions in index.html.
The project templates provide options to configure the app and the Telerik UI for Blazor components during app creation:
| Template Option | Default Value | Description |
|---|---|---|
| Components version | latest | The project templates provide a selection of recent Telerik UI for Blazor versions. The default value is the latest semantic version, but the templates also allow you to set the latest version as a wildcard *. |
| Theme | Default | The Telerik UI for Blazor NuGet package includes a few CSS files that define different styling of the Telerik Blazor components. |
| Dark mode | disabled | Dark mode requires CDN to be enabled, because the dark theme variations (known as swatches) are not included as static assets in the Telerik UI for Blazor NuGet package. |
| CDN support | disabled | Load the Telerik theme and JavaScript file from CDN instead of the NuGet package assets. WebAssembly Standalone Apps support CDN only with a fixed Telerik UI for Blazor version number. Blazor Web Apps support CDN with both fixed and wildcard version *. |
| Icon type | SVG | Telerik Blazor components can render SVG icons or font icons. |
| Localization | disabled | Adds both .NET and Telerik localization. Available only in the .NET 8-9 project templates. |
| RTL support | disabled | |
| File upload controller | disabled | When added, the maximum file upload size increases to 256 MB in Programs.cs. Available only in the .NET 8-9 project templates. |
| Maximum SignalR message size | 32 KB | This option works in Visual Studio on Windows and through the .NET CLI. The setting doesn't appear in VS Code and in Visual Studio for Mac. In these cases, edit Program.cs after creating the app. |
The project templates provide an optional Docker setup, including Dockerfile, .dockerignore, and a Docker launch profile. The Dockerfile sets up the Telerik NuGet package source in the container.
Execute the dotnet new update command:
dotnet new update Dimodi.Telerik.Blazor.TemplatesTo remove the currently installed package, execute the dotnet new uninstall command:
dotnet new uninstall Dimodi.Telerik.Blazor.TemplatesIf you wish to experiment with your own project or item templates, then start from here:
- https://learn.microsoft.com/en-us/dotnet/core/tools/custom-templates
- https://github.com/dotnet/templating/
- https://github.com/dotnet/aspnetcore/tree/main/src/ProjectTemplates
- https://github.com/sayedihashimi/template-sample
Prepare for reading incomplete and unofficial documentation, and achieving your goals by trial and error.
Telerik UI for Blazor is a commercial component library with its own license agreement.
The project and item templates are subject to MIT License.