Blazorise is a source-available Blazor UI component library for building .NET web applications in C#. Its consistent component API lets you choose the CSS framework that fits your application, from Bootstrap and Tailwind CSS to Bulma, Material, Ant Design, and Fluent 2.
Documentation · Quick start · Demos · Contributing
- Forms, validation, navigation, dialogs, and other everyday UI components.
- DataGrid, charts, and extensions for applications that work with data.
- A consistent C# API across CSS framework providers.
- Theming and support for right-to-left layouts.
- Blazor WebAssembly, Blazor Server, and interactive Blazor Web Apps.
Browse the component documentation, follow a provider integration guide, or start a new application with the Blazorise templates.
Choose a provider package, then follow its integration guide. Each provider has a live WebAssembly demo.
| CSS framework | NuGet package | Setup | Demo |
|---|---|---|---|
| Bootstrap 5 | Blazorise.Bootstrap5 |
Guide | Demo |
| Bootstrap 4 | Blazorise.Bootstrap |
Guide | Demo |
| Tailwind CSS | Blazorise.Tailwind |
Guide | Demo |
| Bulma | Blazorise.Bulma |
Guide | Demo |
| Material | Blazorise.Material |
Guide | Demo |
| Ant Design | Blazorise.AntDesign |
Guide | Demo |
| Fluent 2 | Blazorise.FluentUI2 |
Guide | Demo |
A Bootstrap 4 Blazor Server demo is also available.
This example adds Bootstrap 5 and FontAwesome 6 icons to an existing Blazor project.
Use a Blazor project targeting .NET 8, .NET 9, .NET 10, or .NET 11, with an SDK and IDE that support your chosen target framework. Keep the Blazorise provider and icon packages on the same version. The library targets in this checkout are maintained in Build/Blazorise.props.
For a new project, see the Blazorise templates. Building this repository has separate SDK requirements; see Local development.
Run these commands in your application's project directory:
dotnet add package Blazorise.Bootstrap5
dotnet add package Blazorise.Icons.FontAwesomeAdd these links inside the host page's <head> section:
| Project type | Host file |
|---|---|
| Blazor WebAssembly | wwwroot/index.html |
| Blazor Server | _Host.cshtml or _Layout.cshtml, depending on the template |
| Blazor Web App (.NET 8+) | Components/App.razor in the server project |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css?v=2.4.1.0" rel="stylesheet">
<link href="_content/Blazorise/blazorise.css?v=2.4.1.0" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css?v=2.4.1.0" rel="stylesheet" />Replace older Bootstrap or FontAwesome stylesheet references supplied by your project template with these links.
The ?v=2.4.1.0 query values correspond to Blazorise package version 2.4.1. Use the four-part numeric version of your installed packages and update it when upgrading to refresh cached assets. Append .0 to a three-part version or retain an existing fourth part. In Razor host files, you can inject @inject Blazorise.IVersionProvider VersionProvider and use ?v=@VersionProvider.Version instead. Keep @page first in _Host.cshtml.
Blazorise loads its component JavaScript modules automatically. Keep your host's static asset setup enabled so package resources can be served. See the integration guide for troubleshooting and the PWA guide for offline support.
Add this namespace to your application's _Imports.razor:
@using BlazoriseIn Program.cs, add the namespaces and register Blazorise before builder.Build():
using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;
builder.Services
.AddBlazorise()
.AddBootstrap5Providers()
.AddFontAwesomeIcons();Register these services in the project where the components run. For Blazor Web Apps using Interactive WebAssembly or Auto with prerendering, register them in both the server and .Client projects.
Follow the guidance for your project type:
| Project type | Next step |
|---|---|
| Standalone Blazor WebAssembly | Continue to step 6. The app already runs interactively in the browser. |
| Blazor Server | Continue to step 6. The app already uses interactive server rendering. |
| Blazor Web App (.NET 8+) | Ensure the pages using Blazorise have an interactive render mode. If this is already configured, continue to step 6. |
For a Blazor Web App, the example below configures Interactive Server for the whole app. If you chose Interactive WebAssembly or Auto, follow Microsoft's render mode guidance for that mode and use the service registrations from step 4.
In the server project's Program.cs, update the existing Razor component service registration before builder.Build():
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();In the same file, update the existing endpoint mapping after builder.Build():
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();In the server project's Components/App.razor, set the render mode on HeadOutlet and Routes:
<HeadOutlet @rendermode="RenderMode.InteractiveServer" />
<Routes @rendermode="RenderMode.InteractiveServer" />RenderMode is in the Microsoft.AspNetCore.Components.Web namespace, which the standard Blazor Web App template imports.
Add a page such as Profile.razor to your application's pages folder. This example binds a labeled input to C# state and displays the saved name:
@page "/profile"
<Heading Size="HeadingSize.Is3">Profile</Heading>
<Field>
<FieldLabel>Display name</FieldLabel>
<TextInput @bind-Value="displayName" Placeholder="Ada Lovelace" />
<FieldHelp>Choose the name shown on your profile.</FieldHelp>
</Field>
<Button Color="Color.Primary" Clicked="OnSaveHandler" Disabled="@string.IsNullOrWhiteSpace( displayName )">
Save
</Button>
<Alert Color="Color.Success" Visible="@(!string.IsNullOrWhiteSpace( savedName ))" Margin="Margin.Is3.FromTop">
Saved name: @savedName
</Alert>
@code
{
private string displayName = string.Empty;
private string savedName = string.Empty;
private void OnSaveHandler()
{
savedName = displayName;
}
}FieldLabel and FieldHelp are associated with the input through Blazorise's default accessibility integrations.
Blazorise is dual-licensed. Use is governed by LICENSE.md or a commercial license, depending on your scenario.
Commercial plans provide support and additional benefits according to the selected tier. Themes and Blocks are available with Enterprise and Enterprise Plus. See pricing and plan details for the current features and support terms.
To build this checkout, install the .NET SDK used by CI, currently 11.0.100-rc.3.26522.148.
Use the DebugNet11 configuration to build libraries, providers, and extensions only for net11.0, with debugging symbols and hot reload support for demos. Generators, analyzers, and weavers retain their existing target frameworks. Standard Debug and Release configurations target .NET 8 through .NET 11.
From the repository root:
dotnet build Blazorise.slnx -c DebugNet11
dotnet run --project Demos/Blazorise.Demo.Bootstrap5/Blazorise.Demo.Bootstrap5.csproj -c DebugNet11The development framework is defined by PrimaryTargetFramework in Directory.Build.props. See CONTRIBUTING.md for documentation and test workflows.
Development builds are published to the MyGet feed for trying upcoming changes and providing feedback. Use stable NuGet packages for production applications.
Contributions, bug reports, and feature requests are welcome. Read CONTRIBUTING.md for development setup, branch selection, and the pull request workflow. The contributing wiki covers coding conventions.
Contributors must agree to the Contributor License Agreement, which is presented when a pull request is submitted.
Blazorise is a source-available project, and its ongoing development is made possible through the support of its partners, subscribers, and community contributors.
|
|
Copyright (c) Megabit d.o.o.
Dual-licensed. See LICENSE.md.