Home Docs

Getting Started

Follow these steps to install the library, import the namespace, add the shared styles/scripts, and make sure updates reach your users without cache hiccups.


1. Install


bit BlazorUI ships as the Bit.BlazorUI NuGet package. Install it with any of the options below:


1. Command line: run the following command to install the package: 

dotnet add package Bit.BlazorUI

2. Package Manager Console: execute the command below to install the package: 

Install-Package Bit.BlazorUI

3. Visual Studio: use the NuGet Package Manager interface to add the package.



Extra components: if you want to use the Extra components (like BitChart) you need to add the Bit.BlazorUI.Extras package: 

dotnet add package Bit.BlazorUI.Extras
Or 
Install-Package Bit.BlazorUI.Extras


Optional assets: if you need the asset files of the bit BlazorUI (like Segoe UI font for non-Windows clients) you need to add the Bit.BlazorUI.Assets package: 

dotnet add package Bit.BlazorUI.Assets
Or 
Install-Package Bit.BlazorUI.Assets


Icon pack: if you want to use the Fabric Icons of the bit BlazorUI (using BitIconName class) you need to add the Bit.BlazorUI.Icons package: 

dotnet add package Bit.BlazorUI.Icons
Or 
Install-Package Bit.BlazorUI.Icons

2. Namespace


Add the following line to the

_Imports.razor
file of your Blazor application: 

@using Bit.BlazorUI

3. Styles and Scripts


Open

App.razor
or
index.html
file and add the CSS file link tag: 

<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />

Then add the JS file script tag:

<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></script>

Extra components: if you are using the

Bit.BlazorUI.Extras
package you also need to add these css and js files: 

<link href="_content/Bit.BlazorUI.Extras/styles/bit.blazorui.extras.css" rel="stylesheet" />
<script src="_content/Bit.BlazorUI.Extras/scripts/bit.blazorui.extras.js"></script>


Optional assets: if you are using the

Bit.BlazorUI.Assets
package you also need to add this css file: 

<link href="_content/Bit.BlazorUI.Assets/styles/bit.blazorui.assets.css" rel="stylesheet" />


Icon pack: if you are using the

Bit.BlazorUI.Icons
package you also need to add this css file: 

<link href="_content/Bit.BlazorUI.Icons/styles/bit.blazorui.icons.css" rel="stylesheet" />

4. Cache busting


You need to make sure you've implemented a proper cache busting strategy for all resources mentioned above. Otherwise users will encounter issues related to cached versions of resources after you update the bit BlazorUI in your project.

On .NET 9 or later you can simply use the new

@Assets[""]
feature to fingerprint the resource files automatically.

The
bit BlazorUI
also has a built-in feature (
Bit.BlazorUI.Info.Version
) to help resolve cache issues. Using this feature, you can add a version query string to the URL of the above resources like this: 
<script src="_content/Bit.BlazorUI/scripts/[email protected]"></script>
Note: You can only use this feature in the
App.razor
file, for other root files (like
index.html
in a WASM standalone project) you have to apply another solution, for example manually adding the version query string to the resource URLs.


Automatic resource fingerprinting
The Bit.BlazorUI.Assets package provides two standalone components designed for automatic fingerprinting in the

App.razor
file:



Script: a drop-in replacement for the standard HTML

<script>
tag. It automatically fingerprints the resource URL (the
src
attribute) by calculating a hash from the actual file content, ensuring reliable cache busting and versioning. 

<Script Src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></Script>

Example output: 

<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js?v=sha256-Z5yBv0K89OBRVurhAVzatpp3aGXsNn00e3GzQiTq_Z4"></script>


Link: a direct replacement for the standard HTML

<link>
tag. It automatically fingerprints the resource URL (the
href
attribute) by generating a hash from the actual file content, providing consistent cache busting and version management. 

<Link Href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />

Example output: 

<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css?v=sha256-VI6BIGZLTtmyhn3V-4RH-Yyi0Ud3p0g5dHvByeaoZ9Y" rel="stylesheet" />


Note: You can check out the usages of these two components in our demo website project here .


Feedback


You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.


Or you can review / edit this page on GitHub.