TablerForNet Blazor: Installation Guide and Admin Template

Github TranslateForNet

NuGet TablerForNet · latest

Software Stack Blazor Server · VS 2026 · .NET 10 · TablerForNet

Last Update 29/01/2026

Comprehensive step-by-step instructions for integrating TablerForNet into Blazor Server apps. Swap Bootstrap for a modern, responsive admin UI framework based on Tabler.

⤢

Step-by-step guide to installing TablerForNet

This guide demonstrates installation on a new Blazor Server .NET 7 project. Please follow these steps carefully:

• Step 1: Install the 'TablerForNet' NuGet package.
• Step 2: Add required 'usings' and register the TablerForNet service in Program.cs.
• Step 3: Include necessary 'usings' in the _imports.razor file.
• Step 4: Adjust the PageTitle tag.
• Step 5: Add 'tablerForNet' CSS and JS files to _Host.cshtml.
• Step 6: Remove Bootstrap and associated assets.
• Step 7: Update NavMenu.razor as needed.
• Step 8: Fine-tune MainLayout.razor.
• Step 9: Modify Index, Counter, and FetchData pages.

Step 1: NuGet package installation

Follow the instructions provided on nuget.org.

Step 2: Register the TablerForNet service

using TablerForNet;
 builder.Services.AddTablerForNet();

Step 3: Add 'usings'

@using TablerForNet;
 @using TablerForNet.Components
 @using GhostlyInc.Components.Icons
 @using TablerForNet.Flags

Step 4: PageTitle tag conflict

A naming conflict exists between TablerForNet's PageTitle and Microsoft's PageTitle tag. It is recommended to remove TablerForNet's or explicitly rename it to 'TablerForNet.Components.PageTitle'. Update the following files accordingly:

• App.razor
• Index.razor
• Counter.razor
• Fetchdata.razor
• MainLayout.razor

Step 5: Add CSS and JS files

<link href="_content/TablerForNet/css/tablerForNet.min.css" rel="stylesheet" />
<script src="_content/TablerForNet/js/tablerForNet.min.js"></script>

Step 6: Remove Bootstrap

Delete the Bootstrap folder from the CSS directory. Also remove the 'open-iconic' folder as tabler icons will be used. Remove the related link in _Host.cshtml as shown:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Step 7: Revise NavMenu

<Navbar Background="NavbarBackground.Dark" Direction="NavbarDirection.Horizontal">

	<NavbarMenu>
		<NavbarMenuItem Href="@($"/")" Text="Home">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Home" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/counter")" Text="Counter">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Brand_days_counter" />
			</MenuItemIcon>
		</NavbarMenuItem>
		<NavbarMenuItem Href="@($"/fetchdata")" Text="Fetch data">
			<MenuItemIcon>
				<Icon class="icon" IconType="@TablerIcons.Database" />
			</MenuItemIcon>
		</NavbarMenuItem>

Step 8: Refine MainLayout

@inherits LayoutComponentBase

<NavMenu />

<div class="page">
	<div class="container-fluid mt-2">
		@Body
		<br />
	</div>
</div>

Step 9: Update other pages

As shown below, a 'div' tag has been added to the index page. It is advisable to apply this to all other pages.

@page "/"

<div class="container-md">
	<h1>Hello, world!</h1>

	Welcome to your new app.

	<SurveyPrompt Title="How is Blazor working for you?" />
</div>

Congratulations on successfully integrating TablerForNet into your Blazor project. With these steps complete, you are ready to fully utilise this powerful framework. Enjoy the enhanced features and build exceptional web applications. If you face any difficulties, remember each challenge is a chance to learn. Happy coding!