BlazorUI Demo

Startup configuration

Register services once, set application-wide notification behavior, and customize visual tokens in CSS.

Notification defaults

Toast and alert positions are application-wide. Individual calls can still override duration, color, tone, variant, icon, grouping key, and close behavior.

View code 
builder.Services
    .AddBlazorUIComponents()
    .UseNotifications(options =>
    {
        options.ToastPosition = NotificationPosition.BottomRight;
        options.AlertPosition = NotificationPosition.TopCenter;
        options.MaxOpenToasts = 5;
        options.MaxOpenAlerts = 3;
        options.ToastDuration = TimeSpan.FromSeconds(4);
        options.AlertDuration = TimeSpan.FromSeconds(8);
        options.GroupNotifications = true;
    });
Fonts and theme tokens

BlazorUI does not fetch fonts. Load the font in the host, then override the CSS variables after blazorui.css.

View code 
/* Loaded after _content/BlazorUI.Components/blazorui.css */
:root {
    --bui-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --bui-primary: #0d9488;
    --bui-primary-contrast: #ffffff;
    --bui-primary-soft: #ccfbf1;
    --bui-radius-control: 8px;
    --bui-radius-surface: 12px;
}

[data-bui-theme="dark"] {
    --bui-primary: #2dd4bf;
    --bui-primary-contrast: #072b26;
    --bui-primary-soft: #123d38;
}
Hosts

Add the hosts once, normally at the end of the application layout.

View code 
<BuiDialogHost />
<BuiNotificationHost />