diff --git a/templates/IgniteUI.Blazor.Templates/IgniteUI.Blazor.Templates.csproj b/templates/IgniteUI.Blazor.Templates/IgniteUI.Blazor.Templates.csproj
index 4789f99..1e8e1da 100644
--- a/templates/IgniteUI.Blazor.Templates/IgniteUI.Blazor.Templates.csproj
+++ b/templates/IgniteUI.Blazor.Templates/IgniteUI.Blazor.Templates.csproj
@@ -30,8 +30,7 @@
       <Pack>True</Pack>
       <PackagePath>\</PackagePath>
     </None>
-    <Content Include="content\**\*"
-             Exclude="content\**\bin\**;content\**\obj\**" />
+    <Content Include="templates\**\*" Exclude="templates\**\bin\**;templates\**\obj\**" />
     <Compile Remove="**\*" />
   </ItemGroup>
 
diff --git a/templates/IgniteUI.Blazor.Templates/README.md b/templates/IgniteUI.Blazor.Templates/README.md
index 1dedd66..aae4c53 100644
--- a/templates/IgniteUI.Blazor.Templates/README.md
+++ b/templates/IgniteUI.Blazor.Templates/README.md
@@ -1,6 +1,9 @@
 # IgniteUI Blazor Templates
 
-`dotnet new` project templates for creating Blazor Web Apps powered by [Ignite UI for Blazor](https://www.infragistics.com/products/ignite-ui-blazor).
+`dotnet new` templates for [Ignite UI for Blazor](https://www.infragistics.com/products/ignite-ui-blazor). The pack ships two kinds of templates:
+
+- **A project template** (`igb-blazor`) that scaffolds a complete Blazor Web App wired up with Ignite UI.
+- **Component item templates** (`igb-button`, `igb-grid`, …) that scaffold a single ready-to-edit Ignite UI component page into an existing project.
 
 ## Installation
 
@@ -8,7 +11,7 @@
 dotnet new install IgniteUI.Blazor.Templates
 ```
 
-## Usage
+## Project template
 
 ```bash
 dotnet new igb-blazor -n MyApp
@@ -38,6 +41,88 @@ Create a server-rendered project with the Fluent theme, without the Weather samp
 dotnet new igb-blazor -n MyApp --Theme fluent --IncludeWeatherSample false
 ```
 
+## Component item templates
+
+Each component template scaffolds a single `.razor` page (plus a scoped `.css` file) demonstrating one Ignite UI component. They are **item** templates, so run them from inside an existing project folder and pass the file name with `-n`:
+
+```bash
+dotnet new igb-button -n ButtonsDemo
+```
+
+This drops `ButtonsDemo.razor` into the current directory. In Visual Studio they also appear under **Add → New Item → Ignite UI for Blazor**, grouped by category.
+
+> **Project setup required once.** Item templates can't modify project files, so before a scaffolded page will run, the host project must reference Ignite UI and register it. If you started from the `igb-blazor` project template this is already done. Otherwise, do it once:
+>
+> 1. `dotnet add package IgniteUI.Blazor.Lite`
+> 2. In `Program.cs`: `builder.Services.AddIgniteUIBlazor();`
+> 3. In `_Imports.razor`: `@using IgniteUI.Blazor.Controls`
+> 4. In the host page (`App.razor` / `index.html` / `_Host.cshtml`) add the theme stylesheet and bundle:
+>    `<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />`
+> 5. For a Blazor Web App (.NET 8+), give the scaffolded page an interactive render mode (e.g. `@rendermode InteractiveServer`).
+>
+> Don't mix `IgniteUI.Blazor.Lite` with the licensed `IgniteUI.Blazor` package.
+
+### Available components
+
+| Category | Short names |
+|----------|-------------|
+| Buttons & Actions | `igb-button`, `igb-button-group`, `igb-chip`, `igb-icon-button`, `igb-toggle-button` |
+| Inputs | `igb-input`, `igb-mask-input`, `igb-checkbox`, `igb-switch`, `igb-radio-group`, `igb-rating`, `igb-slider`, `igb-range-slider` |
+| Selection | `igb-select`, `igb-combo`, `igb-dropdown` |
+| Date & Time | `igb-calendar`, `igb-date-picker`, `igb-date-range-picker`, `igb-date-time-input` |
+| Layout | `igb-card`, `igb-accordion`, `igb-expansion-panel`, `igb-tabs`, `igb-stepper`, `igb-carousel`, `igb-tile-manager` |
+| Navigation | `igb-navbar`, `igb-nav-drawer` |
+| Data Display | `igb-list`, `igb-tree`, `igb-avatar`, `igb-badge`, `igb-icon`, `igbgrid` |
+| Feedback | `igb-banner`, `igb-dialog`, `igb-snackbar`, `igb-toast`, `igb-tooltip`, `igb-circular-progress`, `igb-linear-progress` |
+| Charts | `apexchart` |
+
+See each template's options with `dotnet new <short-name> -h`.
+
+## Smoke-testing the templates
+
+Two equivalent scripts live next to this README and exercise the whole pack end to end — use `test-templates.ps1` on Windows/PowerShell and `test-templates.sh` on Linux/macOS/bash. They have identical behavior; pick whichever matches your shell.
+
+Each run:
+
+1. Installs the templates from this source folder (`dotnet new install . --force`).
+2. Scaffolds a fresh Blazor **Server** project under `./tmp` via `dotnet new igb-blazor`.
+3. Generates **every** item template (`igb-*`, `apexchart`) into the project's `Components/Pages` folder.
+4. Wires each generated page into `Components/Layout/NavMenu.razor` as an `IgbNavDrawerItem`, so every demo is reachable from the nav drawer.
+
+The result is a single project that hosts every component page — handy for verifying that the templates install, scaffold, and compile together after a change.
+
+```bash
+# bash (Linux/macOS)
+./test-templates.sh
+
+# PowerShell (Windows/cross-platform)
+./test-templates.ps1
+```
+
+When it finishes it prints the generated project path and the `dotnet run` command to launch it.
+
+### Configuration
+
+Both scripts accept the same three settings. The PowerShell script exposes them as parameters (and also honors the env vars for parity); the bash script reads the env vars.
+
+| Setting | PowerShell parameter | Env var (both) | Default | Description |
+|---------|----------------------|----------------|---------|-------------|
+| Project name | `-ProjectName` | `PROJECT_NAME` | `IgbTemplateTest` | Name of the generated project. |
+| Nav icon | `-NavIcon` | `NAV_ICON` | `widgets` | `material-icons` name used for each generated nav item. |
+| Skip restore | `-SkipRestore` | `SKIP_RESTORE` | `true` / `1` | Skip NuGet restore when creating the project (faster). |
+
+```bash
+# bash — override via env vars
+PROJECT_NAME=MyDemo NAV_ICON=star SKIP_RESTORE=0 ./test-templates.sh
+```
+
+```powershell
+# PowerShell — override via parameters
+./test-templates.ps1 -ProjectName MyDemo -NavIcon star -SkipRestore $false
+```
+
+> The scripts wipe and recreate the `./tmp` folder on every run, so the generated project is disposable. Re-run after editing a template to regenerate from scratch.
+
 ## Uninstall
 
 ```bash
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/icon.png
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/icon.png
rename to templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/icon.png
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..60f6fa7
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Charts"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/template.json
new file mode 100644
index 0000000..a60c306
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/.template.config/template.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [ "Web", "Blazor", "Chart" ],
+  "identity": "IgniteUI.Blazor.ApexChartComponent",
+  "name": "Apex Chart Component",
+  "shortName": "apexchart",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "ApexChartComponent",
+  "defaultName": "MyChart",
+  "primaryOutputs": [
+    { "path": "ApexChartComponent.razor" }
+  ],
+  "symbols": {
+    "HostIdentifier": { "type": "bind", "binding": "HostIdentifier" }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": { "files": "0" },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/ApexChartComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/ApexChartComponent.razor
new file mode 100644
index 0000000..396a7e4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/ApexChartComponent.razor
@@ -0,0 +1,272 @@
+@page "/ApexChartComponent"
+@using System.Linq
+@using ApexCharts
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>ApexChartComponent</PageTitle>
+
+<h3>ApexChartComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Chart type</label>
+        <IgbSelect @bind-Value="KindName">
+            @foreach (var kind in ChartKinds)
+            {
+                <IgbSelectItem Value="@kind.ToString()">@kind.ToString()</IgbSelectItem>
+            }
+        </IgbSelect>
+    </div>
+
+    <div class="control">
+        <label>Series</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Show2025">2025</IgbSwitch>
+            <IgbSwitch @bind-Checked="Show2026">2026</IgbSwitch>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Theme</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Dark">Dark</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="chart-host">
+    <ApexChart @key="@($"{KindName}-{Dark}-{Show2025}-{Show2026}")"
+               TItem="DataPoint"
+               Title="Monthly revenue"
+               Options="BuildOptions()">
+        @* Single-value point series: covers Line/Area/Bar/Scatter/Radar/Heatmap/Treemap, the
+           circular types, and Slope (Line + a plot option set in BuildOptions). *@
+        @if (IsPointKind)
+        {
+            @if (Show2025)
+            {
+                <ApexPointSeries TItem="DataPoint" Items="_2025" Name="2025"
+                                 SeriesType="PointType"
+                                 XValue="@(p => p.Label)"
+                                 YValue="@(p => (decimal)p.Value)" />
+            }
+            @if (Show2026 && !(IsSingleSeries && Show2025))
+            {
+                <ApexPointSeries TItem="DataPoint" Items="_2026" Name="2026"
+                                 SeriesType="PointType"
+                                 XValue="@(p => p.Label)"
+                                 YValue="@(p => (decimal)p.Value)" />
+            }
+        }
+        else if (Kind == ChartKind.Mixed)
+        {
+            @if (Show2025)
+            {
+                <ApexPointSeries TItem="DataPoint" Items="_2025" Name="2025"
+                                 SeriesType="SeriesType.Bar"
+                                 XValue="@(p => p.Label)"
+                                 YValue="@(p => (decimal)p.Value)" />
+            }
+            @if (Show2026)
+            {
+                <ApexPointSeries TItem="DataPoint" Items="_2026" Name="2026"
+                                 SeriesType="SeriesType.Line"
+                                 XValue="@(p => p.Label)"
+                                 YValue="@(p => (decimal)p.Value)" />
+            }
+        }
+        else if (Kind == ChartKind.Funnel)
+        {
+            <ApexPointSeries TItem="DataPoint" Items="_2025" Name="2025"
+                             SeriesType="SeriesType.Bar"
+                             XValue="@(p => p.Label)"
+                             YValue="@(p => (decimal)p.Value)"
+                             OrderByDescending="@(p => p.Y)" />
+        }
+        else if (Kind == ChartKind.Bubble)
+        {
+            @if (Show2025)
+            {
+                <ApexBubbleSeries TItem="DataPoint" Items="_2025" Name="2025"
+                                  XValue="@(p => p.Label)"
+                                  YAggregate="@(g => g.Sum(p => (decimal)p.Value))"
+                                  ZAggregate="@(g => g.Sum(p => (decimal)p.Value) / 4)" />
+            }
+            @if (Show2026)
+            {
+                <ApexBubbleSeries TItem="DataPoint" Items="_2026" Name="2026"
+                                  XValue="@(p => p.Label)"
+                                  YAggregate="@(g => g.Sum(p => (decimal)p.Value))"
+                                  ZAggregate="@(g => g.Sum(p => (decimal)p.Value) / 4)" />
+            }
+        }
+        else if (Kind == ChartKind.Candlestick)
+        {
+            <ApexCandleSeries TItem="DataPoint" Items="_2025" Name="2025"
+                              XValue="@(p => p.Label)"
+                              Open="@(p => (decimal)p.Value)"
+                              High="@(p => (decimal)(p.Value + 8))"
+                              Low="@(p => (decimal)(p.Value - 8))"
+                              Close="@(p => (decimal)(p.Value + (p.Value % 2 == 0 ? 6 : -6)))" />
+        }
+        else if (Kind == ChartKind.BoxPlot)
+        {
+            <ApexBoxPlotSeries TItem="DataPoint" Items="_2025" Name="2025"
+                               XValue="@(p => p.Label)"
+                               Min="@(p => (decimal)(p.Value - 15))"
+                               Quantile1="@(p => (decimal)(p.Value - 7))"
+                               Median="@(p => (decimal)p.Value)"
+                               Quantile3="@(p => (decimal)(p.Value + 7))"
+                               Max="@(p => (decimal)(p.Value + 15))" />
+        }
+        else if (Kind == ChartKind.RangeBar)
+        {
+            <ApexRangeSeries TItem="DataPoint" Items="_2025" Name="2025"
+                             XValue="@(p => p.Label)"
+                             YMinValue="@(p => (decimal)(p.Value - 10))"
+                             YMaxValue="@(p => (decimal)(p.Value + 10))" />
+        }
+        else if (Kind == ChartKind.RangeArea)
+        {
+            @if (Show2025)
+            {
+                <ApexRangeAreaSeries TItem="DataPoint" Items="_2025" Name="2025"
+                                     XValue="@(p => p.Label)"
+                                     Top="@(p => (decimal)(p.Value + 12))"
+                                     Bottom="@(p => (decimal)(p.Value - 12))" />
+            }
+            @if (Show2026)
+            {
+                <ApexRangeAreaSeries TItem="DataPoint" Items="_2026" Name="2026"
+                                     XValue="@(p => p.Label)"
+                                     Top="@(p => (decimal)(p.Value + 12))"
+                                     Bottom="@(p => (decimal)(p.Value - 12))" />
+            }
+        }
+    </ApexChart>
+</div>
+
+<div class="state">Type: @KindName &nbsp;|&nbsp; Theme: @(Dark ? "Dark" : "Light") &nbsp;|&nbsp; Series: @SeriesLabel</div>
+
+@code {
+    /*
+     * This sample uses two packages — Ignite UI for Blazor (the controls) and
+     * Blazor-ApexCharts (the chart). An item template can't modify project files,
+     * so do this once per project:
+     *
+     * Ignite UI for Blazor (open-source, MIT — IgniteUI.Blazor.Lite):
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     *    Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     *
+     * Apex Chart (Blazor-ApexCharts — https://apexcharts.github.io/Blazor-ApexCharts):
+     * 5. Install:   dotnet add package Blazor-ApexCharts
+     * 6. _Imports.razor:          @using ApexCharts
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 7. Register (Program.cs, optional — enables global options/DI):
+     *    builder.Services.AddApexCharts();
+     *    The package loads its own JS via a static web asset; no <script> tag is required.
+     *
+     * 8. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     */
+
+    // The chart kinds shown in the dropdown. Most map to a single-value point series; the rest
+    // use a dedicated series component below because they need a different data shape.
+    private enum ChartKind
+    {
+        Area, Bar, BoxPlot, Bubble, Candlestick, Donut, Funnel, Heatmap, Line, Mixed,
+        Pie, PolarArea, Radar, RadialBar, RangeArea, RangeBar, Scatter, Slope, Treemap
+    }
+
+    private static readonly ChartKind[] ChartKinds = Enum.GetValues<ChartKind>();
+
+    private string KindName { get; set; } = ChartKind.Line.ToString();
+    private ChartKind Kind => Enum.Parse<ChartKind>(KindName);
+
+    // Kinds drawn with ApexPointSeries (single Y value). Slope is a Line with a plot option.
+    private bool IsPointKind => Kind is ChartKind.Line or ChartKind.Area or ChartKind.Bar
+        or ChartKind.Slope or ChartKind.Scatter or ChartKind.Radar or ChartKind.Heatmap
+        or ChartKind.Treemap or ChartKind.Pie or ChartKind.Donut or ChartKind.PolarArea
+        or ChartKind.RadialBar;
+
+    private SeriesType PointType => Kind switch
+    {
+        ChartKind.Area => SeriesType.Area,
+        ChartKind.Bar => SeriesType.Bar,
+        ChartKind.Scatter => SeriesType.Scatter,
+        ChartKind.Radar => SeriesType.Radar,
+        ChartKind.Heatmap => SeriesType.Heatmap,
+        ChartKind.Treemap => SeriesType.Treemap,
+        ChartKind.Pie => SeriesType.Pie,
+        ChartKind.Donut => SeriesType.Donut,
+        ChartKind.PolarArea => SeriesType.PolarArea,
+        ChartKind.RadialBar => SeriesType.RadialBar,
+        _ => SeriesType.Line // Line, Slope
+    };
+
+    // Types that throw or make no sense with more than one series, so only the first is drawn.
+    private bool IsCircular => Kind
+        is ChartKind.Pie or ChartKind.Donut or ChartKind.PolarArea or ChartKind.RadialBar;
+    private bool IsSingleSeries => IsCircular
+        || Kind is ChartKind.Funnel or ChartKind.Candlestick or ChartKind.BoxPlot or ChartKind.RangeBar;
+
+    private ApexChartOptions<DataPoint> BuildOptions() => new()
+    {
+        // Build a fresh options object per render. The chart mutates the instance it is given, so
+        // sharing one long-lived field across renders corrupts later ones (radar shows off-center).
+        Chart = new Chart { Background = Dark ? "#1e1e1e" : "transparent" },
+        Theme = new Theme { Mode = Dark ? Mode.Dark : Mode.Light },
+        PlotOptions = new PlotOptions
+        {
+            Bar = Kind == ChartKind.Funnel
+                ? new PlotOptionsBar { IsFunnel = true, Horizontal = true, Distributed = true }
+                : null,
+            Line = Kind == ChartKind.Slope ? new PlotOptionsLine { IsSlopeChart = true } : null
+        }
+    };
+
+    private bool Show2025 { get; set; } = true;
+    private bool Show2026 { get; set; } = true;
+    private bool Dark { get; set; }
+
+    private string SeriesLabel => (Show2025, Show2026 && !(IsSingleSeries && Show2025)) switch
+    {
+        (true, true) => "2025, 2026",
+        (true, false) => "2025",
+        (false, true) => "2026",
+        _ => "(none)"
+    };
+
+    private readonly List<DataPoint> _2025 = new()
+    {
+        new() { Label = "Jan", Value = 42 }, new() { Label = "Feb", Value = 58 },
+        new() { Label = "Mar", Value = 34 }, new() { Label = "Apr", Value = 67 },
+        new() { Label = "May", Value = 49 }, new() { Label = "Jun", Value = 81 },
+        new() { Label = "Jul", Value = 53 }, new() { Label = "Aug", Value = 39 },
+        new() { Label = "Sep", Value = 72 }, new() { Label = "Oct", Value = 61 },
+        new() { Label = "Nov", Value = 88 }, new() { Label = "Dec", Value = 47 }
+    };
+
+    private readonly List<DataPoint> _2026 = new()
+    {
+        new() { Label = "Jan", Value = 55 }, new() { Label = "Feb", Value = 33 },
+        new() { Label = "Mar", Value = 64 }, new() { Label = "Apr", Value = 48 },
+        new() { Label = "May", Value = 92 }, new() { Label = "Jun", Value = 57 },
+        new() { Label = "Jul", Value = 76 }, new() { Label = "Aug", Value = 41 },
+        new() { Label = "Sep", Value = 69 }, new() { Label = "Oct", Value = 99 },
+        new() { Label = "Nov", Value = 52 }, new() { Label = "Dec", Value = 83 }
+    };
+
+    public class DataPoint
+    {
+        public string Label { get; set; } = string.Empty;
+        public int Value { get; set; }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/ApexChartComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/ApexChartComponent.razor.css
new file mode 100644
index 0000000..91e853c
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/ApexChartComponent/ApexChartComponent.razor.css
@@ -0,0 +1,52 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.chart-host {
+    max-width: 48rem;
+    padding: 0.5rem 0;
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..518721e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Layout"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/template.json
new file mode 100644
index 0000000..de64342
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Layout"
+  ],
+  "identity": "IgniteUI.Blazor.IgbAccordionComponent",
+  "name": "Ignite UI Accordion",
+  "shortName": "igb-accordion",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbAccordionComponent",
+  "defaultName": "MyAccordion",
+  "primaryOutputs": [
+    {
+      "path": "IgbAccordionComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/IgbAccordionComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/IgbAccordionComponent.razor
new file mode 100644
index 0000000..35937cf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/IgbAccordionComponent.razor
@@ -0,0 +1,64 @@
+@page "/IgbAccordionComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbAccordionComponent</PageTitle>
+
+<h3>IgbAccordionComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="SingleExpand">Single expand</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host accordion-host">
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="ExpandAll" Disabled="SingleExpand">Expand all</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="CollapseAll">Collapse all</IgbButton>
+    </div>
+
+    <IgbAccordion @ref="_accordion" SingleExpand="SingleExpand">
+        <IgbExpansionPanel Open="true">
+            <span slot="title">Shipping</span>
+            <span>Orders ship within 1–2 business days and arrive in 3–5 days.</span>
+        </IgbExpansionPanel>
+        <IgbExpansionPanel>
+            <span slot="title">Returns</span>
+            <span>Items can be returned within 30 days of delivery for a full refund.</span>
+        </IgbExpansionPanel>
+        <IgbExpansionPanel>
+            <span slot="title">Warranty</span>
+            <span>All products include a two-year limited manufacturer warranty.</span>
+        </IgbExpansionPanel>
+    </IgbAccordion>
+</div>
+
+<div class="state">Single expand: @SingleExpand</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbAccordion _accordion = default!;
+    private bool SingleExpand { get; set; }
+
+    private async Task ExpandAll() => await _accordion.ShowAllAsync();
+    private async Task CollapseAll() => await _accordion.HideAllAsync();
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/IgbAccordionComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/IgbAccordionComponent.razor.css
new file mode 100644
index 0000000..103c4a8
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAccordionComponent/IgbAccordionComponent.razor.css
@@ -0,0 +1,59 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.accordion-host {
+    flex-direction: column;
+    align-items: stretch;
+    max-width: 640px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..9f478d2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Data Display"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/template.json
new file mode 100644
index 0000000..66322a4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Data Display"
+  ],
+  "identity": "IgniteUI.Blazor.IgbAvatarComponent",
+  "name": "Ignite UI Avatar",
+  "shortName": "igb-avatar",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbAvatarComponent",
+  "defaultName": "MyAvatar",
+  "primaryOutputs": [
+    {
+      "path": "IgbAvatarComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/IgbAvatarComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/IgbAvatarComponent.razor
new file mode 100644
index 0000000..e34349b
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/IgbAvatarComponent.razor
@@ -0,0 +1,98 @@
+@page "/IgbAvatarComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbAvatarComponent</PageTitle>
+
+<h3>IgbAvatarComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Shape</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ShapeName">
+                <IgbRadio Value="Circle">Circle</IgbRadio>
+                <IgbRadio Value="Rounded">Rounded</IgbRadio>
+                <IgbRadio Value="Square">Square</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Size</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="Size">
+                <IgbRadio Value="small">Small</IgbRadio>
+                <IgbRadio Value="medium">Medium</IgbRadio>
+                <IgbRadio Value="large">Large</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Content</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ContentKind">
+                <IgbRadio Value="Image">Image</IgbRadio>
+                <IgbRadio Value="Initials">Initials</IgbRadio>
+                <IgbRadio Value="Icon">Icon</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbAvatar class="@($"avatar {Size}")"
+               Shape="Shape"
+               Src="@(ContentKind == "Image" ? ImageUrl : null)"
+               Initials="@(ContentKind == "Initials" ? "JD" : null)"
+               Alt="A user avatar.">
+        @if (ContentKind == "Icon")
+        {
+            <IgbIcon @ref="_iconRef" IconName="person" Collection="material" />
+        }
+    </IgbAvatar>
+</div>
+
+<div class="state">Shape: @ShapeName &nbsp;|&nbsp; Size: @Size &nbsp;|&nbsp; Content: @ContentKind</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private const string ImageUrl = "https://dl.infragistics.com/x/img/people/men/11.png";
+
+    private const string PersonSvg = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>";
+
+    private IgbIcon _iconRef = default!;
+    private bool _iconRegistered;
+
+    private string ShapeName { get; set; } = "Circle";
+    private AvatarShape Shape => Enum.Parse<AvatarShape>(ShapeName);
+
+    private string Size { get; set; } = "large";
+    private string ContentKind { get; set; } = "Image";
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_iconRegistered && _iconRef is not null)
+        {
+            await _iconRef.EnsureReady();
+            await _iconRef.RegisterIconFromTextAsync("person", PersonSvg, "material");
+            _iconRegistered = true;
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/IgbAvatarComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/IgbAvatarComponent.razor.css
new file mode 100644
index 0000000..1957af9
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbAvatarComponent/IgbAvatarComponent.razor.css
@@ -0,0 +1,73 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+/* IgbAvatar renders its own <igc-avatar> element, outside this file's
+   CSS-isolation scope. Anchor on .component-host and reach in with ::deep. */
+.component-host ::deep .avatar.small {
+    --ig-size: var(--ig-size-small);
+}
+
+.component-host ::deep .avatar.medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.component-host ::deep .avatar.large {
+    --ig-size: var(--ig-size-large);
+}
+
+.component-host ::deep .avatar.small igc-icon {
+    --size: 1rem;
+}
+
+.component-host ::deep .avatar.medium igc-icon {
+    --size: 2rem;
+}
+
+.component-host ::deep .avatar.large igc-icon {
+    --size: 3rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..9f478d2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Data Display"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/template.json
new file mode 100644
index 0000000..8c4e721
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Data Display"
+  ],
+  "identity": "IgniteUI.Blazor.IgbBadgeComponent",
+  "name": "Ignite UI Badge",
+  "shortName": "igb-badge",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbBadgeComponent",
+  "defaultName": "MyBadge",
+  "primaryOutputs": [
+    {
+      "path": "IgbBadgeComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/IgbBadgeComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/IgbBadgeComponent.razor
new file mode 100644
index 0000000..d3b1fa1
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/IgbBadgeComponent.razor
@@ -0,0 +1,76 @@
+@page "/IgbBadgeComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbBadgeComponent</PageTitle>
+
+<h3>IgbBadgeComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Variant</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="VariantName">
+                <IgbRadio Value="Primary">Primary</IgbRadio>
+                <IgbRadio Value="Info">Info</IgbRadio>
+                <IgbRadio Value="Success">Success</IgbRadio>
+                <IgbRadio Value="Warning">Warning</IgbRadio>
+                <IgbRadio Value="Danger">Danger</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Shape</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ShapeName">
+                <IgbRadio Value="Rounded">Rounded</IgbRadio>
+                <IgbRadio Value="Square">Square</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Outlined">Outlined</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <span class="badge-anchor">
+        <IgbAvatar Initials="JD" Shape="AvatarShape.Circle" />
+        <IgbBadge class="anchored" Variant="Variant" Shape="Shape" Outlined="Outlined">5</IgbBadge>
+    </span>
+
+    <IgbBadge Variant="Variant" Shape="Shape" Outlined="Outlined">NEW</IgbBadge>
+</div>
+
+<div class="state">Variant: @VariantName &nbsp;|&nbsp; Shape: @ShapeName &nbsp;|&nbsp; Outlined: @Outlined</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string VariantName { get; set; } = "Primary";
+    private StyleVariant Variant => Enum.Parse<StyleVariant>(VariantName);
+
+    private string ShapeName { get; set; } = "Rounded";
+    private BadgeShape Shape => Enum.Parse<BadgeShape>(ShapeName);
+
+    private bool Outlined { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/IgbBadgeComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/IgbBadgeComponent.razor.css
new file mode 100644
index 0000000..20dfbd5
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBadgeComponent/IgbBadgeComponent.razor.css
@@ -0,0 +1,60 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.badge-anchor {
+    position: relative;
+    display: inline-flex;
+}
+
+/* The badge renders its own <igc-badge>; reach it with ::deep to pin it
+   to the top-right corner of the avatar. */
+.component-host ::deep .anchored {
+    position: absolute;
+    top: -6px;
+    inset-inline-end: -6px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..d16bad4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Feedback"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/template.json
new file mode 100644
index 0000000..16a4b1a
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Feedback"
+  ],
+  "identity": "IgniteUI.Blazor.IgbBannerComponent",
+  "name": "Ignite UI Banner",
+  "shortName": "igb-banner",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbBannerComponent",
+  "defaultName": "MyBanner",
+  "primaryOutputs": [
+    {
+      "path": "IgbBannerComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/IgbBannerComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/IgbBannerComponent.razor
new file mode 100644
index 0000000..144a779
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/IgbBannerComponent.razor
@@ -0,0 +1,82 @@
+@page "/IgbBannerComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbBannerComponent</PageTitle>
+
+<h3>IgbBannerComponent</h3>
+
+<div class="banner-host">
+    <IgbBanner @ref="_banner">
+        <IgbIcon @ref="_icon" slot="prefix" IconName="signal_wifi_off" Collection="material"></IgbIcon>
+        You are currently offline. Some features may be unavailable.
+        <div slot="actions">
+            <IgbButton Variant="ButtonVariant.Flat" @onclick="OnHide">Dismiss</IgbButton>
+            <IgbButton Variant="ButtonVariant.Contained" @onclick="OnHide">Retry</IgbButton>
+        </div>
+    </IgbBanner>
+</div>
+
+<div class="component-host">
+    <IgbButton Variant="ButtonVariant.Contained" @onclick="OnShow">Show</IgbButton>
+    <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnHide">Hide</IgbButton>
+    <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnToggle">Toggle</IgbButton>
+</div>
+
+<div class="state">Dismiss count: @DismissCount</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private const string WifiOffSvg = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-6.46-6.46z'/></svg>";
+    private int DismissCount { get; set; } = 0;
+    private IgbBanner _banner = default!;
+    private IgbIcon _icon = default!;
+    private bool _iconRegistered;
+
+    private bool _isOpen;
+
+    private async Task OnShow()
+    {
+        await _banner.ShowAsync();
+        _isOpen = true;
+    }
+
+    private async Task OnHide()
+    {
+        if (_isOpen) DismissCount++;
+        await _banner.HideAsync();
+        _isOpen = false;
+    }
+
+    private async Task OnToggle()
+    {
+        if (_isOpen) DismissCount++;
+        await _banner.ToggleAsync();
+        _isOpen = !_isOpen;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_iconRegistered && _icon is not null)
+        {
+            await _icon.EnsureReady();
+            await _icon.RegisterIconFromTextAsync("signal_wifi_off", WifiOffSvg, "material");
+            _iconRegistered = true;
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/IgbBannerComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/IgbBannerComponent.razor.css
new file mode 100644
index 0000000..a982575
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbBannerComponent/IgbBannerComponent.razor.css
@@ -0,0 +1,63 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.banner-host {
+    margin-bottom: 1rem;
+}
+
+.banner-host ::deep igc-banner::part(spacer) {
+  background: var(--ig-surface-600);
+}
+
+.banner-host ::deep igc-banner::part(illustration) {
+  color: var(--ig-surface-600-contrast);
+}
+
+.banner-host ::deep igc-banner::part(content) {
+  color: var(--ig-gray-900);
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..838abde
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Buttons & Actions"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/template.json
new file mode 100644
index 0000000..5709486
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Buttons & Actions"
+  ],
+  "identity": "IgniteUI.Blazor.IgbButtonComponent",
+  "name": "Ignite UI Button",
+  "shortName": "igb-button",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbButtonComponent",
+  "defaultName": "MyButton",
+  "primaryOutputs": [
+    {
+      "path": "IgbButtonComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/IgbButtonComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/IgbButtonComponent.razor
new file mode 100644
index 0000000..af86179
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/IgbButtonComponent.razor
@@ -0,0 +1,70 @@
+@page "/IgbButtonComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbButtonComponent</PageTitle>
+
+<h3>IgbButtonComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Variant</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="VariantName">
+                <IgbRadio Value="Contained">Contained</IgbRadio>
+                <IgbRadio Value="Flat">Flat</IgbRadio>
+                <IgbRadio Value="Outlined">Outlined</IgbRadio>
+                <IgbRadio Value="Fab">Fab</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbButton @ref="button" Variant="Variant" Disabled="Disabled" @onclick="OnClick">@Label</IgbButton>
+    <IgbButton Variant="ButtonVariant.Outlined" @onclick="SimulateClick">Simulate Click()</IgbButton>
+</div>
+
+<div class="state">Variant: @VariantName &nbsp;|&nbsp; Clicks: @Clicks</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbButton button = default!;
+
+    private string VariantName { get; set; } = "Contained";
+    private ButtonVariant Variant => Enum.Parse<ButtonVariant>(VariantName);
+
+    private bool Disabled { get; set; }
+    private string Label { get; set; } = "Click me";
+    private int Clicks { get; set; }
+
+    private void OnClick()
+    {
+        Clicks++;
+        Label = $"Clicked {Clicks}";
+    }
+
+    private async Task SimulateClick() => await button.ClickAsync();
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/IgbButtonComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/IgbButtonComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonComponent/IgbButtonComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..838abde
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Buttons & Actions"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/template.json
new file mode 100644
index 0000000..04978b3
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Buttons & Actions"
+  ],
+  "identity": "IgniteUI.Blazor.IgbButtonGroupComponent",
+  "name": "Ignite UI Button Group",
+  "shortName": "igb-button-group",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbButtonGroupComponent",
+  "defaultName": "MyButtonGroup",
+  "primaryOutputs": [
+    {
+      "path": "IgbButtonGroupComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/IgbButtonGroupComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/IgbButtonGroupComponent.razor
new file mode 100644
index 0000000..e71f861
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/IgbButtonGroupComponent.razor
@@ -0,0 +1,89 @@
+@page "/IgbButtonGroupComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbButtonGroupComponent</PageTitle>
+
+<h3>IgbButtonGroupComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Selection</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="SelectionName">
+                <IgbRadio Value="Single">Single</IgbRadio>
+                <IgbRadio Value="SingleRequired">SingleRequired</IgbRadio>
+                <IgbRadio Value="Multiple">Multiple</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Alignment</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="AlignmentName">
+                <IgbRadio Value="Horizontal">Horizontal</IgbRadio>
+                <IgbRadio Value="Vertical">Vertical</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbButtonGroup Selection="Selection"
+                    Alignment="Alignment"
+                    Disabled="Disabled"
+                    Select="OnSelect"
+                    Deselect="OnDeselect">
+        <IgbToggleButton Value="left">Left</IgbToggleButton>
+        <IgbToggleButton Value="center" Selected="true">Center</IgbToggleButton>
+        <IgbToggleButton Value="right">Right</IgbToggleButton>
+    </IgbButtonGroup>
+</div>
+
+<div class="state">Selected: @(Selected.Count == 0 ? "(none)" : string.Join(", ", Selected))</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string SelectionName { get; set; } = "Single";
+    private ButtonGroupSelection Selection => Enum.Parse<ButtonGroupSelection>(SelectionName);
+
+    private string AlignmentName { get; set; } = "Horizontal";
+    private ContentOrientation Alignment => Enum.Parse<ContentOrientation>(AlignmentName);
+
+    private bool Disabled { get; set; }
+    private readonly HashSet<string> Selected = new() { "center" };
+
+    private void OnSelect(IgbComponentValueChangedEventArgs args)
+    {
+        if (Selection != ButtonGroupSelection.Multiple)
+        {
+            Selected.Clear();
+        }
+        Selected.Add(args.Detail);
+    }
+
+    private void OnDeselect(IgbComponentValueChangedEventArgs args) => Selected.Remove(args.Detail);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/IgbButtonGroupComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/IgbButtonGroupComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbButtonGroupComponent/IgbButtonGroupComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..5933ecf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Date & Time"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/template.json
new file mode 100644
index 0000000..fe8cff6
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Date & Time"
+  ],
+  "identity": "IgniteUI.Blazor.IgbCalendarComponent",
+  "name": "Ignite UI Calendar",
+  "shortName": "igb-calendar",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbCalendarComponent",
+  "defaultName": "MyCalendar",
+  "primaryOutputs": [
+    {
+      "path": "IgbCalendarComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/IgbCalendarComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/IgbCalendarComponent.razor
new file mode 100644
index 0000000..821981c
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/IgbCalendarComponent.razor
@@ -0,0 +1,96 @@
+@page "/IgbCalendarComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbCalendarComponent</PageTitle>
+
+<h3>IgbCalendarComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Selection</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="SelectionName">
+                <IgbRadio Value="Single">Single</IgbRadio>
+                <IgbRadio Value="Multiple">Multiple</IgbRadio>
+                <IgbRadio Value="Range">Range</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Active view</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ActiveViewName">
+                <IgbRadio Value="Days">Days</IgbRadio>
+                <IgbRadio Value="Months">Months</IgbRadio>
+                <IgbRadio Value="Years">Years</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="TwoMonths">Two months</IgbSwitch>
+            <IgbSwitch @bind-Checked="ShowWeekNumbers">Week numbers</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideOutsideDays">Hide outside days</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbCalendar Selection="Selection"
+                 ActiveView="ActiveView"
+                 VisibleMonths="@(TwoMonths ? 2 : 1)"
+                 ShowWeekNumbers="ShowWeekNumbers"
+                 HideOutsideDays="HideOutsideDays"
+                 ValueChanged="OnValueChanged"
+                 ValuesChanged="OnValuesChanged" />
+</div>
+
+<div class="state">Selected: @Selected</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string SelectionName { get; set; } = "Single";
+    private CalendarSelection Selection => Enum.Parse<CalendarSelection>(SelectionName);
+
+    private string ActiveViewName { get; set; } = "Days";
+    private CalendarActiveView ActiveView => Enum.Parse<CalendarActiveView>(ActiveViewName);
+
+    private bool TwoMonths { get; set; }
+    private bool ShowWeekNumbers { get; set; }
+    private bool HideOutsideDays { get; set; }
+
+    private string Selected { get; set; } = "(none)";
+
+    private void OnValueChanged(DateTime value) {
+        if (Selection == CalendarSelection.Single) {
+            Selected = value.ToString("d");
+        }
+    }
+
+    private void OnValuesChanged(DateTime[] values) {
+        if (Selection != CalendarSelection.Single) {
+            Selected = values is { Length: > 0 }
+                ? string.Join(", ", values.Select(d => d.ToString("d")))
+                : "(none)";
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/IgbCalendarComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/IgbCalendarComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCalendarComponent/IgbCalendarComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..518721e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Layout"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/template.json
new file mode 100644
index 0000000..d97785a
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Layout"
+  ],
+  "identity": "IgniteUI.Blazor.IgbCardComponent",
+  "name": "Ignite UI Card",
+  "shortName": "igb-card",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbCardComponent",
+  "defaultName": "MyCard",
+  "primaryOutputs": [
+    {
+      "path": "IgbCardComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/IgbCardComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/IgbCardComponent.razor
new file mode 100644
index 0000000..ccadb4e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/IgbCardComponent.razor
@@ -0,0 +1,62 @@
+@page "/IgbCardComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbCardComponent</PageTitle>
+
+<h3>IgbCardComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Elevated">Elevated</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbCard class="demo-card" Elevated="Elevated">
+        <IgbCardMedia Height="10rem">
+            <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?auto=format&fit=crop&w=640&q=50" alt="Coastline" />
+        </IgbCardMedia>
+        <IgbCardHeader>
+            <h3 slot="title">New York City</h3>
+            <h5 slot="subtitle">City in New York</h5>
+        </IgbCardHeader>
+        <IgbCardContent>
+            <p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean.</p>
+        </IgbCardContent>
+        <IgbCardActions>
+            <IgbButton slot="start" Variant="ButtonVariant.Flat" @onclick="OnReadMore">Read more</IgbButton>
+            <IgbButton slot="end" Variant="ButtonVariant.Outlined" @onclick="OnLike">Like (@Likes)</IgbButton>
+        </IgbCardActions>
+    </IgbCard>
+</div>
+
+<div class="state">Elevated: @Elevated &nbsp;|&nbsp; Read more clicks: @ReadMoreClicks</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private bool Elevated { get; set; } = true;
+    private int Likes { get; set; }
+    private int ReadMoreClicks { get; set; }
+
+    private void OnLike() => Likes++;
+    private void OnReadMore() => ReadMoreClicks++;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/IgbCardComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/IgbCardComponent.razor.css
new file mode 100644
index 0000000..1c2d4e1
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCardComponent/IgbCardComponent.razor.css
@@ -0,0 +1,57 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-card {
+    max-width: 20rem;
+}
+
+.component-host ::deep .demo-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..518721e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Layout"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/template.json
new file mode 100644
index 0000000..0e2056f
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Layout"
+  ],
+  "identity": "IgniteUI.Blazor.IgbCarouselComponent",
+  "name": "Ignite UI Carousel",
+  "shortName": "igb-carousel",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbCarouselComponent",
+  "defaultName": "MyCarousel",
+  "primaryOutputs": [
+    {
+      "path": "IgbCarouselComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/IgbCarouselComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/IgbCarouselComponent.razor
new file mode 100644
index 0000000..13584b9
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/IgbCarouselComponent.razor
@@ -0,0 +1,92 @@
+@page "/IgbCarouselComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbCarouselComponent</PageTitle>
+
+<h3>IgbCarouselComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Indicators orientation</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="IndicatorsOrientationName">
+                <IgbRadio Value="Start">Start</IgbRadio>
+                <IgbRadio Value="End">End</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Vertical">Vertical</IgbSwitch>
+            <IgbSwitch @bind-Checked="DisableLoop">Disable loop</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideNavigation">Hide navigation</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideIndicators">Hide indicators</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host carousel-host">
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="Prev">Prev</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="Next">Next</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="Play">Play</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="Pause">Pause</IgbButton>
+    </div>
+
+    <IgbCarousel @ref="_carousel"
+                 class="demo-carousel"
+                 Vertical="Vertical"
+                 DisableLoop="DisableLoop"
+                 HideNavigation="HideNavigation"
+                 HideIndicators="HideIndicators"
+                 Interval="1500"
+                 IndicatorsOrientation="IndicatorsOrientation">
+        <IgbCarouselSlide>
+            <img src="https://dl.infragistics.com/x/img/carousel/ignite-ui-angular-indigo-design.png" alt="Slide 1" />
+        </IgbCarouselSlide>
+        <IgbCarouselSlide>
+            <img src="https://dl.infragistics.com/x/img/carousel/slider-image-chart.png" alt="Slide 2" />
+        </IgbCarouselSlide>
+        <IgbCarouselSlide>
+            <img src="https://dl.infragistics.com/x/img/carousel/ignite-ui-angular-charts.png" alt="Slide 3" />
+        </IgbCarouselSlide>
+    </IgbCarousel>
+</div>
+
+<div class="state">Orientation: @IndicatorsOrientationName &nbsp;|&nbsp; Vertical: @Vertical</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbCarousel _carousel = default!;
+
+    private string IndicatorsOrientationName { get; set; } = "End";
+    private CarouselIndicatorsOrientation IndicatorsOrientation => Enum.Parse<CarouselIndicatorsOrientation>(IndicatorsOrientationName);
+
+    private bool Vertical { get; set; }
+    private bool DisableLoop { get; set; }
+    private bool HideNavigation { get; set; }
+    private bool HideIndicators { get; set; }
+
+    private async Task Prev() => await _carousel.PrevAsync();
+    private async Task Next() => await _carousel.NextAsync();
+    private async Task Play() => await _carousel.PlayAsync();
+    private async Task Pause() => await _carousel.PauseAsync();
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/IgbCarouselComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/IgbCarouselComponent.razor.css
new file mode 100644
index 0000000..2392fd0
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCarouselComponent/IgbCarouselComponent.razor.css
@@ -0,0 +1,64 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.carousel-host {
+    flex-direction: column;
+    align-items: stretch;
+    max-width: 40rem;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.component-host ::deep .demo-carousel img {
+    width: 100%;
+    display: block;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/template.json
new file mode 100644
index 0000000..4a54062
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbCheckboxComponent",
+  "name": "Ignite UI Checkbox",
+  "shortName": "igb-checkbox",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbCheckboxComponent",
+  "defaultName": "MyCheckbox",
+  "primaryOutputs": [
+    {
+      "path": "IgbCheckboxComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/IgbCheckboxComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/IgbCheckboxComponent.razor
new file mode 100644
index 0000000..678fa04
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/IgbCheckboxComponent.razor
@@ -0,0 +1,63 @@
+@page "/IgbCheckboxComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbCheckboxComponent</PageTitle>
+
+<h3>IgbCheckboxComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Label position</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="LabelPositionName">
+                <IgbRadio Value="After">After</IgbRadio>
+                <IgbRadio Value="Before">Before</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Indeterminate">Indeterminate</IgbSwitch>
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbCheckbox @bind-Checked="Checked"
+                 Indeterminate="Indeterminate"
+                 LabelPosition="LabelPosition"
+                 Disabled="Disabled">
+        I agree to the terms
+    </IgbCheckbox>
+</div>
+
+<div class="state">Checked: @Checked &nbsp;|&nbsp; Indeterminate: @Indeterminate</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string LabelPositionName { get; set; } = "After";
+    private ToggleLabelPosition LabelPosition => Enum.Parse<ToggleLabelPosition>(LabelPositionName);
+
+    private bool Checked { get; set; } = true;
+    private bool Indeterminate { get; set; }
+    private bool Disabled { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/IgbCheckboxComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/IgbCheckboxComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCheckboxComponent/IgbCheckboxComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..838abde
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Buttons & Actions"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/template.json
new file mode 100644
index 0000000..724d318
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Buttons & Actions"
+  ],
+  "identity": "IgniteUI.Blazor.IgbChipComponent",
+  "name": "Ignite UI Chip",
+  "shortName": "igb-chip",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbChipComponent",
+  "defaultName": "MyChip",
+  "primaryOutputs": [
+    {
+      "path": "IgbChipComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/IgbChipComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/IgbChipComponent.razor
new file mode 100644
index 0000000..5adfbea
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/IgbChipComponent.razor
@@ -0,0 +1,101 @@
+@page "/IgbChipComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbChipComponent</PageTitle>
+
+<h3>IgbChipComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Variant</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="VariantName">
+                <IgbRadio Value="Default">Default</IgbRadio>
+                <IgbRadio Value="Primary">Primary</IgbRadio>
+                <IgbRadio Value="Info">Info</IgbRadio>
+                <IgbRadio Value="Success">Success</IgbRadio>
+                <IgbRadio Value="Warning">Warning</IgbRadio>
+                <IgbRadio Value="Danger">Danger</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Selectable">Selectable</IgbSwitch>
+            <IgbSwitch @bind-Checked="Removable">Removable</IgbSwitch>
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    @if (!Removed)
+    {
+        @if (VariantName == "Default"){
+            <IgbChip 
+                    Selectable="Selectable"
+                    Removable="Removable"
+                    Disabled="Disabled"
+                    @bind-Selected="Selected"
+                    Remove="OnRemove">
+                <IgbAvatar slot="start" Initials="A" Shape="AvatarShape.Circle" />
+                Filter chip
+            </IgbChip>
+
+        } else {
+            <IgbChip Variant="Variant"
+                    Selectable="Selectable"
+                    Removable="Removable"
+                    Disabled="Disabled"
+                    @bind-Selected="Selected"
+                    Remove="OnRemove">
+                <IgbAvatar slot="start" Initials="A" Shape="AvatarShape.Circle" />
+                Filter chip
+            </IgbChip>
+        }
+    }
+    else
+    {
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="Restore">Restore chip</IgbButton>
+    }
+</div>
+
+<div class="state">Selected: @Selected &nbsp;|&nbsp; Removed: @Removed</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string VariantName { get; set; } = "Default";
+    private StyleVariant Variant => Enum.Parse<StyleVariant>(VariantName);
+
+    private bool Selectable { get; set; } = true;
+    private bool Removable { get; set; } = true;
+    private bool Disabled { get; set; }
+    private bool Selected { get; set; }
+    private bool Removed { get; set; }
+
+    private void OnRemove(IgbComponentBoolValueChangedEventArgs args) => Removed = true;
+
+    private void Restore()
+    {
+        Removed = false;
+        Selected = false;
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/IgbChipComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/IgbChipComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbChipComponent/IgbChipComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..d16bad4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Feedback"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/template.json
new file mode 100644
index 0000000..021dd3f
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Feedback"
+  ],
+  "identity": "IgniteUI.Blazor.IgbCircularProgressComponent",
+  "name": "Ignite UI Circular Progress",
+  "shortName": "igb-circular-progress",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbCircularProgressComponent",
+  "defaultName": "MyCircularProgress",
+  "primaryOutputs": [
+    {
+      "path": "IgbCircularProgressComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/IgbCircularProgressComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/IgbCircularProgressComponent.razor
new file mode 100644
index 0000000..629b854
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/IgbCircularProgressComponent.razor
@@ -0,0 +1,73 @@
+@page "/IgbCircularProgressComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbCircularProgressComponent</PageTitle>
+
+<h3>IgbCircularProgressComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Value: @Value</label>
+        <div class="control-box">
+            <IgbSlider class="value-slider" @bind-Value="Value" Min="0" Max="100" Step="1" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Variant</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="VariantName">
+                <IgbRadio Value="Primary">Primary</IgbRadio>
+                <IgbRadio Value="Info">Info</IgbRadio>
+                <IgbRadio Value="Success">Success</IgbRadio>
+                <IgbRadio Value="Warning">Warning</IgbRadio>
+                <IgbRadio Value="Danger">Danger</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Indeterminate">Indeterminate</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideLabel">Hide label</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbCircularProgress class="demo-progress"
+                         Value="Value"
+                         Variant="Variant"
+                         Indeterminate="Indeterminate"
+                         HideLabel="HideLabel" />
+</div>
+
+<div class="state">Value: @Value% &nbsp;|&nbsp; Variant: @VariantName</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private double Value { get; set; } = 75;
+
+    private string VariantName { get; set; } = "Primary";
+    private StyleVariant Variant => Enum.Parse<StyleVariant>(VariantName);
+
+    private bool Indeterminate { get; set; }
+    private bool HideLabel { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/IgbCircularProgressComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/IgbCircularProgressComponent.razor.css
new file mode 100644
index 0000000..ca7e565
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbCircularProgressComponent/IgbCircularProgressComponent.razor.css
@@ -0,0 +1,57 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .value-slider {
+    width: 200px;
+}
+
+/* IgbCircularProgress sizes from --diameter / --stroke-thickness, not host w/h. */
+.component-host ::deep .demo-progress {
+    --diameter: 8rem;
+    --stroke-thickness: 8px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..183212e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Selection"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/template.json
new file mode 100644
index 0000000..7e6704c
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Selection"
+  ],
+  "identity": "IgniteUI.Blazor.IgbComboComponent",
+  "name": "Ignite UI Combo",
+  "shortName": "igb-combo",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbComboComponent",
+  "defaultName": "MyCombo",
+  "primaryOutputs": [
+    {
+      "path": "IgbComboComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/IgbComboComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/IgbComboComponent.razor
new file mode 100644
index 0000000..0a19a5a
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/IgbComboComponent.razor
@@ -0,0 +1,81 @@
+@page "/IgbComboComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbComboComponent</PageTitle>
+
+<h3>IgbComboComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="SingleSelect">Single select</IgbSwitch>
+            <IgbSwitch @bind-Checked="DisableFiltering">Disable filtering</IgbSwitch>
+            <IgbSwitch @bind-Checked="Grouped">Group by region</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbCombo T="string"
+              class="demo-combo"
+              Data="Data"
+              ValueKey="Id"
+              DisplayKey="Name"
+              GroupKey="@(Grouped ? "Region" : null)"
+              SingleSelect="SingleSelect"
+              DisableFiltering="DisableFiltering"
+              Label="Cities"
+              Placeholder="Pick a city"
+              @bind-Value="Selected">
+    </IgbCombo>
+</div>
+
+<div class="state">Selected: @SelectedNames</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private bool SingleSelect { get; set; }
+    private bool DisableFiltering { get; set; }
+    private bool Grouped { get; set; } = true;
+
+    private string[] Selected { get; set; } = Array.Empty<string>();
+
+    private string SelectedNames => Selected.Length == 0
+        ? "(none)"
+        : string.Join(", ", Data.Where(c => Selected.Contains(c.Id)).Select(c => c.Name));
+
+    private List<City> Data { get; set; } = new()
+    {
+        new City { Id = "1", Name = "London", Region = "Europe" },
+        new City { Id = "2", Name = "Paris", Region = "Europe" },
+        new City { Id = "3", Name = "Berlin", Region = "Europe" },
+        new City { Id = "4", Name = "New York", Region = "Americas" },
+        new City { Id = "5", Name = "Toronto", Region = "Americas" },
+        new City { Id = "6", Name = "Tokyo", Region = "Asia" },
+        new City { Id = "7", Name = "Singapore", Region = "Asia" }
+    };
+
+    public class City
+    {
+        public string Id { get; set; } = string.Empty;
+        public string Name { get; set; } = string.Empty;
+        public string Region { get; set; } = string.Empty;
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/IgbComboComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/IgbComboComponent.razor.css
new file mode 100644
index 0000000..c425d96
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbComboComponent/IgbComboComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-combo {
+    width: 300px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..5933ecf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Date & Time"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/template.json
new file mode 100644
index 0000000..df4afc2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Date & Time"
+  ],
+  "identity": "IgniteUI.Blazor.IgbDatePickerComponent",
+  "name": "Ignite UI Date Picker",
+  "shortName": "igb-date-picker",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbDatePickerComponent",
+  "defaultName": "MyDatePicker",
+  "primaryOutputs": [
+    {
+      "path": "IgbDatePickerComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/IgbDatePickerComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/IgbDatePickerComponent.razor
new file mode 100644
index 0000000..633ff86
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/IgbDatePickerComponent.razor
@@ -0,0 +1,67 @@
+@page "/IgbDatePickerComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbDatePickerComponent</PageTitle>
+
+<h3>IgbDatePickerComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Mode</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ModeName">
+                <IgbRadio Value="Dropdown">Dropdown</IgbRadio>
+                <IgbRadio Value="Dialog">Dialog</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Outlined">Outlined</IgbSwitch>
+            <IgbSwitch @bind-Checked="ShowWeekNumbers">Show week numbers</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideHeader">Hide header</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbDatePicker class="demo-input"
+                   @bind-Value="Value"
+                   Mode="Mode"
+                   Outlined="Outlined"
+                   ShowWeekNumbers="ShowWeekNumbers"
+                   HideHeader="HideHeader"
+                   Label="Pick a date" />
+</div>
+
+<div class="state">Value: @(Value?.ToString("d") ?? "(none)")</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private DateTime? Value { get; set; }
+
+    private string ModeName { get; set; } = "Dropdown";
+    private PickerMode Mode => Enum.Parse<PickerMode>(ModeName);
+
+    private bool Outlined { get; set; }
+    private bool ShowWeekNumbers { get; set; }
+    private bool HideHeader { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/IgbDatePickerComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/IgbDatePickerComponent.razor.css
new file mode 100644
index 0000000..f7cfb5f
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDatePickerComponent/IgbDatePickerComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-input {
+    width: 360px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..5933ecf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Date & Time"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/template.json
new file mode 100644
index 0000000..dded887
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Date & Time"
+  ],
+  "identity": "IgniteUI.Blazor.IgbDateRangePickerComponent",
+  "name": "Ignite UI Date Range Picker",
+  "shortName": "igb-date-range-picker",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbDateRangePickerComponent",
+  "defaultName": "MyDateRangePicker",
+  "primaryOutputs": [
+    {
+      "path": "IgbDateRangePickerComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/IgbDateRangePickerComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/IgbDateRangePickerComponent.razor
new file mode 100644
index 0000000..0f75d13
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/IgbDateRangePickerComponent.razor
@@ -0,0 +1,68 @@
+@page "/IgbDateRangePickerComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbDateRangePickerComponent</PageTitle>
+
+<h3>IgbDateRangePickerComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Mode</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ModeName">
+                <IgbRadio Value="Dropdown">Dropdown</IgbRadio>
+                <IgbRadio Value="Dialog">Dialog</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="UseTwoInputs">Two inputs</IgbSwitch>
+            <IgbSwitch @bind-Checked="UsePredefinedRanges">Predefined ranges</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbDateRangePicker class="demo-input"
+                        @bind-Value="Range"
+                        Mode="Mode"
+                        UseTwoInputs="UseTwoInputs"
+                        UsePredefinedRanges="UsePredefinedRanges"
+                        Label="Trip dates" />
+</div>
+
+<div class="state">Range: @RangeText</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbDateRangeValue? Range { get; set; }
+
+    private string ModeName { get; set; } = "Dropdown";
+    private PickerMode Mode => Enum.Parse<PickerMode>(ModeName);
+
+    private bool UseTwoInputs { get; set; } = true;
+    private bool UsePredefinedRanges { get; set; }
+
+    private string RangeText => Range is null
+        ? "(none)"
+        : $"{Range.Start:d} – {Range.End:d}";
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/IgbDateRangePickerComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/IgbDateRangePickerComponent.razor.css
new file mode 100644
index 0000000..1b6683b
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateRangePickerComponent/IgbDateRangePickerComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-input {
+    width: 720px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..5933ecf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Date & Time"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/template.json
new file mode 100644
index 0000000..55e0465
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Date & Time"
+  ],
+  "identity": "IgniteUI.Blazor.IgbDateTimeInputComponent",
+  "name": "Ignite UI Date Time Input",
+  "shortName": "igb-date-time-input",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbDateTimeInputComponent",
+  "defaultName": "MyDateTimeInput",
+  "primaryOutputs": [
+    {
+      "path": "IgbDateTimeInputComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/IgbDateTimeInputComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/IgbDateTimeInputComponent.razor
new file mode 100644
index 0000000..6ea187d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/IgbDateTimeInputComponent.razor
@@ -0,0 +1,83 @@
+@page "/IgbDateTimeInputComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbDateTimeInputComponent</PageTitle>
+
+<h3>IgbDateTimeInputComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Input format</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="InputFormat">
+                <IgbRadio Value="dd/MM/yyyy">dd/MM/yyyy</IgbRadio>
+                <IgbRadio Value="MM/dd/yyyy HH:mm">MM/dd/yyyy HH:mm</IgbRadio>
+                <IgbRadio Value="yyyy-MM-dd">yyyy-MM-dd</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="SpinLoop">Spin loop</IgbSwitch>
+            <IgbSwitch @bind-Checked="Outlined">Outlined</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbDateTimeInput @ref="_input"
+                      class="demo-input"
+                      @bind-Value="Value"
+                      InputFormat="@InputFormat"
+                      SpinLoop="SpinLoop"
+                      Outlined="Outlined"
+                      Label="Appointment" />
+
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="DayUp">Day +1</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="DayDown">Day -1</IgbButton>
+    </div>
+</div>
+
+<div class="state">Value: @(Value?.ToString("g") ?? "(none)")</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbDateTimeInput _input = default!;
+
+    private DateTime? Value { get; set; } = DateTime.Now;
+    private string InputFormat { get; set; } = "dd/MM/yyyy";
+    private bool SpinLoop { get; set; }
+    private bool Outlined { get; set; }
+
+    // StepUp/StepDown don't raise ValueChanged, so read the value back to resync.
+    private async Task DayUp()
+    {
+        await _input.StepUpAsync(DatePart.Date, 1);
+        Value = await _input.GetCurrentValueAsync();
+    }
+
+    private async Task DayDown()
+    {
+        await _input.StepDownAsync(DatePart.Date, 1);
+        Value = await _input.GetCurrentValueAsync();
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/IgbDateTimeInputComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/IgbDateTimeInputComponent.razor.css
new file mode 100644
index 0000000..7f65135
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDateTimeInputComponent/IgbDateTimeInputComponent.razor.css
@@ -0,0 +1,56 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-input {
+    width: 280px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..d16bad4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Feedback"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/template.json
new file mode 100644
index 0000000..dae6097
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Feedback"
+  ],
+  "identity": "IgniteUI.Blazor.IgbDialogComponent",
+  "name": "Ignite UI Dialog",
+  "shortName": "igb-dialog",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbDialogComponent",
+  "defaultName": "MyDialog",
+  "primaryOutputs": [
+    {
+      "path": "IgbDialogComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/IgbDialogComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/IgbDialogComponent.razor
new file mode 100644
index 0000000..cc239a2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/IgbDialogComponent.razor
@@ -0,0 +1,80 @@
+@page "/IgbDialogComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbDialogComponent</PageTitle>
+
+<h3>IgbDialogComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="CloseOnOutsideClick">Close on outside click</IgbSwitch>
+            <IgbSwitch @bind-Checked="KeepOpenOnEscape">Keep open on escape</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbButton Variant="ButtonVariant.Contained" @onclick="OnShow">Show dialog</IgbButton>
+
+    <IgbDialog @ref="_dialog"
+               Title="Delete item"
+               CloseOnOutsideClick="CloseOnOutsideClick"
+               KeepOpenOnEscape="KeepOpenOnEscape"
+               Closed="OnClosed">
+        <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+        <IgbButton slot="footer" Variant="ButtonVariant.Flat" @onclick="@(() => Close("Cancelled"))">Cancel</IgbButton>
+        <IgbButton slot="footer" Variant="ButtonVariant.Contained" @onclick="@(() => Close("Deleted"))">Delete</IgbButton>
+    </IgbDialog>
+</div>
+
+<div class="state">Last result: @LastResult</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbDialog _dialog = default!;
+
+    private bool CloseOnOutsideClick { get; set; }
+    private bool KeepOpenOnEscape { get; set; }
+    private string LastResult { get; set; } = "(none)";
+
+    private async Task OnShow()
+    {
+        // A second Esc lets the browser force-close the native dialog without the
+        // component clearing its open state, leaving the backdrop stuck. Hiding
+        // first resets that stale state; it is a no-op when already closed.
+        await _dialog.HideAsync();
+        await _dialog.ShowAsync();
+    }
+
+    private async Task Close(string result)
+    {
+        LastResult = result;
+        await _dialog.HideAsync();
+    }
+
+    private void OnClosed(IgbVoidEventArgs args)
+    {
+        if (LastResult == "(none)")
+        {
+            LastResult = "Dismissed";
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/IgbDialogComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/IgbDialogComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDialogComponent/IgbDialogComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..183212e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Selection"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/template.json
new file mode 100644
index 0000000..b6b80db
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Selection"
+  ],
+  "identity": "IgniteUI.Blazor.IgbDropdownComponent",
+  "name": "Ignite UI Drop Down",
+  "shortName": "igb-dropdown",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbDropdownComponent",
+  "defaultName": "MyDropdown",
+  "primaryOutputs": [
+    {
+      "path": "IgbDropdownComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/IgbDropdownComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/IgbDropdownComponent.razor
new file mode 100644
index 0000000..59bab79
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/IgbDropdownComponent.razor
@@ -0,0 +1,161 @@
+@page "/IgbDropdownComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbDropdownComponent</PageTitle>
+
+<h3>IgbDropdownComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Placement</label>
+        <IgbSelect @bind-Value="PlacementName">
+            @foreach (var placement in Placements)
+            {
+                <IgbSelectItem Value="@placement.ToString()">@placement.ToString()</IgbSelectItem>
+            }
+        </IgbSelect>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Flip">Flip</IgbSwitch>
+            <IgbSwitch @bind-Checked="SameWidth">Same width</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbDropdown @ref="_dropdown"
+                 Placement="Placement"
+                 Flip="Flip"
+                 SameWidth="SameWidth"
+                 Change="OnChange">
+        <IgbButton slot="target">Choose an action</IgbButton>
+
+        <IgbDropdownGroup>
+            <span slot="label">Edit</span>
+            <IgbDropdownItem Value="edit">
+                <IgbIcon @ref="_icon" slot="prefix" IconName="edit" Collection="material"></IgbIcon>
+                Edit
+                <span slot="suffix">Ctrl+E</span>
+            </IgbDropdownItem>
+            <IgbDropdownItem Value="duplicate">
+                <IgbIcon slot="prefix" IconName="content_copy" Collection="material"></IgbIcon>
+                Duplicate
+                <span slot="suffix">Ctrl+D</span>
+            </IgbDropdownItem>
+            <IgbDropdownItem Value="move">
+                <IgbIcon slot="prefix" IconName="folder" Collection="material"></IgbIcon>
+                Move
+                <span slot="suffix">Ctrl+M</span>
+            </IgbDropdownItem>
+        </IgbDropdownGroup>
+
+        <IgbDropdownGroup>
+            <span slot="label">Share</span>
+            <IgbDropdownItem Value="copy-link">
+                <IgbIcon slot="prefix" IconName="link" Collection="material"></IgbIcon>
+                Copy link
+                <span slot="suffix">Ctrl+L</span>
+            </IgbDropdownItem>
+            <IgbDropdownItem Value="share">
+                <IgbIcon slot="prefix" IconName="share" Collection="material"></IgbIcon>
+                Share
+                <span slot="suffix">Ctrl+Shift+S</span>
+            </IgbDropdownItem>
+            <IgbDropdownItem Value="download">
+                <IgbIcon slot="prefix" IconName="download" Collection="material"></IgbIcon>
+                Download
+                <span slot="suffix">Ctrl+J</span>
+            </IgbDropdownItem>
+        </IgbDropdownGroup>
+
+        <IgbDropdownGroup>
+            <span slot="label">Organize</span>
+            <IgbDropdownItem Value="favorite">
+                <IgbIcon slot="prefix" IconName="star" Collection="material"></IgbIcon>
+                Favorite
+                <span slot="suffix">Ctrl+B</span>
+            </IgbDropdownItem>
+            <IgbDropdownItem Value="archive">
+                <IgbIcon slot="prefix" IconName="archive" Collection="material"></IgbIcon>
+                Archive
+                <span slot="suffix">Ctrl+Shift+A</span>
+            </IgbDropdownItem>
+            <IgbDropdownItem Value="delete">
+                <IgbIcon slot="prefix" IconName="delete" Collection="material"></IgbIcon>
+                Delete
+                <span slot="suffix">Del</span>
+            </IgbDropdownItem>
+        </IgbDropdownGroup>
+    </IgbDropdown>
+
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnToggle">Toggle</IgbButton>
+    </div>
+</div>
+
+<div class="state">Selected: @Selected</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbDropdown _dropdown = default!;
+    private IgbIcon _icon = default!;
+    private bool _iconsRegistered;
+
+    private static readonly Dictionary<string, string> Icons = new()
+    {
+        ["edit"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>",
+        ["content_copy"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>",
+        ["folder"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/></svg>",
+        ["link"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/></svg>",
+        ["share"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z'/></svg>",
+        ["download"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/></svg>",
+        ["star"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>",
+        ["archive"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'/></svg>",
+        ["delete"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/></svg>"
+    };
+
+    private static readonly PopoverPlacement[] Placements = Enum.GetValues<PopoverPlacement>();
+
+    private string PlacementName { get; set; } = "BottomStart";
+    private PopoverPlacement Placement => Enum.Parse<PopoverPlacement>(PlacementName);
+
+    private bool Flip { get; set; }
+    private bool SameWidth { get; set; }
+    private string Selected { get; set; } = "(none)";
+
+    private async Task OnToggle() => await _dropdown.ToggleAsync();
+
+    private void OnChange(IgbDropdownItemComponentEventArgs args) => Selected = args.Detail?.Value ?? "(none)";
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!_iconsRegistered && _icon is not null)
+        {
+            await _icon.EnsureReady();
+            foreach (var (name, svg) in Icons)
+            {
+                await _icon.RegisterIconFromTextAsync(name, svg, "material");
+            }
+            _iconsRegistered = true;
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/IgbDropdownComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/IgbDropdownComponent.razor.css
new file mode 100644
index 0000000..b989c10
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbDropdownComponent/IgbDropdownComponent.razor.css
@@ -0,0 +1,57 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host {
+    align-items: flex-start;
+    min-height: 220px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..518721e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Layout"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/template.json
new file mode 100644
index 0000000..77d71c5
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Layout"
+  ],
+  "identity": "IgniteUI.Blazor.IgbExpansionPanelComponent",
+  "name": "Ignite UI Expansion Panel",
+  "shortName": "igb-expansion-panel",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbExpansionPanelComponent",
+  "defaultName": "MyExpansionPanel",
+  "primaryOutputs": [
+    {
+      "path": "IgbExpansionPanelComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/IgbExpansionPanelComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/IgbExpansionPanelComponent.razor
new file mode 100644
index 0000000..1d87e86
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/IgbExpansionPanelComponent.razor
@@ -0,0 +1,97 @@
+@page "/IgbExpansionPanelComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbExpansionPanelComponent</PageTitle>
+
+<h3>IgbExpansionPanelComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Indicator position</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="IndicatorPositionName">
+                <IgbRadio Value="Start">Start</IgbRadio>
+                <IgbRadio Value="End">End</IgbRadio>
+                <IgbRadio Value="None">None</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host expansion-host">
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="ExpandAll">Expand all</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="CollapseAll">Collapse all</IgbButton>
+    </div>
+
+    <IgbExpansionPanel @ref="_p1" IndicatorPosition="IndicatorPosition" Disabled="Disabled" Open="true">
+        <span slot="title">Golden Retriever</span>
+        <span slot="subtitle">Medium-large gun dog</span>
+        <span>The Golden Retriever is a friendly, intelligent breed that retrieves shot waterfowl during hunting.</span>
+    </IgbExpansionPanel>
+
+    <IgbExpansionPanel @ref="_p2" IndicatorPosition="IndicatorPosition" Disabled="Disabled">
+        <span slot="title">Labrador Retriever</span>
+        <span slot="subtitle">Sporting group</span>
+        <span>The Labrador Retriever is an even-tempered, outgoing breed and a popular family companion.</span>
+    </IgbExpansionPanel>
+
+    <IgbExpansionPanel @ref="_p3" IndicatorPosition="IndicatorPosition" Disabled="Disabled">
+        <span slot="title">German Shepherd</span>
+        <span slot="subtitle">Herding group</span>
+        <span>The German Shepherd is a working dog known for its intelligence, loyalty and versatility.</span>
+    </IgbExpansionPanel>
+</div>
+
+<div class="state">Indicator: @IndicatorPositionName &nbsp;|&nbsp; Disabled: @Disabled</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbExpansionPanel _p1 = default!;
+    private IgbExpansionPanel _p2 = default!;
+    private IgbExpansionPanel _p3 = default!;
+
+    private string IndicatorPositionName { get; set; } = "Start";
+    private ExpansionPanelIndicatorPosition IndicatorPosition => Enum.Parse<ExpansionPanelIndicatorPosition>(IndicatorPositionName);
+
+    private bool Disabled { get; set; }
+
+    private async Task ExpandAll()
+    {
+        foreach (var panel in new[] { _p1, _p2, _p3 })
+        {
+            await panel.ShowAsync();
+        }
+    }
+
+    private async Task CollapseAll()
+    {
+        foreach (var panel in new[] { _p1, _p2, _p3 })
+        {
+            await panel.HideAsync();
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/IgbExpansionPanelComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/IgbExpansionPanelComponent.razor.css
new file mode 100644
index 0000000..5dec5dd
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbExpansionPanelComponent/IgbExpansionPanelComponent.razor.css
@@ -0,0 +1,60 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.expansion-host {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+    max-width: 640px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..11df492
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Data Display"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/template.json
new file mode 100644
index 0000000..059440f
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/.template.config/template.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [ "Web", "Blazor", "Ignite UI" ],
+  "identity": "IgniteUI.Blazor.IgbGridComponent",
+  "name": "Ignite UI Data Grid Component",
+  "shortName": "igbgrid",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbGridComponent",
+  "defaultName": "MyGrid",
+  "primaryOutputs": [
+    { "path": "IgbGridComponent.razor" }
+  ],
+  "symbols": {
+    "HostIdentifier": { "type": "bind", "binding": "HostIdentifier" }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": { "files": "0" },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/IgbGridComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/IgbGridComponent.razor
new file mode 100644
index 0000000..8c9a67a
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/IgbGridComponent.razor
@@ -0,0 +1,85 @@
+@page "/IgbGridComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbGridComponent</PageTitle>
+
+<h3>IgbGridComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="InStockOnly">In stock only</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="grid-host">
+    <IgbGridLite class="demo-grid" TItem="Product" Data="@Visible">
+        <IgbGridLiteColumn Field="@nameof(Product.Name)" Header="Product"
+                           DataType="GridLiteColumnDataType.String" Sortable Filterable Resizable />
+        <IgbGridLiteColumn Field="@nameof(Product.Category)" Header="Category"
+                           DataType="GridLiteColumnDataType.String" Sortable Filterable />
+        <IgbGridLiteColumn Field="@nameof(Product.Price)" Header="Price"
+                           DataType="GridLiteColumnDataType.Number" Sortable />
+        <IgbGridLiteColumn Field="@nameof(Product.Released)" Header="Released"
+                           DataType="GridLiteColumnDataType.Date" Sortable />
+        <IgbGridLiteColumn Field="@nameof(Product.InStock)" Header="In stock"
+                           DataType="GridLiteColumnDataType.Boolean" Sortable />
+    </IgbGridLite>
+</div>
+
+<div class="state">Showing @Visible.Count of @Products.Count products</div>
+
+@code {
+    /*
+     * Ignite UI Grid Lite setup (open-source, MIT — IgniteUI.Blazor.GridLite).
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.GridLite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     */
+
+    private bool InStockOnly { get; set; }
+
+    private List<Product> Visible => InStockOnly
+        ? Products.Where(p => p.InStock).ToList()
+        : Products;
+
+    private List<Product> Products { get; } = new()
+    {
+        new("Aspen Desk Lamp", "Lighting", 49.99, new DateTime(2023, 3, 14), true),
+        new("Birch Office Chair", "Furniture", 189.00, new DateTime(2022, 11, 2), true),
+        new("Cobalt Mouse", "Electronics", 24.50, new DateTime(2024, 1, 20), true),
+        new("Delta Keyboard", "Electronics", 79.95, new DateTime(2023, 7, 8), false),
+        new("Echo Monitor 27\"", "Electronics", 329.00, new DateTime(2024, 5, 30), true),
+        new("Fjord Bookshelf", "Furniture", 149.99, new DateTime(2021, 9, 17), true),
+        new("Glacier Water Bottle", "Accessories", 18.00, new DateTime(2023, 2, 11), false),
+        new("Harbor Notebook", "Stationery", 9.99, new DateTime(2024, 4, 1), true),
+        new("Ivory Desk Mat", "Accessories", 29.95, new DateTime(2023, 10, 5), true),
+        new("Juniper Pen Set", "Stationery", 14.50, new DateTime(2022, 6, 22), false),
+        new("Kelvin Smart Bulb", "Lighting", 22.99, new DateTime(2024, 2, 18), true),
+        new("Larch Standing Desk", "Furniture", 459.00, new DateTime(2023, 8, 9), true),
+        new("Maple Webcam", "Electronics", 64.00, new DateTime(2024, 3, 27), true),
+        new("Nimbus Headphones", "Electronics", 119.99, new DateTime(2023, 12, 1), false),
+        new("Onyx Desk Organizer", "Accessories", 34.95, new DateTime(2022, 5, 14), true),
+        new("Pine Filing Cabinet", "Furniture", 209.00, new DateTime(2021, 12, 30), true),
+        new("Quartz Mousepad", "Accessories", 12.99, new DateTime(2024, 1, 5), true),
+        new("Raven USB Hub", "Electronics", 39.99, new DateTime(2023, 6, 19), false),
+        new("Slate Whiteboard", "Office", 89.00, new DateTime(2022, 8, 23), true),
+        new("Timber Stool", "Furniture", 74.50, new DateTime(2023, 4, 12), true),
+        new("Umber Cable Tray", "Accessories", 27.00, new DateTime(2024, 5, 2), true),
+        new("Verde Plant Pot", "Decor", 19.99, new DateTime(2023, 3, 28), false),
+        new("Willow Floor Lamp", "Lighting", 99.00, new DateTime(2022, 10, 16), true),
+        new("Zephyr Air Purifier", "Appliances", 159.00, new DateTime(2024, 4, 21), true)
+    };
+
+    private record Product(string Name, string Category, double Price, DateTime Released, bool InStock);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/IgbGridComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/IgbGridComponent.razor.css
new file mode 100644
index 0000000..47329cc
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbGridComponent/IgbGridComponent.razor.css
@@ -0,0 +1,57 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.grid-host {
+    padding: 0.5rem 0;
+}
+
+/* GridLite renders its own element; give it an explicit height to scroll. */
+.grid-host ::deep .demo-grid {
+    display: block;
+    height: 640px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..838abde
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Buttons & Actions"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/template.json
new file mode 100644
index 0000000..0daddc5
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Buttons & Actions"
+  ],
+  "identity": "IgniteUI.Blazor.IgbIconButtonComponent",
+  "name": "Ignite UI Icon Button",
+  "shortName": "igb-icon-button",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbIconButtonComponent",
+  "defaultName": "MyIconButton",
+  "primaryOutputs": [
+    {
+      "path": "IgbIconButtonComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/IgbIconButtonComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/IgbIconButtonComponent.razor
new file mode 100644
index 0000000..9c10775
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/IgbIconButtonComponent.razor
@@ -0,0 +1,80 @@
+@page "/IgbIconButtonComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbIconButtonComponent</PageTitle>
+
+<h3>IgbIconButtonComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Variant</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="VariantName">
+                <IgbRadio Value="Contained">Contained</IgbRadio>
+                <IgbRadio Value="Flat">Flat</IgbRadio>
+                <IgbRadio Value="Outlined">Outlined</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Mirrored">Mirrored</IgbSwitch>
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbIconButton @ref="_iconButtonRef"
+                   IconName="login"
+                   Collection="material"
+                   Variant="Variant"
+                   Mirrored="Mirrored"
+                   Disabled="Disabled"
+                   @onclick="OnClick" />
+</div>
+
+<div class="state">Variant: @VariantName &nbsp;|&nbsp; Clicks: @Clicks</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbIconButton _iconButtonRef = default!;
+
+    private string VariantName { get; set; } = "Contained";
+    private IconButtonVariant Variant => Enum.Parse<IconButtonVariant>(VariantName);
+
+    private bool Mirrored { get; set; }
+    private bool Disabled { get; set; }
+    private int Clicks { get; set; }
+
+    private const string LoginSvg = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M11 7l-1.41 1.41L12.17 11H3v2h9.17l-2.58 2.58L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z'/></svg>";
+
+    private void OnClick() => Clicks++;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && _iconButtonRef is not null)
+        {
+            await _iconButtonRef.EnsureReady();
+            await _iconButtonRef.RegisterIconFromTextAsync("login", LoginSvg, "material");
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/IgbIconButtonComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/IgbIconButtonComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconButtonComponent/IgbIconButtonComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..9f478d2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Data Display"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/template.json
new file mode 100644
index 0000000..34f52f9
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Data Display"
+  ],
+  "identity": "IgniteUI.Blazor.IgbIconComponent",
+  "name": "Ignite UI Icon",
+  "shortName": "igb-icon",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbIconComponent",
+  "defaultName": "MyIcon",
+  "primaryOutputs": [
+    {
+      "path": "IgbIconComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/IgbIconComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/IgbIconComponent.razor
new file mode 100644
index 0000000..5ffbaf4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/IgbIconComponent.razor
@@ -0,0 +1,88 @@
+@page "/IgbIconComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbIconComponent</PageTitle>
+
+<h3>IgbIconComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Icon</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="IconName">
+                <IgbRadio Value="home">home</IgbRadio>
+                <IgbRadio Value="favorite">favorite</IgbRadio>
+                <IgbRadio Value="star">star</IgbRadio>
+                <IgbRadio Value="login">login</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Size</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="Size">
+                <IgbRadio Value="small">Small</IgbRadio>
+                <IgbRadio Value="medium">Medium</IgbRadio>
+                <IgbRadio Value="large">Large</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Mirrored">Mirrored</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbIcon @ref="_iconRef" class="@($"demo-icon {Size}")" IconName="@IconName" Collection="material" Mirrored="Mirrored" />
+</div>
+
+<div class="state">IconName: @IconName &nbsp;|&nbsp; Size: @Size &nbsp;|&nbsp; Mirrored: @Mirrored</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbIcon _iconRef = default!;
+    private string IconName { get; set; } = "home";
+    private string Size { get; set; } = "medium";
+    private bool Mirrored { get; set; }
+
+    private static readonly Dictionary<string, string> Icons = new()
+    {
+        ["home"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>",
+        ["favorite"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>",
+        ["star"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></svg>",
+        ["login"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M11 7l-1.41 1.41L12.17 11H3v2h9.17l-2.58 2.58L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z'/></svg>"
+    };
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && _iconRef is not null)
+        {
+            await _iconRef.EnsureReady();
+            foreach (var (name, svg) in Icons)
+            {
+                await _iconRef.RegisterIconFromTextAsync(name, svg, "material");
+            }
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/IgbIconComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/IgbIconComponent.razor.css
new file mode 100644
index 0000000..e51b0ed
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbIconComponent/IgbIconComponent.razor.css
@@ -0,0 +1,67 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+/* IgbIcon renders its own <igc-icon>, outside this file's isolation scope.
+   The icon glyph is sized as 1em, so drive --size per class and apply it
+   as font-size. */
+.component-host ::deep .demo-icon.small {
+    --size: 1.5rem;
+}
+
+.component-host ::deep .demo-icon.medium {
+    --size: 3rem;
+}
+
+.component-host ::deep .demo-icon.large {
+    --size: 4.5rem;
+}
+
+.component-host ::deep igc-icon,
+.component-host ::deep svg {
+    font-size: var(--size);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/template.json
new file mode 100644
index 0000000..2b045f2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbInputComponent",
+  "name": "Ignite UI Input",
+  "shortName": "igb-input",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbInputComponent",
+  "defaultName": "MyInput",
+  "primaryOutputs": [
+    {
+      "path": "IgbInputComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/IgbInputComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/IgbInputComponent.razor
new file mode 100644
index 0000000..87d677b
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/IgbInputComponent.razor
@@ -0,0 +1,96 @@
+@page "/IgbInputComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbInputComponent</PageTitle>
+
+<h3>IgbInputComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Type</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="TypeName">
+                @foreach (var type in Types)
+                {
+                    <IgbRadio Value="@type.ToString()">@type.ToString()</IgbRadio>
+                }
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Outlined">Outlined</IgbSwitch>
+            <IgbSwitch @bind-Checked="Required">Required</IgbSwitch>
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbInput @key="TypeName"
+              class="demo-input"
+              @bind-Value="Value"
+              DisplayType="DisplayType"
+              Label="Your input"
+              Placeholder="@Placeholders[DisplayType]"
+              Outlined="Outlined"
+              Required="Required"
+              Disabled="Disabled">
+        <span slot="helper-text">Helper text shown below the field.</span>
+    </IgbInput>
+</div>
+
+<div class="state">Value: @(string.IsNullOrEmpty(Value) ? "(empty)" : Value)</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private static readonly InputType[] Types = Enum.GetValues<InputType>();
+
+    private static readonly Dictionary<InputType, string> Placeholders = new()
+    {
+        [InputType.Text] = "Enter text",
+        [InputType.Email] = "name@example.com",
+        [InputType.Number] = "0",
+        [InputType.Password] = "Enter password",
+        [InputType.Search] = "Search…",
+        [InputType.Tel] = "+1 (555) 000-0000",
+        [InputType.Url] = "https://example.com"
+    };
+
+    private string Value { get; set; } = string.Empty;
+
+    private string _typeName = "Text";
+    private string TypeName
+    {
+        get => _typeName;
+        set
+        {
+            if (_typeName == value) return;
+            _typeName = value;
+            Value = string.Empty; // reset value; @key recreates the input, clearing validation state
+        }
+    }
+    private InputType DisplayType => Enum.Parse<InputType>(TypeName);
+
+    private bool Outlined { get; set; }
+    private bool Required { get; set; }
+    private bool Disabled { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/IgbInputComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/IgbInputComponent.razor.css
new file mode 100644
index 0000000..d3b046d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbInputComponent/IgbInputComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-input {
+    width: 280px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..d16bad4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Feedback"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/template.json
new file mode 100644
index 0000000..071fd1a
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Feedback"
+  ],
+  "identity": "IgniteUI.Blazor.IgbLinearProgressComponent",
+  "name": "Ignite UI Linear Progress",
+  "shortName": "igb-linear-progress",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbLinearProgressComponent",
+  "defaultName": "MyLinearProgress",
+  "primaryOutputs": [
+    {
+      "path": "IgbLinearProgressComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/IgbLinearProgressComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/IgbLinearProgressComponent.razor
new file mode 100644
index 0000000..011843b
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/IgbLinearProgressComponent.razor
@@ -0,0 +1,94 @@
+@page "/IgbLinearProgressComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbLinearProgressComponent</PageTitle>
+
+<h3>IgbLinearProgressComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Value: @Value</label>
+        <div class="control-box">
+            <IgbSlider class="value-slider" @bind-Value="Value" Min="0" Max="100" Step="1" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Variant</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="VariantName">
+                <IgbRadio Value="Primary">Primary</IgbRadio>
+                <IgbRadio Value="Info">Info</IgbRadio>
+                <IgbRadio Value="Success">Success</IgbRadio>
+                <IgbRadio Value="Warning">Warning</IgbRadio>
+                <IgbRadio Value="Danger">Danger</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Label align</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="LabelAlignName">
+                <IgbRadio Value="TopStart">TopStart</IgbRadio>
+                <IgbRadio Value="Top">Top</IgbRadio>
+                <IgbRadio Value="TopEnd">TopEnd</IgbRadio>
+                <IgbRadio Value="BottomStart">BottomStart</IgbRadio>
+                <IgbRadio Value="Bottom">Bottom</IgbRadio>
+                <IgbRadio Value="BottomEnd">BottomEnd</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Striped">Striped</IgbSwitch>
+            <IgbSwitch @bind-Checked="Indeterminate">Indeterminate</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideLabel">Hide label</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbLinearProgress class="demo-progress"
+                       Value="Value"
+                       Variant="Variant"
+                       LabelAlign="LabelAlign"
+                       Striped="Striped"
+                       Indeterminate="Indeterminate"
+                       HideLabel="HideLabel" />
+</div>
+
+<div class="state">Value: @Value% &nbsp;|&nbsp; Variant: @VariantName</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private double Value { get; set; } = 75;
+
+    private string VariantName { get; set; } = "Primary";
+    private StyleVariant Variant => Enum.Parse<StyleVariant>(VariantName);
+
+    private string LabelAlignName { get; set; } = "TopStart";
+    private LinearProgressLabelAlign LabelAlign => Enum.Parse<LinearProgressLabelAlign>(LabelAlignName);
+
+    private bool Striped { get; set; }
+    private bool Indeterminate { get; set; }
+    private bool HideLabel { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/IgbLinearProgressComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/IgbLinearProgressComponent.razor.css
new file mode 100644
index 0000000..52951de
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbLinearProgressComponent/IgbLinearProgressComponent.razor.css
@@ -0,0 +1,55 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .value-slider {
+    width: 200px;
+}
+
+.component-host ::deep .demo-progress {
+    width: 340px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..9f478d2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Data Display"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/template.json
new file mode 100644
index 0000000..848fc14
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Data Display"
+  ],
+  "identity": "IgniteUI.Blazor.IgbListComponent",
+  "name": "Ignite UI List",
+  "shortName": "igb-list",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbListComponent",
+  "defaultName": "MyList",
+  "primaryOutputs": [
+    {
+      "path": "IgbListComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/IgbListComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/IgbListComponent.razor
new file mode 100644
index 0000000..0f78061
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/IgbListComponent.razor
@@ -0,0 +1,79 @@
+@page "/IgbListComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbListComponent</PageTitle>
+
+<h3>IgbListComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Filter</label>
+        <div class="control-box">
+            <IgbInput class="filter-input" @bind-Value="Filter" Placeholder="Search contacts" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="ShowAvatars">Show avatars</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbList class="contacts">
+        <IgbListHeader>Contacts</IgbListHeader>
+        @foreach (var c in Filtered)
+        {
+            <IgbListItem Selected="@(c.Name == SelectedName)" @onclick="@(() => SelectedName = c.Name)">
+                @if (ShowAvatars)
+                {
+                    <IgbAvatar slot="start" Initials="@c.Initials" Shape="AvatarShape.Circle" />
+                }
+                <span slot="title">@c.Name</span>
+                <span slot="subtitle">@c.Phone</span>
+            </IgbListItem>
+        }
+    </IgbList>
+</div>
+
+<div class="state">Showing @Filtered.Count of @Contacts.Count &nbsp;|&nbsp; Selected: @(SelectedName ?? "(none)")</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string Filter { get; set; } = string.Empty;
+    private bool ShowAvatars { get; set; } = true;
+    private string? SelectedName { get; set; }
+
+    private List<Contact> Contacts { get; } = new()
+    {
+        new("Terrance Orta", "770-504-2217", "TO"),
+        new("Richard Mahoney", "423-676-2869", "RM"),
+        new("Donna Price", "859-496-2817", "DP"),
+        new("Lisa Landers", "901-747-3428", "LL"),
+        new("Dorothy Spencer", "573-394-9254", "DS")
+    };
+
+    private List<Contact> Filtered => Contacts
+        .Where(c => string.IsNullOrEmpty(Filter) || c.Name.Contains(Filter, StringComparison.OrdinalIgnoreCase))
+        .ToList();
+
+    private record Contact(string Name, string Phone, string Initials);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/IgbListComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/IgbListComponent.razor.css
new file mode 100644
index 0000000..f5ba4c4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbListComponent/IgbListComponent.razor.css
@@ -0,0 +1,57 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .filter-input {
+    width: 240px;
+}
+
+.component-host ::deep .contacts {
+    width: 360px;
+    border: 1px solid var(--ig-gray-200, #e0e0e0);
+    border-radius: 4px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/template.json
new file mode 100644
index 0000000..2f9253d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbMaskInputComponent",
+  "name": "Ignite UI Mask Input",
+  "shortName": "igb-mask-input",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbMaskInputComponent",
+  "defaultName": "MyMaskInput",
+  "primaryOutputs": [
+    {
+      "path": "IgbMaskInputComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/IgbMaskInputComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/IgbMaskInputComponent.razor
new file mode 100644
index 0000000..c30ed74
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/IgbMaskInputComponent.razor
@@ -0,0 +1,93 @@
+@page "/IgbMaskInputComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbMaskInputComponent</PageTitle>
+
+<h3>IgbMaskInputComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Mask</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="MaskName">
+                <IgbRadio Value="Phone">Phone</IgbRadio>
+                <IgbRadio Value="SSN">SSN</IgbRadio>
+                <IgbRadio Value="Date">Date</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Value mode</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ValueModeName">
+                <IgbRadio Value="Raw">Raw</IgbRadio>
+                <IgbRadio Value="WithFormatting">WithFormatting</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbMaskInput class="demo-input"
+                  @bind-Value="Value"
+                  Mask="@Mask"
+                  ValueMode="ValueMode"
+                  Label="Masked input">
+        <span slot="helper-text">Mask: @Mask</span>
+    </IgbMaskInput>
+</div>
+
+<div class="state">Value (@ValueModeName): @(string.IsNullOrEmpty(Value) ? "(empty)" : Value)</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string Value { get; set; } = string.Empty;
+
+    private string _maskName = "Phone";
+    private string MaskName
+    {
+        get => _maskName;
+        set
+        {
+            if (_maskName == value) return;
+            _maskName = value;
+            Value = string.Empty; // a value entered for the old mask won't fit the new one; clear it
+        }
+    }
+    private string Mask => MaskName switch
+    {
+        "SSN" => "000-00-0000",
+        "Date" => "00/00/0000",
+        _ => "(####) 000-0000"
+    };
+
+    private string _valueModeName = "Raw";
+    private string ValueModeName
+    {
+        get => _valueModeName;
+        set
+        {
+            if (_valueModeName == value) return;
+            _valueModeName = value;
+            Value = string.Empty; // ValueMode only changes how Value is reported, not the stored value; clear it so the user enters fresh input
+        }
+    }
+    private MaskInputValueMode ValueMode => Enum.Parse<MaskInputValueMode>(ValueModeName);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/IgbMaskInputComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/IgbMaskInputComponent.razor.css
new file mode 100644
index 0000000..d3b046d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbMaskInputComponent/IgbMaskInputComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-input {
+    width: 280px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..14feb7e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Navigation"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/template.json
new file mode 100644
index 0000000..1283ea9
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Navigation"
+  ],
+  "identity": "IgniteUI.Blazor.IgbNavDrawerComponent",
+  "name": "Ignite UI Navigation Drawer",
+  "shortName": "igb-nav-drawer",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbNavDrawerComponent",
+  "defaultName": "MyNavDrawer",
+  "primaryOutputs": [
+    {
+      "path": "IgbNavDrawerComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/IgbNavDrawerComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/IgbNavDrawerComponent.razor
new file mode 100644
index 0000000..0ee654b
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/IgbNavDrawerComponent.razor
@@ -0,0 +1,74 @@
+@page "/IgbNavDrawerComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbNavDrawerComponent</PageTitle>
+
+<h3>IgbNavDrawerComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Position</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="PositionName">
+                <IgbRadio Value="Relative">Relative</IgbRadio>
+                <IgbRadio Value="Start">Start</IgbRadio>
+                <IgbRadio Value="End">End</IgbRadio>
+                <IgbRadio Value="Top">Top</IgbRadio>
+                <IgbRadio Value="Bottom">Bottom</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnShow">Show</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnHide">Hide</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnToggle">Toggle</IgbButton>
+    </div>
+
+    <IgbNavDrawer @ref="_drawer" Position="Position" Open="true">
+        <IgbNavDrawerHeaderItem>Mailbox</IgbNavDrawerHeaderItem>
+        <IgbNavDrawerItem Active="@(Selected == "Inbox")" @onclick="@(() => Selected = "Inbox")">
+            <span slot="content">Inbox</span>
+        </IgbNavDrawerItem>
+        <IgbNavDrawerItem Active="@(Selected == "Drafts")" @onclick="@(() => Selected = "Drafts")">
+            <span slot="content">Drafts</span>
+        </IgbNavDrawerItem>
+        <IgbNavDrawerItem Active="@(Selected == "Sent")" @onclick="@(() => Selected = "Sent")">
+            <span slot="content">Sent</span>
+        </IgbNavDrawerItem>
+    </IgbNavDrawer>
+</div>
+
+<div class="state">Selected item: @Selected</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbNavDrawer _drawer = default!;
+
+    private string PositionName { get; set; } = "Relative";
+    private NavDrawerPosition Position => Enum.Parse<NavDrawerPosition>(PositionName);
+
+    private string Selected { get; set; } = "Inbox";
+
+    private async Task OnShow() => await _drawer.ShowAsync();
+    private async Task OnHide() => await _drawer.HideAsync();
+    private async Task OnToggle() => await _drawer.ToggleAsync();
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/IgbNavDrawerComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/IgbNavDrawerComponent.razor.css
new file mode 100644
index 0000000..2c198a4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavDrawerComponent/IgbNavDrawerComponent.razor.css
@@ -0,0 +1,58 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 260px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..14feb7e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Navigation"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/template.json
new file mode 100644
index 0000000..04eabc6
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Navigation"
+  ],
+  "identity": "IgniteUI.Blazor.IgbNavbarComponent",
+  "name": "Ignite UI Navbar",
+  "shortName": "igb-navbar",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbNavbarComponent",
+  "defaultName": "MyNavbar",
+  "primaryOutputs": [
+    {
+      "path": "IgbNavbarComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/IgbNavbarComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/IgbNavbarComponent.razor
new file mode 100644
index 0000000..522d1d5
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/IgbNavbarComponent.razor
@@ -0,0 +1,76 @@
+@page "/IgbNavbarComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbNavbarComponent</PageTitle>
+
+<h3>IgbNavbarComponent</h3>
+
+<div class="component-host navbar-host">
+    <IgbIcon @ref="_iconRef" class="icon-registrar" />
+
+    <IgbNavbar>
+        <IgbIconButton slot="start"
+                       IconName="menu"
+                       Collection="material"
+                       Variant="IconButtonVariant.Flat"
+                       @onclick="@(() => SetAction("Menu"))" />
+
+        <h3 class="navbar-title">Mailbox</h3>
+
+        <IgbIconButton slot="end"
+                       IconName="search"
+                       Collection="material"
+                       Variant="IconButtonVariant.Flat"
+                       @onclick="@(() => SetAction("Search"))" />
+        <IgbIconButton slot="end"
+                       IconName="account"
+                       Collection="material"
+                       Variant="IconButtonVariant.Flat"
+                       @onclick="@(() => SetAction("Account"))" />
+    </IgbNavbar>
+</div>
+
+<div class="state">Last action: @LastAction</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbIcon _iconRef = default!;
+    private string LastAction { get; set; } = "(none)";
+
+    private void SetAction(string action) => LastAction = action;
+
+    private static readonly Dictionary<string, string> Icons = new()
+    {
+        ["menu"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>",
+        ["search"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z'/></svg>",
+        ["account"] = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>"
+    };
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && _iconRef is not null)
+        {
+            await _iconRef.EnsureReady();
+            foreach (var (name, svg) in Icons)
+            {
+                await _iconRef.RegisterIconFromTextAsync(name, svg, "material");
+            }
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/IgbNavbarComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/IgbNavbarComponent.razor.css
new file mode 100644
index 0000000..a217e34
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbNavbarComponent/IgbNavbarComponent.razor.css
@@ -0,0 +1,60 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.navbar-host {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.navbar-title {
+    margin: 0;
+}
+
+.icon-registrar {
+    display: none;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/template.json
new file mode 100644
index 0000000..54484f1
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbRadioGroupComponent",
+  "name": "Ignite UI Radio Group",
+  "shortName": "igb-radio-group",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbRadioGroupComponent",
+  "defaultName": "MyRadioGroup",
+  "primaryOutputs": [
+    {
+      "path": "IgbRadioGroupComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/IgbRadioGroupComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/IgbRadioGroupComponent.razor
new file mode 100644
index 0000000..de19728
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/IgbRadioGroupComponent.razor
@@ -0,0 +1,60 @@
+@page "/IgbRadioGroupComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbRadioGroupComponent</PageTitle>
+
+<h3>IgbRadioGroupComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Alignment</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="AlignmentName">
+                <IgbRadio Value="Horizontal">Horizontal</IgbRadio>
+                <IgbRadio Value="Vertical">Vertical</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="DisableExpress">Disable "Express"</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbRadioGroup Alignment="Alignment" @bind-Value="Selected">
+        <IgbRadio Value="standard">Standard</IgbRadio>
+        <IgbRadio Value="express" Disabled="DisableExpress">Express</IgbRadio>
+        <IgbRadio Value="overnight">Overnight</IgbRadio>
+    </IgbRadioGroup>
+</div>
+
+<div class="state">Selected: @(string.IsNullOrEmpty(Selected) ? "(none)" : Selected)</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string AlignmentName { get; set; } = "Horizontal";
+    private ContentOrientation Alignment => Enum.Parse<ContentOrientation>(AlignmentName);
+
+    private string Selected { get; set; } = "standard";
+    private bool DisableExpress { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/IgbRadioGroupComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/IgbRadioGroupComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRadioGroupComponent/IgbRadioGroupComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/template.json
new file mode 100644
index 0000000..6db5cca
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbRangeSliderComponent",
+  "name": "Ignite UI Range Slider",
+  "shortName": "igb-range-slider",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbRangeSliderComponent",
+  "defaultName": "MyRangeSlider",
+  "primaryOutputs": [
+    {
+      "path": "IgbRangeSliderComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/IgbRangeSliderComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/IgbRangeSliderComponent.razor
new file mode 100644
index 0000000..8b48ed3
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/IgbRangeSliderComponent.razor
@@ -0,0 +1,78 @@
+@page "/IgbRangeSliderComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbRangeSliderComponent</PageTitle>
+
+<h3>IgbRangeSliderComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Tick orientation</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="TickOrientationName">
+                <IgbRadio Value="Start">Start</IgbRadio>
+                <IgbRadio Value="End">End</IgbRadio>
+                <IgbRadio Value="Mirror">Mirror</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="DiscreteTrack">Discrete track</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideTooltip">Hide tooltip</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbRangeSlider class="demo-slider"
+                    Lower="Lower"
+                    Upper="Upper"
+                    Min="0"
+                    Max="100"
+                    Step="5"
+                    PrimaryTicks="5"
+                    SecondaryTicks="1"
+                    DiscreteTrack="DiscreteTrack"
+                    HideTooltip="HideTooltip"
+                    TickOrientation="TickOrientation"
+                    Change="OnChange" />
+</div>
+
+<div class="state">Range: @Lower – @Upper</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private double Lower { get; set; } = 20;
+    private double Upper { get; set; } = 70;
+
+    private string TickOrientationName { get; set; } = "End";
+    private SliderTickOrientation TickOrientation => Enum.Parse<SliderTickOrientation>(TickOrientationName);
+
+    private bool DiscreteTrack { get; set; }
+    private bool HideTooltip { get; set; }
+
+    private void OnChange(IgbRangeSliderValueEventArgs args)
+    {
+        Lower = args.Detail.Lower;
+        Upper = args.Detail.Upper;
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/IgbRangeSliderComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/IgbRangeSliderComponent.razor.css
new file mode 100644
index 0000000..7f0fc9d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRangeSliderComponent/IgbRangeSliderComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-slider {
+    width: 340px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/template.json
new file mode 100644
index 0000000..01c19ca
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbRatingComponent",
+  "name": "Ignite UI Rating",
+  "shortName": "igb-rating",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbRatingComponent",
+  "defaultName": "MyRating",
+  "primaryOutputs": [
+    {
+      "path": "IgbRatingComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/IgbRatingComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/IgbRatingComponent.razor
new file mode 100644
index 0000000..b629c1a
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/IgbRatingComponent.razor
@@ -0,0 +1,69 @@
+@page "/IgbRatingComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbRatingComponent</PageTitle>
+
+<h3>IgbRatingComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Max: @Max</label>
+        <div class="control-box">
+            <IgbSlider class="max-slider" @bind-Value="Max" Min="3" Max="10" Step="1" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="HalfSteps">Half steps</IgbSwitch>
+            <IgbSwitch @bind-Checked="HoverPreview">Hover preview</IgbSwitch>
+            <IgbSwitch @bind-Checked="AllowReset">Allow reset</IgbSwitch>
+            <IgbSwitch @bind-Checked="ReadOnly">Read-only</IgbSwitch>
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbRating @bind-Value="Value"
+               Label="Rate your experience"
+               Max="Max"
+               Step="Step"
+               HoverPreview="HoverPreview"
+               AllowReset="AllowReset"
+               ReadOnly="ReadOnly"
+               Disabled="Disabled" />
+</div>
+
+<div class="state">Value: @Value / @Max</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private double Value { get; set; } = 3;
+    private double Max { get; set; } = 5;
+
+    private bool HalfSteps { get; set; }
+    private double Step => HalfSteps ? 0.5 : 1;
+
+    private bool HoverPreview { get; set; } = true;
+    private bool AllowReset { get; set; } = true;
+    private bool ReadOnly { get; set; }
+    private bool Disabled { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/IgbRatingComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/IgbRatingComponent.razor.css
new file mode 100644
index 0000000..0ddc512
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbRatingComponent/IgbRatingComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .max-slider {
+    width: 200px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..183212e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Selection"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/template.json
new file mode 100644
index 0000000..2aab50c
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Selection"
+  ],
+  "identity": "IgniteUI.Blazor.IgbSelectComponent",
+  "name": "Ignite UI Select",
+  "shortName": "igb-select",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbSelectComponent",
+  "defaultName": "MySelect",
+  "primaryOutputs": [
+    {
+      "path": "IgbSelectComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/IgbSelectComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/IgbSelectComponent.razor
new file mode 100644
index 0000000..390a2d9
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/IgbSelectComponent.razor
@@ -0,0 +1,78 @@
+@page "/IgbSelectComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbSelectComponent</PageTitle>
+
+<h3>IgbSelectComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Placement</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="PlacementName">
+                <IgbRadio Value="Bottom">Bottom</IgbRadio>
+                <IgbRadio Value="Top">Top</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Outlined">Outlined</IgbSwitch>
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbSelect @ref="_select"
+               class="demo-select"
+               @bind-Value="Selected"
+               Placement="Placement"
+               Outlined="Outlined"
+               Disabled="Disabled"
+               Label="Fruit">
+        <IgbSelectItem Value="orange">Orange</IgbSelectItem>
+        <IgbSelectItem Value="apple">Apple</IgbSelectItem>
+        <IgbSelectItem Value="banana">Banana</IgbSelectItem>
+        <IgbSelectItem Value="grape" Disabled="true">Grape (out of stock)</IgbSelectItem>
+    </IgbSelect>
+
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnClear">Clear</IgbButton>
+    </div>
+</div>
+
+<div class="state">Selected: @(Selected ?? "(none)")</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbSelect _select = default!;
+
+    private string? Selected { get; set; }
+
+    private string PlacementName { get; set; } = "Bottom";
+    private PopoverPlacement Placement => Enum.Parse<PopoverPlacement>(PlacementName);
+
+    private bool Outlined { get; set; }
+    private bool Disabled { get; set; }
+
+    private async Task OnClear() => await _select.ClearSelectionAsync();
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/IgbSelectComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/IgbSelectComponent.razor.css
new file mode 100644
index 0000000..102aa90
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSelectComponent/IgbSelectComponent.razor.css
@@ -0,0 +1,56 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-select {
+    width: 260px;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/template.json
new file mode 100644
index 0000000..e798de8
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbSliderComponent",
+  "name": "Ignite UI Slider",
+  "shortName": "igb-slider",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbSliderComponent",
+  "defaultName": "MySlider",
+  "primaryOutputs": [
+    {
+      "path": "IgbSliderComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/IgbSliderComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/IgbSliderComponent.razor
new file mode 100644
index 0000000..a88d15e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/IgbSliderComponent.razor
@@ -0,0 +1,69 @@
+@page "/IgbSliderComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbSliderComponent</PageTitle>
+
+<h3>IgbSliderComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Tick orientation</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="TickOrientationName">
+                <IgbRadio Value="Start">Start</IgbRadio>
+                <IgbRadio Value="End">End</IgbRadio>
+                <IgbRadio Value="Mirror">Mirror</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="DiscreteTrack">Discrete track</IgbSwitch>
+            <IgbSwitch @bind-Checked="HideTooltip">Hide tooltip</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbSlider class="demo-slider"
+               @bind-Value="Value"
+               Min="0"
+               Max="100"
+               Step="10"
+               PrimaryTicks="5"
+               SecondaryTicks="1"
+               DiscreteTrack="DiscreteTrack"
+               HideTooltip="HideTooltip"
+               TickOrientation="TickOrientation" />
+</div>
+
+<div class="state">Value: @Value</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private double Value { get; set; } = 40;
+
+    private string TickOrientationName { get; set; } = "End";
+    private SliderTickOrientation TickOrientation => Enum.Parse<SliderTickOrientation>(TickOrientationName);
+
+    private bool DiscreteTrack { get; set; }
+    private bool HideTooltip { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/IgbSliderComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/IgbSliderComponent.razor.css
new file mode 100644
index 0000000..7f0fc9d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSliderComponent/IgbSliderComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-slider {
+    width: 340px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..d16bad4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Feedback"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/template.json
new file mode 100644
index 0000000..be9abff
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Feedback"
+  ],
+  "identity": "IgniteUI.Blazor.IgbSnackbarComponent",
+  "name": "Ignite UI Snackbar",
+  "shortName": "igb-snackbar",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbSnackbarComponent",
+  "defaultName": "MySnackbar",
+  "primaryOutputs": [
+    {
+      "path": "IgbSnackbarComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/IgbSnackbarComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/IgbSnackbarComponent.razor
new file mode 100644
index 0000000..19da5ca
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/IgbSnackbarComponent.razor
@@ -0,0 +1,84 @@
+@page "/IgbSnackbarComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbSnackbarComponent</PageTitle>
+
+<h3>IgbSnackbarComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Position</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="PositionName">
+                <IgbRadio Value="Bottom">Bottom</IgbRadio>
+                <IgbRadio Value="Middle">Middle</IgbRadio>
+                <IgbRadio Value="Top">Top</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Display time: @DisplayTime ms</label>
+        <div class="control-box">
+            <IgbSlider class="value-slider" @bind-Value="DisplayTime" Min="1000" Max="8000" Step="500" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="KeepOpen">Keep open</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbButton Variant="ButtonVariant.Contained" @onclick="OnShow">Show</IgbButton>
+    <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnHide">Hide</IgbButton>
+    <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnToggle">Toggle</IgbButton>
+
+    <IgbSnackbar @ref="_snackbar"
+                 Position="Position"
+                 DisplayTime="DisplayTime"
+                 KeepOpen="KeepOpen"
+                 ActionText="Undo"
+                 Action="OnAction">
+        Item moved to archive.
+    </IgbSnackbar>
+</div>
+
+<div class="state">Last action: @LastAction</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbSnackbar _snackbar = default!;
+
+    private string PositionName { get; set; } = "Bottom";
+    private AbsolutePosition Position => Enum.Parse<AbsolutePosition>(PositionName);
+
+    private double DisplayTime { get; set; } = 4000;
+    private bool KeepOpen { get; set; }
+    private string LastAction { get; set; } = "(none)";
+
+    private async Task OnShow() => await _snackbar.ShowAsync();
+    private async Task OnHide() => await _snackbar.HideAsync();
+    private async Task OnToggle() => await _snackbar.ToggleAsync();
+
+    private void OnAction(IgbVoidEventArgs args) => LastAction = "Undo clicked";
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/IgbSnackbarComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/IgbSnackbarComponent.razor.css
new file mode 100644
index 0000000..bf76c16
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSnackbarComponent/IgbSnackbarComponent.razor.css
@@ -0,0 +1,58 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .value-slider {
+    width: 200px;
+}
+
+/* igc-snackbar renders position:fixed with no z-index; the "Top" position pins
+   it to the viewport top where app chrome (e.g. an igc-navbar at z-index:4)
+   would otherwise cover it. Lift it above so it stays visible. */
+.component-host ::deep igc-snackbar {
+    z-index: 1000;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..518721e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Layout"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/template.json
new file mode 100644
index 0000000..3063f57
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Layout"
+  ],
+  "identity": "IgniteUI.Blazor.IgbStepperComponent",
+  "name": "Ignite UI Stepper",
+  "shortName": "igb-stepper",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbStepperComponent",
+  "defaultName": "MyStepper",
+  "primaryOutputs": [
+    {
+      "path": "IgbStepperComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/IgbStepperComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/IgbStepperComponent.razor
new file mode 100644
index 0000000..4990db5
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/IgbStepperComponent.razor
@@ -0,0 +1,135 @@
+@page "/IgbStepperComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbStepperComponent</PageTitle>
+
+<h3>IgbStepperComponent</h3>
+
+<div class="component-host">
+   <div class="radio-groups">
+        <div class="radio-group">
+            <label>Title position</label>
+            <div class="radio-group-container">
+                <IgbRadioGroup Alignment="ContentOrientation.Horizontal">
+                    <IgbRadio name="alignment" Value="top" Change="onTitlePositionChange">Top</IgbRadio>
+                    <IgbRadio name="alignment" Value="bottom" Change="onTitlePositionChange">Bottom</IgbRadio>
+                    <IgbRadio name="alignment" Value="start" Change="onTitlePositionChange">Start</IgbRadio>
+                    <IgbRadio name="alignment" Value="end" Change="onTitlePositionChange">End</IgbRadio>
+                    <IgbRadio name="alignment" Value="" Checked="true" Change="onTitlePositionChange">Default</IgbRadio>
+                </IgbRadioGroup>
+            </div>
+        </div>
+
+        <div class="radio-group">
+            <label>Orientation</label>
+            <div class="radio-group-container">
+                <IgbRadioGroup Alignment="ContentOrientation.Horizontal">
+                    <IgbRadio name="orientation" Value="horizontal" Checked="true" Change="onOrientationChange">Horizontal</IgbRadio>
+                    <IgbRadio name="orientation" Value="vertical" Change="onOrientationChange">Vertical</IgbRadio>
+                </IgbRadioGroup>
+            </div>
+        </div>
+   </div>
+
+   <IgbStepper Name="stepper" @ref="stepper" Orientation="@Orientation" TitlePosition="@TitlePosition">
+        <IgbStep>
+            <span slot="title">Order</span>
+             <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
+
+        </IgbStep>
+        <IgbStep>
+            <span slot="title">Payment</span>
+            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
+            <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Next">NEXT</IgbButton>
+        </IgbStep>
+        <IgbStep>
+            <span slot="title">Confirmation</span>
+                 <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Previous">PREVIOUS</IgbButton>
+                 <IgbButton DisplayType="ButtonBaseType.Button" @onclick="Reset">RESET</IgbButton>
+        </IgbStep>
+    </IgbStepper>
+</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    public IgbStepper stepper = default!;
+    public StepperOrientation Orientation = StepperOrientation.Horizontal;
+    public StepperTitlePosition TitlePosition;
+
+    private bool IsDefaultTitlePosition;
+
+    public void onTitlePositionChange(IgbRadioChangeEventArgs args)
+    {
+        if(args.Detail.Checked)
+        {
+            var value = (args.Parent as IgbRadio)?.Value?.ToString();
+            if (String.IsNullOrEmpty(value))
+            {
+                IsDefaultTitlePosition = true;
+                setDefaultTitleOrientation(stepper.Orientation);
+
+            } else
+            {
+                IsDefaultTitlePosition = false;
+                TitlePosition = (StepperTitlePosition)System.Enum.Parse(typeof(StepperTitlePosition), value, true);
+            }
+        }
+    }
+
+    public void onOrientationChange(IgbRadioChangeEventArgs args)
+    {
+        if(args.Detail.Checked)
+        {
+            var value = (args.Parent as IgbRadio)?.Value?.ToString();
+            if (!String.IsNullOrEmpty(value))
+            {
+                Orientation = (StepperOrientation)System.Enum.Parse(typeof(StepperOrientation), value, true);
+            } 
+
+            if (IsDefaultTitlePosition)
+                setDefaultTitleOrientation(Orientation);
+
+        }
+    }
+
+    public async Task Previous()
+    {
+        await this.stepper.PrevAsync();
+    }
+
+    public async Task Next()
+    {
+        await this.stepper.NextAsync();
+    }
+
+    public async Task Reset()
+    {
+        await this.stepper.ResetAsync();
+    }
+
+    private void setDefaultTitleOrientation(StepperOrientation orientation)
+    {
+        if( orientation == StepperOrientation.Horizontal )
+        {
+            TitlePosition = StepperTitlePosition.Bottom;
+        } else {
+            TitlePosition = StepperTitlePosition.End;
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/IgbStepperComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/IgbStepperComponent.razor.css
new file mode 100644
index 0000000..a17288f
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbStepperComponent/IgbStepperComponent.razor.css
@@ -0,0 +1,23 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.component-host {
+    display: block;
+    padding: 1rem 0;
+}
+
+.radio-groups {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.radio-group {
+    margin-right: 2rem;
+}
+
+.radio-group-container {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..3496143
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/template.json
new file mode 100644
index 0000000..1218721
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbSwitchComponent",
+  "name": "Ignite UI Switch",
+  "shortName": "igb-switch",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbSwitchComponent",
+  "defaultName": "MySwitch",
+  "primaryOutputs": [
+    {
+      "path": "IgbSwitchComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/IgbSwitchComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/IgbSwitchComponent.razor
new file mode 100644
index 0000000..d018cff
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/IgbSwitchComponent.razor
@@ -0,0 +1,63 @@
+@page "/IgbSwitchComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbSwitchComponent</PageTitle>
+
+<h3>IgbSwitchComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Label position</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="LabelPositionName">
+                <IgbRadio Value="After">After</IgbRadio>
+                <IgbRadio Value="Before">Before</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+            <IgbSwitch @bind-Checked="Required">Required</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbSwitch @bind-Checked="Checked"
+               LabelPosition="LabelPosition"
+               Disabled="Disabled"
+               Required="Required">
+        Enable notifications
+    </IgbSwitch>
+</div>
+
+<div class="state">Checked: @Checked</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string LabelPositionName { get; set; } = "After";
+    private ToggleLabelPosition LabelPosition => Enum.Parse<ToggleLabelPosition>(LabelPositionName);
+
+    private bool Checked { get; set; } = true;
+    private bool Disabled { get; set; }
+    private bool Required { get; set; }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/IgbSwitchComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/IgbSwitchComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbSwitchComponent/IgbSwitchComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..518721e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Layout"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/template.json
new file mode 100644
index 0000000..cc23929
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Layout"
+  ],
+  "identity": "IgniteUI.Blazor.IgbTabsComponent",
+  "name": "Ignite UI Tabs",
+  "shortName": "igb-tabs",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbTabsComponent",
+  "defaultName": "MyTabs",
+  "primaryOutputs": [
+    {
+      "path": "IgbTabsComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/IgbTabsComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/IgbTabsComponent.razor
new file mode 100644
index 0000000..41dc1ae
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/IgbTabsComponent.razor
@@ -0,0 +1,75 @@
+@page "/IgbTabsComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbTabsComponent</PageTitle>
+
+<h3>IgbTabsComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Alignment</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="AlignmentName">
+                <IgbRadio Value="Start">Start</IgbRadio>
+                <IgbRadio Value="End">End</IgbRadio>
+                <IgbRadio Value="Center">Center</IgbRadio>
+                <IgbRadio Value="Justify">Justify</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Activation</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ActivationName">
+                <IgbRadio Value="Auto">Auto</IgbRadio>
+                <IgbRadio Value="Manual">Manual</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+</div>
+
+<div class="component-host tabs-host">
+    <IgbTabs Alignment="Alignment" Activation="Activation" Change="OnTabChange">
+        <IgbTab Label="Home">
+            Welcome to the home tab.
+        </IgbTab>
+        <IgbTab Label="Search">
+            Search across your content here.
+        </IgbTab>
+        <IgbTab Label="Settings">
+            Adjust your preferences in the settings tab.
+        </IgbTab>
+    </IgbTabs>
+</div>
+
+<div class="state">Selected tab: @SelectedTab</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string AlignmentName { get; set; } = "Start";
+    private TabsAlignment Alignment => Enum.Parse<TabsAlignment>(AlignmentName);
+
+    private string ActivationName { get; set; } = "Auto";
+    private TabsActivation Activation => Enum.Parse<TabsActivation>(ActivationName);
+
+    private string SelectedTab { get; set; } = "Home";
+
+    private void OnTabChange(IgbTabComponentEventArgs args) => SelectedTab = args.Detail?.Label ?? "(none)";
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/IgbTabsComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/IgbTabsComponent.razor.css
new file mode 100644
index 0000000..99bf311
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTabsComponent/IgbTabsComponent.razor.css
@@ -0,0 +1,55 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.tabs-host {
+    align-items: stretch;
+}
+
+.component-host ::deep igc-tabs {
+    width: 100%;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..42699d4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Inputs"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/template.json
new file mode 100644
index 0000000..3796743
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Inputs"
+  ],
+  "identity": "IgniteUI.Blazor.IgbTextareaComponent",
+  "name": "Ignite UI Text Area",
+  "shortName": "igb-textarea",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbTextareaComponent",
+  "defaultName": "MyTextArea",
+  "primaryOutputs": [
+    {
+      "path": "IgbTextareaComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/IgbTextareaComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/IgbTextareaComponent.razor
new file mode 100644
index 0000000..78bb82e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/IgbTextareaComponent.razor
@@ -0,0 +1,118 @@
+@page "/IgbTextareaComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbTextareaComponent</PageTitle>
+
+<h3>IgbTextareaComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Resize</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ResizeName">
+                @foreach (var resize in Resizes)
+                {
+                    <IgbRadio Value="@resize.ToString()">@resize.ToString()</IgbRadio>
+                }
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Wrap</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="WrapName">
+                @foreach (var wrap in Wraps)
+                {
+                    <IgbRadio Value="@wrap.ToString()">@wrap.ToString()</IgbRadio>
+                }
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Rows</label>
+        <div class="control-box rows-box">
+            <IgbButton Variant="ButtonVariant.Outlined" @onclick="RowsDown">−</IgbButton>
+            <span class="rows-value">@Rows</span>
+            <IgbButton Variant="ButtonVariant.Outlined" @onclick="RowsUp">+</IgbButton>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Outlined">Outlined</IgbSwitch>
+            <IgbSwitch @bind-Checked="Required">Required</IgbSwitch>
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+            <IgbSwitch @bind-Checked="Spellcheck">Spellcheck</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbTextarea class="demo-textarea"
+                 @bind-Value="Value"
+                 Input="OnInput"
+                 Resize="Resize"
+                 Wrap="Wrap"
+                 Rows="Rows"
+                 MaxLength="MaxLength"
+                 Label="Your message"
+                 Placeholder="Type a few lines…"
+                 Outlined="Outlined"
+                 Required="Required"
+                 Disabled="Disabled"
+                 Spellcheck="Spellcheck">
+        <span slot="helper-text">@Length / @((int)MaxLength) characters</span>
+    </IgbTextarea>
+</div>
+
+<div class="state">Resize: @ResizeName &nbsp;|&nbsp; Wrap: @WrapName &nbsp;|&nbsp; Rows: @Rows &nbsp;|&nbsp; Length: @Length</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private const double MaxLength = 200;
+
+    private static readonly TextareaResize[] Resizes = Enum.GetValues<TextareaResize>();
+    private static readonly TextareaWrap[] Wraps = Enum.GetValues<TextareaWrap>();
+
+    private string Value { get; set; } = string.Empty;
+
+    // @bind-Value commits on change (blur); the Input event fires per keystroke, so
+    // track the live length separately to keep the counter current as the user types.
+    private int Length { get; set; }
+    private void OnInput(IgbComponentValueChangedEventArgs args) => Length = args.Detail?.Length ?? 0;
+
+    private string ResizeName { get; set; } = "Vertical";
+    private TextareaResize Resize => Enum.Parse<TextareaResize>(ResizeName);
+
+    private string WrapName { get; set; } = "Soft";
+    private TextareaWrap Wrap => Enum.Parse<TextareaWrap>(WrapName);
+
+    private double Rows { get; set; } = 4;
+
+    private bool Outlined { get; set; }
+    private bool Required { get; set; }
+    private bool Disabled { get; set; }
+    private bool Spellcheck { get; set; } = true;
+
+    private void RowsUp() => Rows = Math.Min(Rows + 1, 12);
+    private void RowsDown() => Rows = Math.Max(Rows - 1, 2);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/IgbTextareaComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/IgbTextareaComponent.razor.css
new file mode 100644
index 0000000..d43747a
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTextareaComponent/IgbTextareaComponent.razor.css
@@ -0,0 +1,63 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.rows-box {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.rows-value {
+    min-width: 1.5rem;
+    text-align: center;
+    font-family: ui-monospace, monospace;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-textarea {
+    width: 360px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..518721e
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Layout"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/template.json
new file mode 100644
index 0000000..97f27a2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Layout"
+  ],
+  "identity": "IgniteUI.Blazor.IgbTileManagerComponent",
+  "name": "Ignite UI Tile Manager",
+  "shortName": "igb-tile-manager",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbTileManagerComponent",
+  "defaultName": "MyTileManager",
+  "primaryOutputs": [
+    {
+      "path": "IgbTileManagerComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/IgbTileManagerComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/IgbTileManagerComponent.razor
new file mode 100644
index 0000000..7e5fa85
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/IgbTileManagerComponent.razor
@@ -0,0 +1,116 @@
+@page "/IgbTileManagerComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbTileManagerComponent</PageTitle>
+
+<h3>IgbTileManagerComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Columns: @ColumnCount</label>
+        <div class="control-box">
+            <IgbSlider class="value-slider" @bind-Value="ColumnCount" Min="1" Max="4" Step="1" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Resize mode</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="ResizeModeName">
+                <IgbRadio Value="None">None</IgbRadio>
+                <IgbRadio Value="Hover">Hover</IgbRadio>
+                <IgbRadio Value="Always">Always</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Drag mode</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="DragModeName">
+                <IgbRadio Value="None">None</IgbRadio>
+                <IgbRadio Value="TileHeader">TileHeader</IgbRadio>
+                <IgbRadio Value="Tile">Tile</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <div class="actions">
+        <IgbButton Variant="ButtonVariant.Outlined" @onclick="SaveLayout">Save layout</IgbButton>
+        <IgbButton Variant="ButtonVariant.Outlined" Disabled="@(_savedLayout is null)" @onclick="LoadLayout">Restore layout</IgbButton>
+    </div>
+
+    <IgbTileManager @ref="_tileManager"
+                    ColumnCount="(int)ColumnCount"
+                    ResizeMode="ResizeMode"
+                    DragMode="DragMode"
+                    Gap="16px">
+        <IgbTile>
+            <h3 slot="title">Sales</h3>
+            <div>Quarter-to-date revenue overview.</div>
+        </IgbTile>
+        <IgbTile>
+            <h3 slot="title">Traffic</h3>
+            <div>Daily active users.</div>
+        </IgbTile>
+        <IgbTile ColSpan="2">
+            <h3 slot="title">Pipeline</h3>
+            <div>This tile spans two columns.</div>
+        </IgbTile>
+        <IgbTile RowSpan="2">
+            <h3 slot="title">Tasks</h3>
+            <div>This tile spans two rows.</div>
+        </IgbTile>
+    </IgbTileManager>
+</div>
+
+<div class="state">Columns: @ColumnCount &nbsp;|&nbsp; @LayoutStatus</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbTileManager _tileManager = default!;
+    private string? _savedLayout;
+
+    private double ColumnCount { get; set; } = 3;
+
+    private string ResizeModeName { get; set; } = "Hover";
+    private TileManagerResizeMode ResizeMode => Enum.Parse<TileManagerResizeMode>(ResizeModeName);
+
+    private string DragModeName { get; set; } = "TileHeader";
+    private TileManagerDragMode DragMode => Enum.Parse<TileManagerDragMode>(DragModeName);
+
+    private string LayoutStatus { get; set; } = "No saved layout";
+
+    private async Task SaveLayout()
+    {
+        _savedLayout = await _tileManager.SaveLayoutAsync();
+        LayoutStatus = "Layout saved";
+    }
+
+    private async Task LoadLayout()
+    {
+        if (_savedLayout is not null)
+        {
+            await _tileManager.LoadLayoutAsync(_savedLayout);
+            LayoutStatus = "Layout restored";
+        }
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/IgbTileManagerComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/IgbTileManagerComponent.razor.css
new file mode 100644
index 0000000..beca1f7
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTileManagerComponent/IgbTileManagerComponent.razor.css
@@ -0,0 +1,66 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .value-slider {
+    width: 160px;
+}
+
+.component-host {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.component-host ::deep igc-tile-manager {
+    min-height: 320px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..d16bad4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Feedback"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/template.json
new file mode 100644
index 0000000..774e81c
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Feedback"
+  ],
+  "identity": "IgniteUI.Blazor.IgbToastComponent",
+  "name": "Ignite UI Toast",
+  "shortName": "igb-toast",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbToastComponent",
+  "defaultName": "MyToast",
+  "primaryOutputs": [
+    {
+      "path": "IgbToastComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/IgbToastComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/IgbToastComponent.razor
new file mode 100644
index 0000000..b4287b7
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/IgbToastComponent.razor
@@ -0,0 +1,79 @@
+@page "/IgbToastComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbToastComponent</PageTitle>
+
+<h3>IgbToastComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Position</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="PositionName">
+                <IgbRadio Value="Bottom">Bottom</IgbRadio>
+                <IgbRadio Value="Middle">Middle</IgbRadio>
+                <IgbRadio Value="Top">Top</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Display time: @DisplayTime ms</label>
+        <div class="control-box">
+            <IgbSlider class="value-slider" @bind-Value="DisplayTime" Min="1000" Max="8000" Step="500" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="KeepOpen">Keep open</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbButton Variant="ButtonVariant.Contained" @onclick="OnShow">Show</IgbButton>
+    <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnHide">Hide</IgbButton>
+    <IgbButton Variant="ButtonVariant.Outlined" @onclick="OnToggle">Toggle</IgbButton>
+
+    <IgbToast @ref="_toast"
+              Position="Position"
+              DisplayTime="DisplayTime"
+              KeepOpen="KeepOpen">
+        Changes saved successfully.
+    </IgbToast>
+</div>
+
+<div class="state">Position: @PositionName &nbsp;|&nbsp; Keep open: @KeepOpen</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private IgbToast _toast = default!;
+
+    private string PositionName { get; set; } = "Bottom";
+    private AbsolutePosition Position => Enum.Parse<AbsolutePosition>(PositionName);
+
+    private double DisplayTime { get; set; } = 4000;
+    private bool KeepOpen { get; set; }
+
+    private async Task OnShow() => await _toast.ShowAsync();
+    private async Task OnHide() => await _toast.HideAsync();
+    private async Task OnToggle() => await _toast.ToggleAsync();
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/IgbToastComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/IgbToastComponent.razor.css
new file mode 100644
index 0000000..20b153c
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToastComponent/IgbToastComponent.razor.css
@@ -0,0 +1,58 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .value-slider {
+    width: 200px;
+}
+
+/* igc-toast renders position:fixed with no z-index; the "Top" position pins it
+   to the viewport top where app chrome (e.g. an igc-navbar at z-index:4) would
+   otherwise cover it. Lift it above so it stays visible. */
+.component-host ::deep igc-toast {
+    z-index: 1000;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..838abde
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Buttons & Actions"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/template.json
new file mode 100644
index 0000000..0083a06
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Buttons & Actions"
+  ],
+  "identity": "IgniteUI.Blazor.IgbToggleButtonComponent",
+  "name": "Ignite UI Toggle Button",
+  "shortName": "igb-toggle-button",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbToggleButtonComponent",
+  "defaultName": "MyToggleButton",
+  "primaryOutputs": [
+    {
+      "path": "IgbToggleButtonComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/IgbToggleButtonComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/IgbToggleButtonComponent.razor
new file mode 100644
index 0000000..faa98a7
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/IgbToggleButtonComponent.razor
@@ -0,0 +1,73 @@
+@page "/IgbToggleButtonComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbToggleButtonComponent</PageTitle>
+
+<h3>IgbToggleButtonComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Group selection</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="SelectionName">
+                <IgbRadio Value="Single">Single</IgbRadio>
+                <IgbRadio Value="SingleRequired">SingleRequired</IgbRadio>
+                <IgbRadio Value="Multiple">Multiple</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="Disabled">Disabled</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    @* Toggle buttons live inside an IgbButtonGroup, which owns the selection. *@
+    <IgbButtonGroup Selection="Selection" Disabled="Disabled" Select="OnSelect" Deselect="OnDeselect">
+        <IgbToggleButton Value="bold">Bold</IgbToggleButton>
+        <IgbToggleButton Value="italic">Italic</IgbToggleButton>
+        <IgbToggleButton Value="underline">Underline</IgbToggleButton>
+    </IgbButtonGroup>
+</div>
+
+<div class="state">Selected: @(Selected.Count == 0 ? "(none)" : string.Join(", ", Selected))</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string SelectionName { get; set; } = "Multiple";
+    private ButtonGroupSelection Selection => Enum.Parse<ButtonGroupSelection>(SelectionName);
+
+    private bool Disabled { get; set; }
+    private readonly HashSet<string> Selected = new();
+
+    private void OnSelect(IgbComponentValueChangedEventArgs args)
+    {
+        if (Selection != ButtonGroupSelection.Multiple)
+        {
+            Selected.Clear();
+        }
+        Selected.Add(args.Detail);
+    }
+
+    private void OnDeselect(IgbComponentValueChangedEventArgs args) => Selected.Remove(args.Detail);
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/IgbToggleButtonComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/IgbToggleButtonComponent.razor.css
new file mode 100644
index 0000000..02c33bf
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbToggleButtonComponent/IgbToggleButtonComponent.razor.css
@@ -0,0 +1,47 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..d16bad4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Feedback"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/template.json
new file mode 100644
index 0000000..6d687a0
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Feedback"
+  ],
+  "identity": "IgniteUI.Blazor.IgbTooltipComponent",
+  "name": "Ignite UI Tooltip",
+  "shortName": "igb-tooltip",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbTooltipComponent",
+  "defaultName": "MyTooltip",
+  "primaryOutputs": [
+    {
+      "path": "IgbTooltipComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/IgbTooltipComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/IgbTooltipComponent.razor
new file mode 100644
index 0000000..d06c842
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/IgbTooltipComponent.razor
@@ -0,0 +1,77 @@
+@page "/IgbTooltipComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbTooltipComponent</PageTitle>
+
+<h3>IgbTooltipComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Placement</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="PlacementName">
+                <IgbRadio Value="Top">Top</IgbRadio>
+                <IgbRadio Value="Bottom">Bottom</IgbRadio>
+                <IgbRadio Value="Left">Left</IgbRadio>
+                <IgbRadio Value="Right">Right</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Offset: @Offset px</label>
+        <div class="control-box">
+            <IgbSlider class="value-slider" @bind-Value="Offset" Min="0" Max="24" Step="2" />
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="ShowTip">Show</IgbSwitch>
+            <IgbSwitch @bind-Checked="WithArrow">With arrow</IgbSwitch>
+            <IgbSwitch @bind-Checked="Sticky">Sticky</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host tooltip-host">
+    <IgbButton id="tooltip-anchor" Variant="ButtonVariant.Contained">Anchor</IgbButton>
+    <IgbTooltip Anchor="tooltip-anchor"
+                Open="ShowTip"
+                Placement="Placement"
+                Offset="Offset"
+                WithArrow="WithArrow"
+                Sticky="Sticky">
+        Helpful hint about this button.
+    </IgbTooltip>
+</div>
+
+<div class="state">Placement: @PlacementName &nbsp;|&nbsp; Offset: @Offset</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string PlacementName { get; set; } = "Top";
+    private PopoverPlacement Placement => Enum.Parse<PopoverPlacement>(PlacementName);
+
+    private double Offset { get; set; } = 6;
+    private bool ShowTip { get; set; } = true;
+    private bool WithArrow { get; set; } = true;
+    private bool Sticky { get; set; } = true;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/IgbTooltipComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/IgbTooltipComponent.razor.css
new file mode 100644
index 0000000..89d0107
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTooltipComponent/IgbTooltipComponent.razor.css
@@ -0,0 +1,56 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.control ::deep .value-slider {
+    width: 200px;
+}
+
+.tooltip-host {
+    min-height: 120px;
+    justify-content: center;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/ide.host.json
new file mode 100644
index 0000000..9f478d2
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/ide.host.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json.schemastore.org/ide.host",
+  "appliesTo": "(Blazor | Web)",
+  "defaultItemExtension": "razor",
+  "itemHierarchyPaths": [
+    "Ignite UI for Blazor",
+    "Ignite UI for Blazor\\Data Display"
+  ],
+  "icon": "icon.png",
+  "unsupportedHosts": [
+    {
+      "id": "vs",
+      "version": "(,17.3)"
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/template.json
new file mode 100644
index 0000000..fa908a0
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/.template.config/template.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "http://json.schemastore.org/template",
+  "author": "Infragistics",
+  "classifications": [
+    "Web",
+    "Blazor",
+    "Ignite UI",
+    "Data Display"
+  ],
+  "identity": "IgniteUI.Blazor.IgbTreeComponent",
+  "name": "Ignite UI Tree",
+  "shortName": "igb-tree",
+  "tags": {
+    "language": "C#",
+    "type": "item"
+  },
+  "sourceName": "IgbTreeComponent",
+  "defaultName": "MyTree",
+  "primaryOutputs": [
+    {
+      "path": "IgbTreeComponent.razor"
+    }
+  ],
+  "symbols": {
+    "HostIdentifier": {
+      "type": "bind",
+      "binding": "HostIdentifier"
+    }
+  },
+  "postActions": [
+    {
+      "id": "openInEditor",
+      "condition": "(HostIdentifier != \"dotnetcli\" && HostIdentifier != \"dotnetcli-preview\")",
+      "description": "Opens the generated component in the editor.",
+      "manualInstructions": [],
+      "actionId": "84C0DA21-51C8-4541-9940-6CA19AF04EE6",
+      "args": {
+        "files": "0"
+      },
+      "continueOnError": true
+    }
+  ]
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/IgbTreeComponent.razor b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/IgbTreeComponent.razor
new file mode 100644
index 0000000..352c5e4
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/IgbTreeComponent.razor
@@ -0,0 +1,87 @@
+@page "/IgbTreeComponent"
+@using IgniteUI.Blazor.Controls
+
+<PageTitle>IgbTreeComponent</PageTitle>
+
+<h3>IgbTreeComponent</h3>
+
+<div class="controls">
+    <div class="control">
+        <label>Selection</label>
+        <div class="control-box">
+            <IgbRadioGroup Alignment="ContentOrientation.Horizontal" @bind-Value="SelectionName">
+                <IgbRadio Value="None">None</IgbRadio>
+                <IgbRadio Value="Multiple">Multiple</IgbRadio>
+                <IgbRadio Value="Cascade">Cascade</IgbRadio>
+            </IgbRadioGroup>
+        </div>
+    </div>
+
+    <div class="control">
+        <label>Options</label>
+        <div class="control-box switches">
+            <IgbSwitch @bind-Checked="SingleBranchExpand">Single branch expand</IgbSwitch>
+            <IgbSwitch @bind-Checked="ToggleNodeOnClick">Toggle node on click</IgbSwitch>
+        </div>
+    </div>
+</div>
+
+<div class="component-host">
+    <IgbTree class="demo-tree"
+             Selection="Selection"
+             SingleBranchExpand="SingleBranchExpand"
+             ToggleNodeOnClick="ToggleNodeOnClick"
+             SelectionChanged="OnSelectionChanged">
+        <IgbTreeItem Label="North America" Expanded="true">
+            <IgbTreeItem Label="United States" />
+            <IgbTreeItem Label="Canada" />
+            <IgbTreeItem Label="Mexico" />
+        </IgbTreeItem>
+        <IgbTreeItem Label="Europe">
+            <IgbTreeItem Label="United Kingdom" />
+            <IgbTreeItem Label="Germany" />
+            <IgbTreeItem Label="Bulgaria" />
+        </IgbTreeItem>
+        <IgbTreeItem Label="Asia">
+            <IgbTreeItem Label="Japan" />
+            <IgbTreeItem Label="Singapore" />
+        </IgbTreeItem>
+    </IgbTree>
+</div>
+
+<div class="state">Selected: @Selected</div>
+
+@code {
+    /*
+     * Ignite UI for Blazor - open-source (MIT) component from IgniteUI.Blazor.Lite.
+     * An item template can't modify project files, so do this once per project:
+     *
+     * 1. Install:   dotnet add package IgniteUI.Blazor.Lite
+     * 2. Register (Program.cs):   builder.Services.AddIgniteUIBlazor();
+     * 3. _Imports.razor:          @using IgniteUI.Blazor.Controls
+     *    (optional here — this file already declares its own @using;
+     *    add it to _Imports.razor to share it project-wide)
+     * 4. Host page theme (index.html / App.razor / _Host.cshtml):
+     *    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
+     * 5. Blazor Web App (.NET 8+): add an interactive render mode to this page,
+     *    e.g. @rendermode InteractiveServer (or InteractiveWebAssembly / InteractiveAuto).
+     *
+     * Do not mix IgniteUI.Blazor.Lite with the licensed IgniteUI.Blazor package.
+     */
+
+    private string SelectionName { get; set; } = "Multiple";
+    private TreeSelection Selection => Enum.Parse<TreeSelection>(SelectionName);
+
+    private bool SingleBranchExpand { get; set; }
+    private bool ToggleNodeOnClick { get; set; }
+
+    private string Selected { get; set; } = "(none)";
+
+    private void OnSelectionChanged(IgbTreeSelectionEventArgs args)
+    {
+        var items = args.Detail?.NewSelection;
+        Selected = items is null || items.Length == 0
+            ? "(none)"
+            : string.Join(", ", items.Select(i => i.Label));
+    }
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/IgbTreeComponent.razor.css b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/IgbTreeComponent.razor.css
new file mode 100644
index 0000000..8b75e0d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/templates/item/IgbTreeComponent/IgbTreeComponent.razor.css
@@ -0,0 +1,51 @@
+h3 {
+    margin-bottom: 0.5rem;
+}
+
+.controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.control > label {
+    display: block;
+    margin-bottom: 0.25rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.control-box {
+    padding: 0.5rem;
+    border: 1px solid var(--ig-gray-300, gainsboro);
+    border-radius: 4px;
+}
+
+.switches {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.component-host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+}
+
+.state {
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--ig-primary-500, #1976d2);
+    background: var(--ig-gray-100, #f5f5f5);
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+}
+
+.component-host ::deep .demo-tree {
+    width: 360px;
+}
diff --git a/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/icon.png b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/icon.png
new file mode 100644
index 0000000..158a8d4
Binary files /dev/null and b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/icon.png differ
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/ide.host.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/ide.host.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/ide.host.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/ide.host.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/localize/templatestrings.en.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/localize/templatestrings.en.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/localize/templatestrings.en.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/localize/templatestrings.en.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/localize/templatestrings.ja.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/localize/templatestrings.ja.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/localize/templatestrings.ja.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/localize/templatestrings.ja.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/localize/templatestrings.ko.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/localize/templatestrings.ko.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/localize/templatestrings.ko.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/localize/templatestrings.ko.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/template.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/template.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/.template.config/template.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/.template.config/template.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.Client/IgniteBlazorApp.1.Client.csproj b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.Client/IgniteBlazorApp.1.Client.csproj
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.Client/IgniteBlazorApp.1.Client.csproj
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.Client/IgniteBlazorApp.1.Client.csproj
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.Client/Program.cs b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.Client/Program.cs
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.Client/Program.cs
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.Client/Program.cs
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.Client/_Imports.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.Client/_Imports.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.Client/_Imports.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.Client/_Imports.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.sln b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.sln
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1.sln
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1.sln
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/App.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/App.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/App.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/App.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor.css b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor.css
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor.css
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/MainLayout.razor.css
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/NavMenu.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/NavMenu.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/NavMenu.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/NavMenu.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.css b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.css
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.css
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.css
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.js b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.js
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.js
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Layout/ReconnectModal.razor.js
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Counter.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Counter.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Counter.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Counter.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Error.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Error.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Error.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Error.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Home.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Home.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Home.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Home.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/NotFound.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/NotFound.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/NotFound.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/NotFound.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Weather.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Weather.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Pages/Weather.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Pages/Weather.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Routes.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Routes.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/Routes.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/Routes.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/_Imports.razor b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/_Imports.razor
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Components/_Imports.razor
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Components/_Imports.razor
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/IgniteBlazorApp.1.csproj b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/IgniteBlazorApp.1.csproj
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/IgniteBlazorApp.1.csproj
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/IgniteBlazorApp.1.csproj
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Models/WeatherForecast.cs b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Models/WeatherForecast.cs
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Models/WeatherForecast.cs
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Models/WeatherForecast.cs
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Program.cs b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Program.cs
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Program.cs
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Program.cs
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Properties/launchSettings.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Properties/launchSettings.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Properties/launchSettings.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Properties/launchSettings.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Services/WeatherForecastService.cs b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Services/WeatherForecastService.cs
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/Services/WeatherForecastService.cs
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/Services/WeatherForecastService.cs
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/appsettings.Development.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/appsettings.Development.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/appsettings.Development.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/appsettings.Development.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/appsettings.json b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/appsettings.json
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/appsettings.json
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/appsettings.json
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/wwwroot/app.css b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/wwwroot/app.css
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/wwwroot/app.css
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/wwwroot/app.css
diff --git a/templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/wwwroot/favicon.png b/templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/wwwroot/favicon.png
similarity index 100%
rename from templates/IgniteUI.Blazor.Templates/content/igb-blazor/IgniteBlazorApp.1/wwwroot/favicon.png
rename to templates/IgniteUI.Blazor.Templates/templates/project/igb-blazor/IgniteBlazorApp.1/wwwroot/favicon.png
diff --git a/templates/IgniteUI.Blazor.Templates/test-templates.ps1 b/templates/IgniteUI.Blazor.Templates/test-templates.ps1
new file mode 100644
index 0000000..d58b9ee
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/test-templates.ps1
@@ -0,0 +1,104 @@
+#!/usr/bin/env pwsh
+#
+# test-templates.ps1
+#
+# Smoke-tests the IgniteUI.Blazor.Templates package by:
+#   1. Installing the templates from this source folder.
+#   2. Scaffolding a fresh Blazor *Server* project under ./tmp via `dotnet new igb-blazor`.
+#   3. Generating every item template (igb-*) into the project's Components/Pages folder.
+#   4. Wiring each generated page into Components/Layout/NavMenu.razor as an IgbNavDrawerItem.
+#
+# Usage:  ./test-templates.ps1
+#
+# Parameters (or matching env vars for parity with test-templates.sh):
+#   -ProjectName   name of the generated project          (default: IgbTemplateTest)
+#   -NavIcon       material-icons name used for nav items  (default: widgets)
+#   -SkipRestore   skip NuGet restore on create            (default: $true)
+
+[CmdletBinding()]
+param(
+    [string]$ProjectName = $(if ($env:PROJECT_NAME) { $env:PROJECT_NAME } else { 'IgbTemplateTest' }),
+    [string]$NavIcon     = $(if ($env:NAV_ICON)     { $env:NAV_ICON }     else { 'widgets' }),
+    [bool]  $SkipRestore = $(if ($env:SKIP_RESTORE) { $env:SKIP_RESTORE -eq '1' } else { $true })
+)
+
+$ErrorActionPreference = 'Stop'
+
+$ScriptDir = $PSScriptRoot
+$TmpDir    = Join-Path $ScriptDir 'tmp'
+$ItemsDir  = Join-Path $ScriptDir 'templates/item'
+
+Write-Host "==> Cleaning $TmpDir"
+if (Test-Path $TmpDir) {
+    Remove-Item -Recurse -Force $TmpDir
+}
+New-Item -ItemType Directory -Path $TmpDir | Out-Null
+
+Write-Host "==> Installing templates from $ScriptDir"
+dotnet new install $ScriptDir --force
+if ($LASTEXITCODE -ne 0) { throw "dotnet new install failed" }
+
+Write-Host "==> Creating Blazor Server project '$ProjectName'"
+$createArgs = @('igb-blazor', '-n', $ProjectName, '-o', (Join-Path $TmpDir $ProjectName), '--Hosting', 'Server')
+if ($SkipRestore) {
+    $createArgs += '--SkipRestore'
+}
+dotnet new @createArgs
+if ($LASTEXITCODE -ne 0) { throw "dotnet new igb-blazor failed" }
+
+# Locate the generated app folder via its NavMenu (robust to the project sourceName rename).
+$navMenu = Get-ChildItem -Path (Join-Path $TmpDir $ProjectName) -Recurse -Filter 'NavMenu.razor' |
+    Where-Object { $_.FullName -replace '\\', '/' -like '*/Components/Layout/NavMenu.razor' } |
+    Select-Object -First 1 -ExpandProperty FullName
+if (-not $navMenu) {
+    Write-Error "ERROR: NavMenu.razor not found in generated project."
+    exit 1
+}
+# .../Components/Layout -> app dir
+$appDir   = Split-Path (Split-Path (Split-Path $navMenu -Parent) -Parent) -Parent
+$pagesDir = Join-Path $appDir 'Components/Pages'
+Write-Host "==> App dir:   $appDir"
+Write-Host "==> Pages dir: $pagesDir"
+Write-Host "==> NavMenu:   $navMenu"
+
+# Generate every item template into Components/Pages and collect a nav snippet for each.
+$navSnippet = ''
+Write-Host "==> Generating item templates"
+foreach ($d in Get-ChildItem -Path $ItemsDir -Directory) {
+    $tj = Join-Path $d.FullName '.template.config/template.json'
+    if (-not (Test-Path $tj)) { continue }
+
+    $json   = Get-Content -Raw $tj | ConvertFrom-Json
+    $short  = $json.shortName
+    $source = $json.sourceName
+    Write-Host "    - $source  (dotnet new $short)"
+    dotnet new $short -n $source -o $pagesDir
+    if ($LASTEXITCODE -ne 0) { throw "dotnet new $short failed" }
+
+    $navSnippet += "<IgbNavDrawerItem Active=`"@IsActive(`"$source`")`" @onclick=@(() => Nav.NavigateTo(`"$source`"))>`n"
+    $navSnippet += "    <span slot=`"icon`">`n"
+    $navSnippet += "        <span class=`"material-icons icon`">`n"
+    $navSnippet += "            $NavIcon`n"
+    $navSnippet += "        </span>`n"
+    $navSnippet += "    </span>`n"
+    $navSnippet += "    <div slot=`"content`">$source</div>`n"
+    $navSnippet += "</IgbNavDrawerItem>`n"
+}
+
+# Insert the collected nav items right before the @code block (i.e. after the existing nav items).
+Write-Host "==> Updating NavMenu.razor"
+$lines  = Get-Content $navMenu
+$output = New-Object System.Collections.Generic.List[string]
+$done   = $false
+foreach ($line in $lines) {
+    if (-not $done -and $line -match '^@code') {
+        $output.Add($navSnippet.TrimEnd("`n"))
+        $done = $true
+    }
+    $output.Add($line)
+}
+Set-Content -Path $navMenu -Value $output
+
+Write-Host "==> Done."
+Write-Host "    Project: $(Join-Path $TmpDir $ProjectName)"
+Write-Host "    To run:  dotnet run --project `"$appDir`""
diff --git a/templates/IgniteUI.Blazor.Templates/test-templates.sh b/templates/IgniteUI.Blazor.Templates/test-templates.sh
new file mode 100644
index 0000000..f4bd10d
--- /dev/null
+++ b/templates/IgniteUI.Blazor.Templates/test-templates.sh
@@ -0,0 +1,85 @@
+#!/usr/bin/env bash
+#
+# test-templates.sh
+#
+# Smoke-tests the IgniteUI.Blazor.Templates package by:
+#   1. Installing the templates from this source folder.
+#   2. Scaffolding a fresh Blazor *Server* project under ./tmp via `dotnet new igb-blazor`.
+#   3. Generating every item template (igb-*) into the project's Components/Pages folder.
+#   4. Wiring each generated page into Components/Layout/NavMenu.razor as an IgbNavDrawerItem.
+#
+# Usage:  ./test-templates.sh
+#
+# Env overrides:
+#   PROJECT_NAME   name of the generated project        (default: IgbTemplateTest)
+#   NAV_ICON       material-icons name used for nav items (default: widgets)
+#   SKIP_RESTORE   1 to skip NuGet restore on create     (default: 1)
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+TMP_DIR="$SCRIPT_DIR/tmp"
+ITEMS_DIR="$SCRIPT_DIR/templates/item"
+
+PROJECT_NAME="${PROJECT_NAME:-IgbTemplateTest}"
+NAV_ICON="${NAV_ICON:-widgets}"
+SKIP_RESTORE="${SKIP_RESTORE:-1}"
+
+echo "==> Cleaning $TMP_DIR"
+rm -rf "$TMP_DIR"
+mkdir -p "$TMP_DIR"
+
+echo "==> Installing templates from $SCRIPT_DIR"
+dotnet new install "$SCRIPT_DIR" --force
+
+echo "==> Creating Blazor Server project '$PROJECT_NAME'"
+CREATE_ARGS=(igb-blazor -n "$PROJECT_NAME" -o "$TMP_DIR/$PROJECT_NAME" --Hosting Server)
+if [[ "$SKIP_RESTORE" == "1" ]]; then
+    CREATE_ARGS+=(--SkipRestore)
+fi
+dotnet new "${CREATE_ARGS[@]}"
+
+# Locate the generated app folder via its NavMenu (robust to the project sourceName rename).
+NAVMENU="$(find "$TMP_DIR/$PROJECT_NAME" -path '*/Components/Layout/NavMenu.razor' | head -n1)"
+if [[ -z "$NAVMENU" ]]; then
+    echo "ERROR: NavMenu.razor not found in generated project." >&2
+    exit 1
+fi
+APP_DIR="$(cd "$(dirname "$NAVMENU")/../.." && pwd)"   # .../Components/Layout -> app dir
+PAGES_DIR="$APP_DIR/Components/Pages"
+echo "==> App dir:   $APP_DIR"
+echo "==> Pages dir: $PAGES_DIR"
+echo "==> NavMenu:   $NAVMENU"
+
+# Generate every item template into Components/Pages and collect a nav snippet for each.
+NAV_SNIPPET=""
+echo "==> Generating item templates"
+for d in "$ITEMS_DIR"/*/; do
+    tj="$d/.template.config/template.json"
+    [[ -f "$tj" ]] || continue
+    short=$(grep -oP '"shortName"\s*:\s*"\K[^"]+' "$tj")
+    source=$(grep -oP '"sourceName"\s*:\s*"\K[^"]+' "$tj")
+    echo "    - $source  (dotnet new $short)"
+    dotnet new "$short" -n "$source" -o "$PAGES_DIR"
+
+    NAV_SNIPPET+="<IgbNavDrawerItem Active=\"@IsActive(\"$source\")\" @onclick=@(() => Nav.NavigateTo(\"$source\"))>"$'\n'
+    NAV_SNIPPET+="    <span slot=\"icon\">"$'\n'
+    NAV_SNIPPET+="        <span class=\"material-icons icon\">"$'\n'
+    NAV_SNIPPET+="            $NAV_ICON"$'\n'
+    NAV_SNIPPET+="        </span>"$'\n'
+    NAV_SNIPPET+="    </span>"$'\n'
+    NAV_SNIPPET+="    <div slot=\"content\">$source</div>"$'\n'
+    NAV_SNIPPET+="</IgbNavDrawerItem>"$'\n'
+done
+
+# Insert the collected nav items right before the @code block (i.e. after the existing nav items).
+echo "==> Updating NavMenu.razor"
+awk -v snip="$NAV_SNIPPET" '
+    /^@code/ && !done { printf "%s", snip; done=1 }
+    { print }
+' "$NAVMENU" > "$NAVMENU.new"
+mv "$NAVMENU.new" "$NAVMENU"
+
+echo "==> Done."
+echo "    Project: $TMP_DIR/$PROJECT_NAME"
+echo "    To run:  dotnet run --project \"$APP_DIR\""
diff --git a/templates/README.md b/templates/README.md
index 8ae8ee4..cbb8ddf 100644
--- a/templates/README.md
+++ b/templates/README.md
@@ -5,7 +5,7 @@ This directory contains `IgniteUI.Blazor.Templates`, a `dotnet new` template pac
 ## Prerequisites
 
 - .NET SDK 10 on PATH. The template targets `net10.0` only.
-- Access to nuget.org and the Infragistics licensed feed (`IgniteUI.Blazor.GridLite` is published there).
+- Access to nuget.org (all packages, including `IgniteUI.Blazor.GridLite`, are published there).
 
 ## 1. Pack the template
 
@@ -14,7 +14,7 @@ cd templates/IgniteUI.Blazor.Templates
 dotnet pack -c Release -o ./bin/packed
 ```
 
-Produces `./bin/packed/IgniteUI.Blazor.Templates.<version>.nupkg` (current version `0.5.1`).
+Produces `./bin/packed/IgniteUI.Blazor.Templates.<version>.nupkg` (current version `0.0.1`).
 
 ## 2. Install (or reinstall) into the local template engine
 
@@ -22,13 +22,13 @@ Two options. **Install from the packed nupkg** for a release-shape test:
 
 ```bash
 dotnet new uninstall IgniteUI.Blazor.Templates    # ignore errors if not installed
-dotnet new install ./bin/packed/IgniteUI.Blazor.Templates.0.5.1.nupkg
+dotnet new install ./bin/packed/IgniteUI.Blazor.Templates.0.0.1.nupkg
 ```
 
 **Install from the source folder** for fast iteration (skip `dotnet pack`):
 
 ```bash
-dotnet new install ./content/igb-blazor
+dotnet new install ./templates/project/igb-blazor
 ```
 
 If both a folder install and a NuGet install of the same identity (`IgniteUI.Blazor.Templates.BlazorWebApp`) coexist, `dotnet new install` warns and the most recently installed wins. Uninstall the other to silence the warning.
@@ -110,14 +110,13 @@ curl -s -o /dev/null -w "%{http_code}\n" http://localhost:5148/_content/IgniteUI
 ```bash
 dotnet new uninstall IgniteUI.Blazor.Templates    # if installed from a nupkg
 # or
-dotnet new uninstall ./content/igb-blazor          # if installed from folder
+dotnet new uninstall ./templates/project/igb-blazor   # if installed from folder
 rm -rf ./_smoketest
 ```
 
 ## Troubleshooting
 
 - **`dotnet new` doesn't list `igb-blazor`** — install step failed. Run `dotnet new uninstall` (no args) to confirm `IgniteUI.Blazor.Templates` (or the folder path) shows up; reinstall if not.
-- **`NU1101: Unable to find package IgniteUI.Blazor.GridLite`** — your NuGet config doesn't have the Infragistics licensed feed. Add it before restoring the generated project.
 - **Port already taken** — the generated `Properties/launchSettings.json` pins it. Either stop the other process or override with `dotnet run --urls http://localhost:5901`.
-- **Rapidly iterating on the template content from a nupkg** — bump `<Version>` in `IgniteUI.Blazor.Templates.csproj` so `dotnet new install` doesn't quietly reuse a cached copy of the previous nupkg. (If installing from `./content/igb-blazor` directly, version doesn't matter — uninstall + reinstall the same path each iteration.)
+- **Rapidly iterating on the template content from a nupkg** — bump `<Version>` in `IgniteUI.Blazor.Templates.csproj` so `dotnet new install` doesn't quietly reuse a cached copy of the previous nupkg. (If installing from `./templates/project/igb-blazor` directly, version doesn't matter — uninstall + reinstall the same path each iteration.)
 - **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.