SuperUI 1.4.3
See the version list below for details.
dotnet add package SuperUI --version 1.4.3
NuGet\Install-Package SuperUI -Version 1.4.3
<PackageReference Include="SuperUI" Version="1.4.3" />
<PackageVersion Include="SuperUI" Version="1.4.3" />
<PackageReference Include="SuperUI" />
paket add SuperUI --version 1.4.3
#r "nuget: SuperUI, 1.4.3"
#:package SuperUI@1.4.3
#addin nuget:?package=SuperUI&version=1.4.3
#tool nuget:?package=SuperUI&version=1.4.3
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.
Upgrading from 1.x? See
docs/MIGRATION-2.0.mdfor the full checklist.
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, 43 built-in themes *@
<SgThemeSwitcher />
43 built-in themes included: 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, Aether, Biofilia, Calyx, Cantus, Chrono, Circadian, Clarity, Clarity Clinical, Element, Ergo, Fractalis, Gordian, Inclus, Lumina, Muse, Oasis, Prism, Reader, Signature, Sylvan, Veiled, Wave, Window. Switch via SgThemeService.SetThemeAsync("theme-id"). Themes are JSON-defined (see docs/MIGRATION-2.0.md) and the runtime swaps a single <link> element — no per-click CSS push, browser cache does the work.
Components
| Category | Components |
|---|---|
| Data display | SgDataGrid, SgCanvasGrid, SgPivotTable, SgKanban, SgGantt, SgScheduler, SgOrgChart, SgDiagram/SgDiagramEditor, SgTreeView, SgTreeSelect, SgTransfer, SgVirtualList, SgDashboard, SgTimeline, SgDataMatrix, SgSpreadsheet |
| Forms & inputs | SgTextBox, SgTextArea, SgNumberEdit, SgSelect, SgMultiSelect, SgComboBox, SgAutoComplete, SgCascader, SgCheckBox, SgSwitch, SgRadioGroup, SgSlider, SgDatePicker, SgDateRangePicker, SgTimePicker, SgColorPicker, SgMaskedInput, SgFileUpload, SgRichTextEditor, SgDataForm, SgFilterBuilder, SgQueryBuilder, SgEntityPicker, SgButton, SgButtonGroup, SgCron, SgCronPicker, SgSignaturePad |
| Overlays & feedback | SgModal, SgDrawer, SgPopover, SgTooltip, SgContextMenu, SgDropdown, SgAlert, SgResult, SgProgress, SgSpinner (9 types), SgSkeleton, SgEmpty, SgDockWindow |
| Navigation | SgTabs, SgMenu, SgNavMenu, SgBreadcrumb, SgStepper, SgPagination, SgCommandBar, SgToolbar, SgSegmented, SgBackTop, SgAffix, SgAnchor, SgRibbon, SgCommandPalette |
| Layout | SgCard, SgRow/SgCol, SgStack, SgSplitter, SgAccordion, SgCollapse, SgDivider, SgResizable, SgHeader/SgFooter, SgDescriptions, SgPropertyGrid, SgSpace, SgResponsiveContainer |
| Charts & graphics | SgChart (Chart.js), SgECharts, SgD3Chart, SgThree (3D), SgKonva, SgMermaid, SgBpmn, SgExcalidraw, SgHeatmap |
| AI & LLM | SgChat, SgLlmSettings, SgRagProvider, SgRagChat, LangGraphProvider, SgSmartForm, BlazorToolExecutor, HumanInTheLoopInterrupter, StateInspector, SgTypingIndicator |
| Industrial & API | SgFileSystem, SgSerialPort, SgUsbManager, SgWebRTC, SgBluetooth, SgBarcodeScanner, SgOcr, SgRecorder, SgMidiController, SgComputePressure, SgNetworkTrace, SgPalletPacker, SgTerminal, SgEyeTracker |
| Display & misc | SgBadge, SgChip, SgAvatar, SgStatistic, SgCalendar, SgCode, SgQrCode, SgNotificationBell, SgPermissionGate, SgLanguageSwitcher, SgThemeSwitcher, SgCountdown, SgWeatherDashboard |
Services
| Service | What it does |
|---|---|
SgToastService |
Show toast notifications from C# code |
SgConfirmService |
Async confirm dialogs |
SgNotificationService |
Notification feed |
SgThemeService |
Switch themes, light/dark mode, custom themes |
SgLlmService |
LLM connector |
SgLangGraphService |
Agentic workflows |
SgRagService |
RAG pipeline |
SgDexieService |
IndexedDB bridge |
SgMqttService |
MQTT / IIoT |
SgFeatureFlagService |
Feature toggles |
SgCalendarService |
Calendar events |
SgPdfService |
PDF generation |
SgWeatherService |
Weather data |
SgHeatmapService |
Heatmap data |
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"
What's new in 2.0
- JSON-defined themes (43 in alpha.1) — every theme is a JSON
file in
Themes/json/, validated againstThemes/schemas/theme.schema.json. Adding a new theme no longer requires recompiling SuperUI. - New token layers — motion, state, elevation, a11y — published
as
_content/SuperUI/themes/sg-tokens-{motion,state,elevation,a11y}.cssand bundled together bysg-theme-bundle.css. color-mix()everywhere — 302rgba()calls insuperui-components.cssare nowcolor-mix(in srgb, ...)so tints track the active theme.- Link-swap runtime — the theme switcher now mutates a single
<link rel="stylesheet">in<head>instead of regenerating and re-injecting a 15-33 KB CSS string. Pre-built.cssfiles ship withCache-Control: max-age=31536000, immutable. - Debounced, batched, idempotent
SgThemeService— 150 ms debounce, singleapplyThemeState({...})JS round-trip, race-safeDisposeAsync, singlematchMediasubscription that only mounts while the user is inautomode. SgThemeGenerator.GenerateFullThemeCss(IThemeDefinition)is now public — used by the build-time exporter and by anyone who needs to ship a pre-built CSS for a custom theme.
See CHANGELOG.md for the full list and
docs/MIGRATION-2.0.md for the upgrade
checklist.
License: MIT © 2026 SuperUI Contributors
Contacts: Telegram @maksimov8val · Email maksimov.val@rambler.ru
Repo: github.com/Maxvalpav/SuperUI.Blazor
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Microsoft.AspNetCore.Components.CustomElements (>= 10.0.0)
- Microsoft.AspNetCore.Components.Web (>= 10.0.0)
- Microsoft.Extensions.AI (>= 10.0.0)
- Net.Codecrete.QrCodeGenerator (>= 2.1.0)
- SkiaSharp (>= 3.116.1)
- SkiaSharp.HarfBuzz (>= 3.116.1)
- SkiaSharp.Views.Blazor (>= 3.116.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 2.0.0-alpha.1 | 37 | 6/3/2026 |
| 1.4.3 | 44 | 6/3/2026 |
| 1.4.2 | 95 | 6/1/2026 |
| 1.4.1 | 94 | 6/1/2026 |
| 1.4.0 | 93 | 5/31/2026 |
| 1.3.2 | 96 | 5/30/2026 |
| 1.3.1 | 91 | 5/30/2026 |
| 1.3.0 | 96 | 5/30/2026 |
| 1.2.3 | 90 | 5/30/2026 |
| 1.2.2 | 100 | 5/28/2026 |
| 1.0.99 | 93 | 5/21/2026 |
| 1.0.55 | 91 | 5/19/2026 |
| 1.0.37 | 98 | 5/10/2026 |
| 1.0.35 | 95 | 5/8/2026 |
| 1.0.31 | 91 | 5/7/2026 |
| 1.0.27 | 95 | 5/6/2026 |
| 1.0.22 | 87 | 5/5/2026 |
| 1.0.20 | 107 | 5/3/2026 |



