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
@* _Imports.razor *@
@using SuperUI
@using SuperUI.Components// Program.cs
builder.Services.AddSuperUI();<!-- wwwroot/index.html -->
<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.
@* 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 />| 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 |
dotnet restore
dotnet build -c Release
dotnet test
dotnet run --project SuperUI.DemoRequires .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