Ignite UI for Blazor Templates - from Infragistics

dotnet new templates for Ignite UI for Blazor. Scaffold a complete Blazor Web App wired up with Ignite UI, or drop a ready-to-edit page for any Ignite UI component into an existing project — from the .NET CLI or Visual Studio.

Purpose

This repository hosts the code for the IgniteUI.Blazor.Templates NuGet package and is also intended for users to create feature requests, submit issues, and ask questions related to the templates.

It was split out of igniteui-blazor, which remains the home of the Ignite UI for Blazor Lite components themselves.

Overview

Project template

Template	Short name	Description
Ignite UI Blazor Web App	igb-blazor	Blazor Web App with Ignite UI registered, themed, and a navbar / nav drawer layout. Optional Weather page with Grid Lite and Blazor-ApexCharts.

Parameter	Description	Values	Default
--Hosting (-H)	Interactivity hosting model	Server, Wasm, Auto	Server
--Theme (-T)	Ignite UI design theme	bootstrap, material, fluent, indigo	bootstrap
--Variant (-V)	Light or dark color variant	light, dark	light
--IncludeWeatherSample	Include the Weather page (Grid Lite + chart demo)	true, false	true
--SkipRestore	Skip automatic NuGet restore on create	true, false	false

Template strings are localized for en, ja and ko.

Component item templates

Each item template scaffolds a single .razor page (plus a scoped .css file) demonstrating one component. In Visual Studio they appear under Add → New Item → Ignite UI for Blazor.

Components	Short name	Documentation
Accordion	igb-accordion	Docs
Avatar	igb-avatar	Docs
Badge	igb-badge	Docs
Banner	igb-banner	Docs
Breadcrumbs	igb-breadcrumbs	Coming soon
Button	igb-button	Docs
Button Group	igb-button-group	Docs
Calendar	igb-calendar	Docs
Card	igb-card	Docs
Carousel	igb-carousel	Docs
Checkbox	igb-checkbox	Docs
Chip	igb-chip	Docs
Circular Progress	igb-circular-progress	Docs
Color Picker	igb-color-picker	Coming soon
Combo	igb-combo	Docs
Date Picker	igb-date-picker	Docs
Date Range Picker	igb-date-range-picker	Docs
Date Time Input	igb-date-time-input	Docs
Dialog	igb-dialog	Docs
Drop Down	igb-dropdown	Docs
Expansion Panel	igb-expansion-panel	Docs
Grid Lite	igbgrid	Docs
Icon	igb-icon	Docs
Icon Button	igb-icon-button	Docs
Input	igb-input	Docs
Linear Progress	igb-linear-progress	Docs
List	igb-list	Docs
Mask Input	igb-mask-input	Docs
Navigation Bar	igb-navbar	Docs
Navigation Drawer	igb-nav-drawer	Docs
QR Code	igb-qr-code	Coming soon
Radio Group	igb-radio-group	Docs
Range Slider	igb-range-slider	Docs
Rating	igb-rating	Docs
Select	igb-select	Docs
Slider	igb-slider	Docs
Snackbar	igb-snackbar	Docs
Stepper	igb-stepper	Docs
Switch	igb-switch	Docs
Tabs	igb-tabs	Docs
Textarea	igb-textarea	Docs
Tile Manager	igb-tile-manager	Docs
Toast	igb-toast	Docs
Toggle Button	igb-toggle-button	Docs
Tooltip	igb-tooltip	Docs
Tree	igb-tree	Docs
ApexCharts Chart	apexchart	Docs

Usage

Install the templates

dotnet new install IgniteUI.Blazor.Templates

Create a project

dotnet new igb-blazor -n MyApp

Interactive WebAssembly hosting with the Material dark theme:

dotnet new igb-blazor -n MyApp --Hosting Wasm --Theme material --Variant dark

Server hosting with the Fluent theme, without the Weather sample page:

dotnet new igb-blazor -n MyApp --Theme fluent --IncludeWeatherSample false

