1. Install the NuGet package

BlazOrbit targets net10.0 and runs on both Blazor Server and Blazor WebAssembly. Add the package to your project:

dotnet add package BlazOrbit

💡

Optional packages. Install BlazOrbit.Localization.Server or BlazOrbit.Localization.Wasm if you need multi-culture support.

2. Register the services

Call AddBlazOrbit() in your Program.cs. This wires up the JS interop services, the variant registry, and the modal/toast services.

using BlazOrbit;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

builder.Services.AddBlazOrbit();

var app = builder.Build();
app.MapRazorComponents<App>()
   .AddInteractiveServerRenderMode();
app.Run();

For WebAssembly localization

Before calling host.RunAsync(), await host.UseBlazOrbitLocalizationWasm() to hydrate culture info.

using System.Globalization;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddBlazOrbit();
builder.Services.AddBlazOrbitLocalizationWasm(options =>
{
    options.SupportedCultures = [new CultureInfo("en-US"), new CultureInfo("es-ES")];
    options.DefaultCulture = "en-US";
});

var host = builder.Build();
await host.UseBlazOrbitLocalizationWasm();
await host.RunAsync();

3. Link the stylesheet

The library ships a pre-built, vendor-prefixed CSS bundle. Add it to your index.html (WASM) or App.razor <head> (Server).

<link href="_content/BlazOrbit/css/blazorbit.css" rel="stylesheet" />

ℹ️

Since .NET 8, scoped CSS bundles are included automatically — you do not need to link the .bundle.scp.css file.

4. Import the namespaces

Add these to _Imports.razor so you can use components without fully-qualified names:

@using BlazOrbit.Components
@using BlazOrbit.Components.Forms
@using BlazOrbit.Components.Layout
@using BlazOrbit.Components

5. Host Modal + Toast

For BOBModalHost and BOBToastHost to render your modals and toasts globally, place them in your MainLayout.razor (outside the @Body block):

@inherits LayoutComponentBase

<div class="app-layout">
    @Body
</div>

<BOBModalHost />
<BOBToastHost MaxVisiblePerPosition="5" />

That's it — you're ready to use Button, Card, InputText, and the rest.

Your first component

Drop a BOBButton into any page:

<BOBButton Text="Hello, BlazOrbit"
           LeadingIcon="@BOBIconKeys.MaterialIconsOutlined.i_waving_hand"
           Size="BOBSize.Large" />