Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

Documentation

IzzyBlazor is a Blazor component library built for static SSR. Components render as HTML, gain interactivity with a small script, and support C# bindings and events when you choose an interactive render mode.

dotnet add package IzzyBlazor --prerelease

One set of components for every page. This form posts and validates on a static page, with JavaScript off too, and runs over a circuit on an interactive one, with no change to the markup. The model takes the post through [SupplyParameterFromForm]:

razor
<Form Model="Signup" FormName="signup" OnValidSubmit="SaveAsync">
    <TextField @bind-Value="Signup.Email" />
    <Button Submit>Sign up</Button>
</Form>

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

    protected override void OnInitialized() => Signup ??= new();
}
Get started Browse components

Off · Static · Live

Examples on this site run three ways. Pick one with the switch, here and on component pages:

  • Off: JavaScript disabled, so you see exactly what the HTML and CSS do on their own.
  • Static: a static SSR page with IzzyBlazor's script, which adds keyboard handling, live values and the like. No circuit.
  • Live: an interactive page on Blazor Server, where C# event handlers and @bind run.

Preview

Workspace

Theme

An email when a deploy fails.

Code

Settings.razor 
@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="workspace" OnValidSubmit="Save" Grow>
    <Heading Level="2" Size="TextSize.Lg">Workspace</Heading>
    <TextField @bind-Value="Model!.Name" />
    <Row Gap="4" Wrap>
        <Select @bind-Value="Model!.Region" Grow />
        <SegmentedControl @bind-Value="Model!.Theme" />
    </Row>
    <Slider @bind-Value="Model!.Timeout" Min="5" Max="120" Step="5" ShowValue ValueFormat="{0} min" />
    <Switch @bind-Value="Model!.Alerts" ControlPosition="ControlPosition.End" Hint="An email when a deploy fails." />
    <FormActions><Button Submit>Save</Button></FormActions>
    @if (_saved)
    {
        <Alert Status="Status.Success">Saved @Model!.Name: @Model.Theme, @Model.Timeout-minute sessions.</Alert>
    }
</Form>

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

    private bool _saved;

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

    private void Save() => _saved = true;

    public sealed class Workspace
    {
        [Required(ErrorMessage = "Name the workspace"), StringLength(40)]
        public string Name { get; set; } = "Acme";

        public Region Region { get; set; } = Region.UsEast;

        public Theme Theme { get; set; } = Theme.Dark;

        [Display(Name = "Session timeout")]
        public int Timeout { get; set; } = 30;

        [Display(Name = "Deploy alerts")]
        public bool Alerts { get; set; } = true;
    }

    public enum Region
    {
        [Display(Name = "US East")] UsEast,
        [Display(Name = "US West")] UsWest,
        [Display(Name = "Europe")] Europe,
        [Display(Name = "Asia Pacific")] AsiaPacific,
    }

    public enum Theme { Light, Dark, System }
}

Off: Every control still works, and Save posts, checks and shows the result.

How it's built

One set for every render mode

The same components on static, Server, WebAssembly and Auto pages. Nearly all work with JavaScript off and do more with it. Render modes

Forms that post

Form and its fields bind on a static post and on an interactive page, with labels, limits and messages from your model's attributes. Forms and validation

State in the URL

Table, FilterForm and Pagination keep sorting, filters and the page in the query string, so they work with no circuit and links keep them. Table

Style props and themes

Spacing, sizes and colors as parameters, and IzzyTheme for the preset, brand and fonts, rendered on the server so the theme is there on first paint. Style props · Theming

Native elements first

Buttons, dialogs, selects and disclosures are the browser's own, so focus, keyboard and screen readers work as the platform defines them; the script adds ARIA where it adds behavior.

What's in the box

80+ components in 10 categories. See them all.

Layout 11 components

Box, Row, Column, Stack and 7 more

App shell 5 components

AppShell, AppSidebar, SiteNav, IzzyTheme and 1 more

Typography 10 components

Heading, TextBlock, List, Prose and 6 more

Actions 6 components

Button, IconButton, ButtonGroup, Toolbar and 2 more

Forms 10 components

Form, Fieldset, TextField, TextArea and 6 more

Selection 8 components

Select, Combobox, MultiSelect, Checkbox and 4 more

Overlays 5 components

Dialog, Drawer, Menu, Popover and 1 more

Navigation 7 components

NavMenu, Tabs, Breadcrumb, Pagination and 3 more

Feedback 9 components

Alert, Banner, ToastRegion, Badge and 5 more

Data display 11 components

Table, Card, Stat, DescriptionList and 7 more

Requirements

  • .NET 10, in a Blazor Web App: static pages, and Server, WebAssembly or Auto pages.
  • Two packages: IzzyBlazor for the server project, and IzzyBlazor.Core for a .Client project. Packages
  • Current browsers: Chrome and Edge 123+, Firefox 128+, Safari 17.5+. Newer features, such as the customizable select, are used where the browser has them.
  • MIT licensed. Pro components are planned.

Resources

  • Demos: realistic scenarios in all three modes, with the source.
  • GitHub: the source and issues.
  • Release notes: what changed in each version.
  • AI assistants: connect yours to the docs' MCP server.
  • API metadata: every component's API as JSON, for tools and AI assistants.