Installation

Add the NuGet package, register the AdminLTE services in Program.cs, then reference the bundled styles and scripts from your Blazor App.razor.

1. Add the package

dotnet add package ColorlibHQ.AdminLTE.AspNetCore

The compiled AdminLTE 4, Bootstrap 5.3.8 and Bootstrap Icons assets ship inside the package as static web assets, served from /_content/ColorlibHQ.AdminLTE.AspNetCore/. No npm install or build step is needed.

2. Register services in Program.cs

AddAdminLte registers the menu service, theming service and binds AdminLteOptions from the "AdminLte" configuration section. Add AddInteractiveServerComponents for an interactive Blazor Web App, and AddHttpContextAccessor so the MVC sidebar Tag Helper can resolve active state.

using ColorlibHQ.AdminLTE.AspNetCore;

var builder = WebApplication.CreateBuilder(args);

// Razor Components with interactive server render mode.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Register AdminLTE services + bind the sidebar menu from appsettings.json ("AdminLte").
builder.Services.AddAdminLte(builder.Configuration);
builder.Services.AddHttpContextAccessor();

var app = builder.Build();

app.UseHttpsRedirection();
app.UseAntiforgery();

// Serves the RCL static web assets under /_content/ColorlibHQ.AdminLTE.AspNetCore.
app.MapStaticAssets();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

Prefer to configure the menu in code instead of appsettings.json? Use the action overload: builder.Services.AddAdminLte(options => { options.BrandText = "My App"; /* ... */ });

3. Reference styles and scripts in App.razor

Tag Helpers do not run inside .razor files, so Blazor apps use the <AdminLteStyles /> and <AdminLteScripts /> components instead. Put <AdminLteStyles /> in the <head> (it also emits the no-flash color-mode script), and <AdminLteScripts /> at the end of <body>, after blazor.web.js.

@using ColorlibHQ.AdminLTE.AspNetCore.Components
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <base href="/" />
    <title>My App</title>

    @* Bootstrap + AdminLTE CSS + no-flash color-mode script, from the RCL. *@
    <AdminLteStyles />

    <HeadOutlet @rendermode="InteractiveServer" />
</head>
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
    <Routes @rendermode="InteractiveServer" />

    <script src="_framework/blazor.web.js"></script>
    @* Bootstrap bundle + AdminLTE JS, from the RCL. *@
    <AdminLteScripts />
</body>
</html>

Both components default to the minified assets and accept a Minified="false" parameter if you want the unminified files during development.

4. Wrap pages in the dashboard shell

Make DashboardLayout your MainLayout so every page gets the topbar, sidebar, footer and command palette:

@inherits LayoutComponentBase

<DashboardLayout>
    @Body
</DashboardLayout>

MVC / Razor Pages

For MVC or Razor Pages, register the Tag Helpers in Views/_ViewImports.cshtml and use the kebab-case tags instead:

@addTagHelper *, ColorlibHQ.AdminLTE.AspNetCore

Then use <adminlte-styles />, <adminlte-scripts /> and <adminlte-sidebar /> in your layout. A full MVC layout + view sample lives in docs/mvc-usage/ in the repository.

Next: define your sidebar in the Configuration page, or jump to Layout to assemble the shell.

AdminLTE 4 · ASP.NET port Edit on GitHub