BlueBlazor 4.2.0

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package BlueBlazor --version 4.2.0
                    


                    

                
NuGet\Install-Package BlueBlazor -Version 4.2.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="BlueBlazor" Version="4.2.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="BlueBlazor" Version="4.2.0" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="BlueBlazor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add BlueBlazor --version 4.2.0
                    


                    

                
#r "nuget: BlueBlazor, 4.2.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#addin nuget:?package=BlueBlazor&version=4.2.0
                    


                            Install BlueBlazor as a Cake Addin
                        

                    

                
#tool nuget:?package=BlueBlazor&version=4.2.0
                    


                            Install BlueBlazor as a Cake Tool

Blue Blazor

Blue Blazor is an adaptation of Blue Web for Blazor.

Getting started

Create project

Use one of the official Blazor project templates like Blazor Web App or Blazor Server App (Empty) to create a new project using Visual Studio or CLI. Make sure, no sample content will be added.

Installation

dotnet add package BlueBlazor

Nuget

Import

To make use of Blue Blazor, add the following to your _Imports.razor file:

@using BlueBlazor.Components

Register services

Register the service for localization in your Program.cs file:

builder.Services.AddLocalization();

If you want to use dialogs (Modals, Offcanvas) you need to register the DialogService:

builder.Services.AddScoped<BlueBlazor.Services.DialogService>();

Stylesheet

You can use the stylesheet of Blue Web by adding the following line to the head of your HTML:

<link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />

In .NET 9 you can do it like this:

<link rel="stylesheet" href="@Assets["_content/BlueBlazor/blue-web/style.min.css"]">

Font family

As mentioned in Blue Web docs, Inter (licensed under SIL) with some default font settings is preconfigured. Blue Blazor ships the required files. You can embed them like this:

<link rel="stylesheet" href="_content/BlueBlazor/inter/web/inter.css">

In .NET 9 you can do it like this:

<link rel="stylesheet" href="@Assets["_content/BlueBlazor/inter/web/inter.css"]">

Add layout

Put this to your MainLayout.razor file:

<Layout>
    <SideContent>
        <SidebarMenu>
            <MenuItem Label="Home" Href="">
                <Icon>🏠</Icon>
            </MenuItem>
        </SidebarMenu>
    </SideContent>
    <PageContent>@Body</PageContent>
</Layout>

Add page

Your project probably already has at least one page component. Change its content to this:

@page "/"

<Page>
    <Body>
        <h1>Hello, world!</h1>
    </Body>
</Page>

JavaScript (optional)

Single components require JavaScript. Take a look at the individual component page. You can embed them like this:

<script src="_content/BlueBlazor/js/qrCodeGen.bundle.js"></script>
<script src="_content/BlueBlazor/js/totpInput.bundle.js"></script>

When you know, you will use all components, you can also embed them all together:

<script src="_content/BlueBlazor/js/all.bundle.js"></script>

Next steps

You now have a very basic app with Blue Blazor. To learn more, check out the examples and the component docs.

Theming

You can use Themify to create custom themes. Enable "Export only CSS variables" for your theme and put the exported CSS to your project. It needs to be embedded after the Blue Blazor stylesheet:

<link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />
<link rel="stylesheet" href="css/your-theme.css" />

To support dark mode, you should create a separated theme. You can then use media queries to switch between the themes:

<link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />
<link
  rel="stylesheet"
  href="css/your-light-theme.css"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="stylesheet"
  href="css/your-dark-theme.css"
  media="(prefers-color-scheme: dark)"
/>

Use JavaScript from Blue Web

Blue Blazor comes with the whole output folder of Blue Web in it's wwwroot folder. That means, you can use all of Blue Web's JavaScript functions.

Example 1: Progress

@inject IJSRuntime JSRuntime

<script src="_content/BlueBlazor/blue-web/js/progress.bundle.js"></script>

<Button Label="Load data" OnClick="loadData" />

@code {
    async Task loadData()
    {
        await JSRuntime.InvokeVoidAsync("window.blueWeb.progress.start");

        // do something to load data

        JSRuntime.InvokeVoidAsync("window.blueWeb.progress.stop");
    }
}

Example 2: Dialog

@inject IJSRuntime JSRuntime

<script src="_content/BlueBlazor/blue-web/js/dialog.bundle.js"></script>

<Button Label="Delete" OnClick="delete" />

@code {
    async Task delete()
    {
        bool confirmed = await JSRuntime.InvokeAsync<bool>("blueWeb.dialog.verify", "Are you sure?");

        if (confirmed)
        {
            // do something to delete
        }
    }
}

Breaking changes

From v3 to v4

Dialogs (Modal and Offcanvas) now use the new DialogService to open dialogs. Also these components were removed:

  • Modal
  • Offcanvas

Instead, you can use the DialogService to open dialogs. With <DialogProvider /> you define the place where the dialogs will be rendered.

To open a dialog, you can use the new DialogOpener component together with ModalDialog or OffcanvasDialog:

- <Modal TitleText="Modal Title">
-     <ToggleContent><Button Label="Show Modal" /></ToggleContent>
-     <BodyContent>
-         <p>Modal body content</p>
-     </BodyContent>
- </Modal>
+ <DialogOpener>
+     <ToggleContent><Button Label="Show Modal" /></ToggleContent>
+     <DialogContent>
+         <ModalDialog TitleText="Modal Title">
+             <BodyContent>
+                 <p>Modal body content</p>
+             </BodyContent>
+         </ModalDialog>
+     </DialogContent>
+ </DialogOpener>

For more information, check out the Getting Started section above and the doc pages for DialogProvider and DialogOpener.

From v2 to v3

Component Text has been renamed to TextInput to avoid conflicts with <text></text> and for a more fitting name. Also the default styling for the label has changed. You can the look back by using the SmallLabel attribute.

From v1 to v2

The way to embed Blue Web CSS has changed. You now need to change the following line to the head of your HTML:

- <link rel="stylesheet" href="_content/BlueBlazor/css/blue-web.min.css" />
+ <link rel="stylesheet" href="_content/BlueBlazor/blue-web/style.min.css" />
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
4.2.1 0 6/2/2025
4.2.0 131 5/28/2025
4.1.0 136 5/19/2025
4.0.2 238 5/13/2025
4.0.1 104 5/9/2025
4.0.0 147 4/29/2025
3.5.1 195 4/14/2025
3.5.0 176 3/10/2025
3.4.2 115 2/26/2025
3.4.1 95 2/25/2025
3.4.0 106 2/24/2025
3.3.0 117 2/10/2025
3.2.0 112 1/20/2025
3.1.0 105 12/20/2024
3.0.2 117 11/26/2024
3.0.1 103 11/25/2024
3.0.0 98 11/25/2024
2.1.1 122 10/25/2024
2.1.0 105 10/23/2024
2.0.0 122 10/10/2024
1.1.4 104 9/25/2024
1.1.3 105 9/20/2024
1.1.2 128 9/18/2024
1.1.1 145 9/5/2024
1.1.0 120 9/4/2024
1.0.5 162 8/8/2024
1.0.4 92 8/5/2024
1.0.3 112 8/1/2024
1.0.2 114 7/30/2024