Getting started
1. Install
bit BlazorUI components are available as the Bit.BlazorUI NuGet package, which can be integrated into your project using one of the methods 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 Visual Studio's NuGet Package Manager interface to add the package to your project.
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
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
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
Install-Package Bit.BlazorUI.Icons
2. Namespace
Open the
_Imports.razor
file of your Blazor application and add this line:
@using Bit.BlazorUI
3. Styles and Scripts
Open
App.razor
or
index.html
file and add the CSS file reference:
<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
then add the JS file file reference:
<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></script>
Extra components: If you are using the
Extras
package you also need to add these resources:
<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
Assets
package you also need to add this resource:
<link href="_content/Bit.BlazorUI.Assets/styles/bit.blazorui.assets.css" rel="stylesheet" />
Icon pack: If you are using the
Icons
package you also need to add this resource:
<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.
Also, bit BlazorUI has a built-in feature in order to resolve the cache issues easily. using this feature you can simply add a version query string to the url of the above resources like this:
<script src="_content/Bit.BlazorUI/scripts/[email protected]"></script>
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 resource fingerprinting in the
App.razor
file:
Script: A drop-in replacement for the standard HTML
<script>
tag.
It automatically fingerprints the resource URL (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>
The result would be something like this:
<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 (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" />
The result would be something like this:
<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css?v=sha256-VI6BIGZLTtmyhn3V-4RH-Yyi0Ud3p0g5dHvByeaoZ9Y" rel="stylesheet">
Note: You can checkout the usages of these two components in our demo website project here .