SuperUI 2.0.1

SuperUI

90+ Blazor components — data grid, charts, gantt, kanban, scheduler, pivot, org chart, diagram editor, forms, overlays, layout, maps, AI. Dark mode, 43 themes (JSON-defined), localization, full IntelliSense.

Live demo · NuGet · dotnet add package SuperUI

Screenshots

Get started

@* _Imports.razor *@
@using SuperUI
@using SuperUI.Components

// Program.cs
builder.Services.AddSuperUI();

<link rel="stylesheet" href="_content/SuperUI/themes/sg-theme-bundle.css" />
<link rel="stylesheet" href="_content/SuperUI/superui-components.css" />

@* MainLayout.razor *@
<SgThemeProvider>
    <SgToastHost />
    <SgConfirmHost />
    <SgPortalHost />
    @Body
</SgThemeProvider>

Targets net10.0 — works with Blazor WebAssembly, Server, Web App, Hybrid.

In action

@* Button with loading and toast *@
<SgButton Variant="SgButtonVariant.Primary" 
          IsLoading="@_saving"
          ProgressType="SgButtonProgressType.Ring"
          OnClick="Save">Save</SgButton>

<SgButton Variant="SgButtonVariant.Danger" 
          Type="SgButtonType.Link"
          Href="https://example.com">Delete</SgButton>

@inject SgToastService Toast

<button @onclick="() => Toast.Success('Done!')">Notify me</button>

@* Data grid with sorting, filtering, paging *@
<SgDataGrid TItem="Employee" Items="@employees"
            ShowSearch="true" PageSize="20">
    <SgDataGridColumn TItem="Employee" Title="Name" Value="@(e => e.Name)" Sortable="true" />
    <SgDataGridColumn TItem="Employee" Title="Department" Value="@(e => e.Dept)" Filterable="true" />
    <SgDataGridColumn TItem="Employee" Title="Salary" Value="@(e => e.Salary)" Format="C0" />
</SgDataGrid>

@* Confirm dialog *@
@inject SgConfirmService Confirm

@if (await Confirm.ConfirmAsync("Delete this record?", variant: SgAlertVariant.Danger))
{
    // user confirmed
}

@* Theming — light/dark toggle, 91 built-in themes *@
<SgThemeSwitcher />

91 built-in themes included (JSON-defined, see SuperUI/Themes/json/): Natura UI, Solaris, Royal, Graphite, Forest, Neon, Glass, Chrono, Calyx, Apex, Zen, Neo, Oasis, Flux, Prism, Cosmos, Fractalis, Wave, Aurea, Sylvan, Medici, Aether, Clarity, Element, Radius, Muse, Forge, Gordian, Inclus, Reader, Signature, Cantus, Biofilia, Circadian, Clarity Clinical, Ergo, Lumina, Veiled, Window, and more. Switch via SgThemeService.SetThemeAsync("theme-id"). Themes are JSON-defined and the runtime swaps a single <link> element — no per-click CSS push, browser cache does the work.

Components

Services

Build & test

dotnet restore
dotnet build -c Release
dotnet test
dotnet run --project SuperUI.Demo

Requires .NET 10 SDK. Tests use bUnit + xUnit.

To regenerate the per-theme static CSS files (after adding a JSON theme or changing SgThemeGenerator):

dotnet run --project tools/ThemeCssExporter/ThemeCssExporter.csproj -- "SuperUI/wwwroot/themes/css"

License: MIT © 2026 SuperUI Contributors
Contacts: Telegram @maksimov8val · Email maksimov.val@rambler.ru
Repo: github.com/Maxvalpav/SuperUI.Blazor