Blazor Web App

Create the app

You need the .NET 10 SDK. Start from the empty template, which has no Bootstrap or sample styles to override IzzyBlazor's:

dotnet new blazor --empty -o MyApp

Its pages are static by default, and any page can be made interactive on the server. Add --interactivity None for an app that never opens a circuit. For WebAssembly or Auto, see WebAssembly or Auto.

Install the package

dotnet add package IzzyBlazor --prerelease

Add the stylesheet and the theme

Link the stylesheet before your own, and put IzzyTheme in the head:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <ResourcePreloader />
    <link rel="stylesheet" href="@Assets["_content/IzzyBlazor.Core/izzyblazor.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["MyApp.styles.css"]" />
    <IzzyTheme />
    <ImportMap />
    <HeadOutlet />
</head>

IzzyTheme sets the preset, brand color and fonts, as in <IzzyTheme Preset="ThemePreset.Compact" Brand="#0a7d5a" />. It renders on the server, so the theme is there on first paint with no script. There's no script tag to add either: Blazor loads IzzyBlazor's script by itself.

Import the components

Add one line to your imports:

@using IzzyBlazor

Prefer this to a global using: it brings the components into .razor files only, so names such as Table and Column don't meet EF Core's attributes in your entity classes.

Register the services

Add the services, and map IzzyBlazor's endpoints after your components:

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddIzzyBlazor();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

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

app.Run();

AddIzzyBlazor adds the toast and dialog services, carries toasts over a redirect, and lets components read their cookies on the server, such as the color scheme someone picked. MapIzzyBlazor adds the endpoint ColorSchemeSwitch uses with JavaScript off. Other components need neither.

Add toasts and dialogs

If you show toasts, put ToastRegion in your layout, once. It works on static pages too:

@inherits LayoutComponentBase

@Body

<ToastRegion />

To open dialogs from C# with DialogService, put one <DialogHost /> on the interactive page that opens them, or in the layout with a render mode on the host: <DialogHost @rendermode="InteractiveServer" />. Dialogs written in the page need neither; see Dialog.

Build a first page

A form is a good first page, because it shows what static rendering does on its own:

@page "/signup"
@using System.ComponentModel.DataAnnotations

<Container Size="ContainerSize.Sm" PaddingY="8">
    <Form Model="Model" FormName="signup" OnValidSubmit="Save">
        <TextField @bind-Value="Model!.Email" AutoComplete="email" />
        <Button Submit>Sign up</Button>
    </Form>
    @if (_signedUp)
    {
        <Alert Status="Status.Success">Thanks! We'll write to @Model!.Email.</Alert>
    }
</Container>

@code {
    [SupplyParameterFromForm(FormName = "signup")]
    private SignupModel? Model { get; set; }

    private bool _signedUp;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _signedUp = true;

    public sealed class SignupModel
    {
        [Required, EmailAddress]
        public string? Email { get; set; }
    }
}

Run the app and open /signup. The form posts, validates and shows its message with no circuit, and with JavaScript turned off too. Add @rendermode InteractiveServer under @page and the same markup runs over a circuit instead. See Form for the rest.

From the full template

Started without --empty? Two things in the sample app get in the way:

• Its styles win over IzzyBlazor's. IzzyBlazor's CSS sits in cascade layers so your own CSS always wins, and that includes Bootstrap and the template's app.css: button links turn blue on blue and headings change size. Remove the Bootstrap link and the template's rules in app.css, or put Bootstrap in a layer.
• Its NavMenu clashes with IzzyBlazor's. The build fails with RZ9985: Multiple components use the tag 'NavMenu'. Rename the template's component, or write its full name in MainLayout.razor: <MyApp.Components.Layout.NavMenu />.

Next steps

• AppShell: a header, sidebar and main area for your layout.
• Components: every component, with what it does in each mode.
• Style props: spacing, sizes and colors on any component.