Add to an existing app

Set it up

IzzyBlazor needs a Blazor Web App (the project shape with an App.razor) on .NET 10. Follow the Blazor Web App steps, and the WebAssembly or Auto ones too if you have a .Client project. The rest of this page is about what's already there.

Keep Bootstrap

IzzyBlazor's CSS sits in cascade layers, so any CSS of yours outside a layer wins over it. That's what makes it easy to adjust, but it means Bootstrap, and rules like the template's a { color: … }, override IzzyBlazor's components: button links turn blue on blue and headings change size.

Put Bootstrap in a layer of its own, declared before IzzyBlazor's. Remove its <link> and import it at the top of your stylesheet instead, move rules that style bare elements (body, a, h1) into the same layer, and link your stylesheet before IzzyBlazor's. The order matters here because yours now declares a layer:

/* First: puts Bootstrap in a layer that IzzyBlazor's layers come after. */
@import url("lib/bootstrap/dist/css/bootstrap.min.css") layer(bootstrap);

/* Rules for bare elements, in the same layer, so they don't reach IzzyBlazor's components. */
@layer bootstrap {
    a, .btn-link { color: #006bb7; }
}

/* Everything else as before: outside a layer, these still win. */
.content { padding-top: 1.1rem; }

<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["_content/IzzyBlazor.Core/izzyblazor.css"]" />
<link rel="stylesheet" href="@Assets["MyApp.styles.css"]" />
<IzzyTheme />

The first layer declared loses to the ones after it, so IzzyBlazor's components win over Bootstrap, while Bootstrap's classes keep styling your existing markup. Your rules outside a layer still win over both.

Name clashes

IzzyBlazor's components have plain names, such as Button, Card and NavMenu. When a component of yours has the same name, the build fails with RZ9985: Multiple components use the tag 'NavMenu'. The full template's own NavMenu is the usual one. Rename yours, or write its full name where you use it:

<MyApp.Components.Layout.NavMenu />

A type with the same name, such as your own Status enum, gives an ambiguous reference instead. Qualify one (IzzyBlazor.Status.Success) or add an alias to _Imports.razor:

@using Status = IzzyBlazor.Status

One folder at a time

_Imports.razor applies to its folder and the folders under it. To bring IzzyBlazor in gradually, put @using IzzyBlazor in a folder's own _Imports.razor instead of the one in Components, and only the pages there see its components. App.razor and any layout built with IzzyBlazor need it too, at the top of the file: without it, <IzzyTheme /> is read as an unknown HTML element, the build only warns, and the theme never renders.

Components/
  _Imports.razor           your usings, as before
  App.razor                @using IzzyBlazor at the top, for IzzyTheme
  Pages/
    Orders.razor           untouched
    Settings/
      _Imports.razor       @using IzzyBlazor
      Profile.razor        uses IzzyBlazor

A page can use a new layout while the rest keep yours: build one with AppShell and set it with @layout, or as the default layout of a folder in its _Imports.razor.

Forms you already have

IzzyBlazor's fields are Blazor input components, so they work inside your existing EditForm, beside Blazor's own inputs, with the validator you have:

<EditForm Model="Model" FormName="profile" OnValidSubmit="Save">
    <DataAnnotationsValidator />
    <TextField @bind-Value="Model!.Email" />
    <InputText @bind-Value="Model!.Nickname" class="form-control" />
    <button type="submit" class="btn btn-primary">Save</button>
</EditForm>

They show their own label, hint and errors. Switch the EditForm to IzzyBlazor's Form when you want its layout and columns; it takes the same Model, FormName and submit events, and adds the DataAnnotations validator itself.

Next steps

• Components: every component, with what it does in each mode.
• IzzyTheme: match your brand color and fonts.
• Style props: spacing, sizes and colors on any component.