PrimerBlazor

A set of Blazor components styled with GitHub’s Primer CSS system.

🚀 Getting Started

PrimerBlazor is available for free on NuGet, and the demo-related source code is open-source on GitHub.

📘 Learn how to use it: Check out detailed guides and examples at PrimerBlazor

✅ Install via NuGet (.NET 8+)

Install the package using the NuGet CLI:

dotnet add package PrimerBlazor

🎨 Import Global Styles

Add the following to your wwwroot/index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server):

<link href="_content/PrimerBlazor/css/style.css" rel="stylesheet" />

🔌 Register JS Interop

The JavaScript file primerBlazorJsInterop.js is automatically included by the PrimerBlazor package.

🌐 Blazor Web App (.NET 9+) Notes

When using PrimerBlazor in a .NET 9+ Blazor Web App, JavaScript modules are automatically registered using the built-in <script type="importmap"> mechanism.

You do not need to manually add the script reference for primerBlazorJsInterop.js:

<script type="importmap">{
  "imports": {
    "./_content/PrimerBlazor/js/primerBlazorJsInterop.js": "./_content/PrimerBlazor/js/primerBlazorJsInterop.wxyz1234.js"
  }
}</script>

However, CSS files are not included in the import map and must still be linked manually:

<link href="_content/PrimerBlazor/css/style.css" rel="stylesheet" />

Also, register the interop service in Program.cs to enable clipboard and dynamic UI behaviors:

builder.Services.AddScoped<PrimerBlazorJsInterop>();

📄 Add Imports

Include this line in your _Imports.razor file:

@using PrimerBlazor

🧩 Start Using Components

You can now use components like <PrimerBrandButton />, <PrimerBrandStack />, and more.