SuperUI 1.3.1

SuperUI

<p align="center"> <img src="icon.png" alt="SuperUI" width="128"> </p>

<p align="center"> <a href="https://www.nuget.org/packages/SuperUI"><img src="https://img.shields.io/nuget/v/SuperUI.svg?logo=nuget&label=NuGet&color=blue" alt="NuGet"></a> <a href="https://www.nuget.org/packages/SuperUI"><img src="https://img.shields.io/nuget/dt/SuperUI.svg?logo=nuget&color=purple" alt="Downloads"></a> <a href="https://github.com/Maxvalpav/SuperUI.Blazor/actions/workflows/build-and-publish.yml"><img src="https://img.shields.io/github/actions/workflow/status/Maxvalpav/SuperUI.Blazor/build-and-publish.yml?logo=github&label=CI" alt="CI"></a> <a href="https://maxvalpav.github.io/SuperUI.Blazor/"><img src="https://img.shields.io/badge/demo-live-success?logo=github" alt="Demo"></a> <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="License"></a> </p>

<p align="center"> <b>90+ Blazor components</b> — data grid, charts, gantt, kanban, scheduler, pivot, org chart, diagram editor, forms, overlays, layout, maps, AI. Dark mode, localization, full IntelliSense. </p>

<p align="center"> <a href="https://maxvalpav.github.io/SuperUI.Blazor/"><b>Live demo</b></a> · <a href="https://www.nuget.org/packages/SuperUI"><b>NuGet</b></a> · <code>dotnet add package SuperUI</code> </p>

Get started

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

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

<link rel="stylesheet" href="_content/SuperUI/superui-theme.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, two built-in themes *@
<SgThemeSwitcher />

Two built-in themes: Default (blue-600 + slate, φ/Fibonacci radii, natural easing) and Natura UI (OKLCH ocean/sky, φ-proportioned, compact). Switch via SgThemeService.SetThemeAsync("natura-ui").

What's inside

Services

Screenshots

<table> <tr> <td><img src="docs/screenshots/grid2.png" alt="Data Grid" width="380"></td> <td><img src="docs/screenshots/input.png" alt="Inputs" width="380"></td> <td><img src="docs/screenshots/orgchart.png" alt="Org Chart" width="380"></td> </tr> </table>

Build & test

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

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

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