Add a component page

Item templates are run from inside an existing project folder; pass the file name with -n:

cd MyApp/MyApp/Components/Pages
dotnet new igb-button -n ButtonsDemo

For Wasm or Auto hosting, use cd MyApp/MyApp.Client/Pages instead. This drops ButtonsDemo.razor into the current directory. Run dotnet new <short-name> -h to see a template's options.

Register Ignite UI for Blazor

Projects created from igb-blazor are already set up. To use the item templates in any other project, do this once:

1 - Install the IgniteUI.Blazor.Lite package:

dotnet add package IgniteUI.Blazor.Lite

2 - Open the Program.cs file and register the Ignite UI for Blazor Service:

builder.Services.AddIgniteUIBlazor();

3 - Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

@using IgniteUI.Blazor.Controls

4 - Add the Style Sheet in the <head> element of the Components/App.razor file (Blazor Web App) or the wwwroot/index.html file (standalone Blazor WebAssembly):

<head>
    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

Don't mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.

Two item templates need additional packages: igbgrid requires IgniteUI.Blazor.GridLite and its theme stylesheet:

dotnet add package IgniteUI.Blazor.GridLite

<link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />

apexchart requires Blazor-ApexCharts:

dotnet add package Blazor-ApexCharts

Projects created with --IncludeWeatherSample false omit both packages. Add the package(s) needed by any igbgrid or apexchart item templates you use.

Supported render modes

Ignite UI for Blazor components require an interactive render mode, so give scaffolded pages one of:

• InteractiveServer
• InteractiveWebAssembly
• InteractiveAuto

Note: Render modes apply only to Blazor Web Apps (.NET 8+). Standalone Blazor WebAssembly and Blazor Server apps are interactive by default.

Uninstall

dotnet new uninstall IgniteUI.Blazor.Templates

Building and Running Locally

Prerequisites: .NET SDK 10.0 (see global.json). Generated projects target net10.0.

The template pack lives in IgniteUI.Blazor.Templates/: the project template under templates/project/igb-blazor and one folder per item template under templates/item. All commands below run from the repo root.

# 1. Pack the templates
dotnet pack IgniteUI.Blazor.Templates -c Release -o ./bin/packed

# 2. Install the packed nupkg (uninstall any previous copy first)
dotnet new uninstall IgniteUI.Blazor.Templates
dotnet new install ./bin/packed/IgniteUI.Blazor.Templates.<version>.nupkg

For faster iteration on the project template, skip packing and install straight from the source folder:

dotnet new install ./IgniteUI.Blazor.Templates/templates/project/igb-blazor

Then generate and run a project:

mkdir -p ./_smoketest && cd ./_smoketest
dotnet new igb-blazor -n MyTestApp --Hosting Server
cd MyTestApp
dotnet run --project MyTestApp/MyTestApp.csproj

For Wasm / Auto hosting the CLI also generates MyTestApp.sln with a host and a .Client project; build the solution and run the host with dotnet run --project MyTestApp/MyTestApp.csproj.

Testing all templates

IgniteUI.Blazor.Templates/test-templates.ps1 (PowerShell) and test-templates.sh (bash) install the whole pack from source, scaffold an igb-blazor Server app under ./tmp, generate every item template into it and link each page from the nav drawer, so a single dotnet run exercises everything:

cd IgniteUI.Blazor.Templates
./test-templates.sh      # or ./test-templates.ps1

See the package README for the script options.

Troubleshooting

• dotnet new doesn't list igb-blazor — run dotnet new uninstall (no args) to confirm IgniteUI.Blazor.Templates (or the folder path) shows up; reinstall if not.
• Changes don't show up after reinstalling a nupkg — bump <Version> in IgniteUI.Blazor.Templates.csproj so dotnet new install doesn't reuse a cached copy.
• Two installs of the same template identity — the warning at install time is harmless; the most recent install wins. Uninstall whichever you don't want.

License

MIT