 |
VOOZH | about |
|
VOOZH | about |
dotnet add package NeoUI.Blazor --version 4.1.15
NuGet\Install-Package NeoUI.Blazor -Version 4.1.15
<PackageReference Include="NeoUI.Blazor" Version="4.1.15" />
<PackageVersion Include="NeoUI.Blazor" Version="4.1.15" />Directory.Packages.props
<PackageReference Include="NeoUI.Blazor" />Project file
paket add NeoUI.Blazor --version 4.1.15
#r "nuget: NeoUI.Blazor, 4.1.15"
#:package NeoUI.Blazor@4.1.15
#addin nuget:?package=NeoUI.Blazor&version=4.1.15Install as a Cake Addin
#tool nuget:?package=NeoUI.Blazor&version=4.1.15Install as a Cake Tool
Over 100+ production-ready Blazor components with shadcn/ui design and Tailwind CSS. Beautiful defaults that you can customize to match your brand.
dotnet add package NeoUI.Blazor
This package automatically includes:
NeoUI.Blazor.Primitives - Headless primitives providing behavior and accessibilityNeoUI.Icons.Lucide - 1,640+ beautiful iconsNeoUI.Icons.Heroicons - 1,288 icons across 4 variantsNeoUI.Icons.Feather - 286 minimalist icons_Imports.razor:@using NeoUI.Blazor
All components and their enums (e.g. ButtonVariant, InputType) live in the single NeoUI.Blazor namespace. If you use chart components, also add @using NeoUI.Blazor.Charts.
Optional icon packages β add whichever you need:
@using NeoUI.Icons.Lucide @* 1,640+ icons *@
@using NeoUI.Icons.Heroicons @* 1,288 icons across 4 variants *@
@using NeoUI.Icons.Feather @* 286 minimalist icons *@
App.razor:NeoUI.Blazor Components come with pre-built CSS and a theme script β no Tailwind setup required!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link href="@Assets["_content/NeoUI.Blazor/components.css"]" rel="stylesheet" />
<script src="@Assets["_content/NeoUI.Blazor/js/theme.js"]"></script>
<ImportMap />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="@Assets["_framework/blazor.web.js"]"></script>
</body>
</html>
<Button Variant="ButtonVariant.Default">Click me</Button>
<Dialog>
<DialogTrigger AsChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Welcome to NeoUI</DialogTitle>
<DialogDescription>
Beautiful Blazor components with zero configuration
</DialogDescription>
</DialogHeader>
<DialogFooter>
<DialogClose AsChild>
<Button Variant="ButtonVariant.Outline">Close</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
That's it! No Tailwind installation, no build configuration needed.
π‘ Pre-built themes: NeoUI ships with pre-built themes built on shadcn/ui defaults β ready to use out of the box with no extra setup. See the Theming section for details on applying and customizing themes.
NeoUI ships a built-in ILocalizer abstraction β a thin interface that decouples your app from any specific i18n framework.
Default behaviour β DefaultLocalizer is registered automatically by AddNeoUIComponents(). It returns the built-in English strings for every UI key (button labels, ARIA attributes, empty-state messages, etc.). No configuration required.
Customizing strings β implement ILocalizer and register it before calling AddNeoUIComponents():
// Option A β custom DefaultLocalizer keys (simplest)
builder.Services.AddSingleton<ILocalizer>(sp =>
new DefaultLocalizer(keys => {
keys["Dialog.Close"] = "SchlieΓen";
}));
builder.Services.AddNeoUIComponents();
// Option B β full IStringLocalizer<T> integration
builder.Services.AddScoped<ILocalizer, StringLocalizerAdapter<MyResources>>();
builder.Services.AddNeoUIComponents();
Both options work for Blazor Server, WebAssembly, and Auto mode.
NeoUI v4 introduces a 3-layer CSS merge pipeline that faithfully maps shadcn/ui style variants to Blazor components while keeping developer overrides fully functional:
Layer 1: Base classes (backward-compatible defaults)
β ClassNames.cn (tailwind-merge)
Layer 2: StyleVariant.GetClasses("Component.Key")
β ClassNames.cn (tailwind-merge)
Layer 3: User-supplied Class parameter (always wins)
Wrap your layout to enable the StyleVariant cascade and automatic theme initialization:
<AppProvider>
@Body
<ToastViewport />
<DialogHost />
</AppProvider>
await ThemeService.ApplyPresetAsync(ThemePreset.Luma);
<ThemeSwitcher ShowStyles="true" />
| Variant | Character |
|---|---|
Default |
Backward-compatible β no visual change |
Luma |
Glassmorphism SaaS β pill shapes, frosted glass |
Nova |
Compact β tight dashboard/admin aesthetic |
Maia |
Spacious β generous rounding, consumer apps |
Lyra |
Sharp β flat boxy look, developer tooling |
Mira |
Ultra-dense β minimal spacing, data-heavy UIs |
Vega |
Professional balanced β polished defaults |
See for the full guide including CSS load order, migration steps, and per-component override patterns.
The fastest way to start a new NeoUI app β scaffold a complete Blazor Web App pre-wired with a sidebar layout, theme switcher, dark mode toggle, Spotlight command palette, and Tailwind CSS v4 in seconds:
dotnet new install NeoUI.Blazor.Templates
dotnet new neoui -n MyApp
cd MyApp
dotnet run --project MyApp
Supports Server, WebAssembly, and Auto (default) interactivity modes. Tailwind CSS builds automatically on every dotnet build β Node.js just needs to be on your PATH.
Or keep reading to add NeoUI to an existing project manually.
Resizable="true")/reordering (Reorderable="true"), tree/hierarchical rows (ChildrenProperty, LoadChildrenAsync), row context menu (RowContextMenu), virtualization (Virtualize, ItemsProvider), and striped rows (Striped="true")FormSchema definitionTabsList, ToggleGroup, DropdownMenuRadioGroup, a pagination row, or any custom markup β it reacts to attribute changes via MutationObserver. Supports hover preview, CSS custom properties (--si-duration, --si-easing, --si-height), and data-[si-hover]: Tailwind variants for distinct hover vs selected styles.DataTable, DataView, and any list component. Supports cross-list transfer between grouped containers via Group, OnItemTransferredIn, OnItemTransferredOut, and OnCanDrop. Use Context="s" for SortableScope<TItem> and s.RowAttributes.Create beautiful, responsive charts with a declarative Recharts-inspired API:
<LineChart Data="@salesData">
<XAxis DataKey="Month" />
<YAxis />
<CartesianGrid />
<Tooltip />
<Legend />
<Line DataKey="Revenue" Fill="var(--chart-1)" />
<Line DataKey="Target" Fill="var(--chart-2)" />
</LineChart>
@code {
private List<SalesData> salesData = new()
{
new() { Month = "Jan", Revenue = 4000, Target = 3500 },
new() { Month = "Feb", Revenue = 3000, Target = 3200 },
new() { Month = "Mar", Revenue = 5000, Target = 4500 },
new() { Month = "Apr", Revenue = 4500, Target = 4000 },
new() { Month = "May", Revenue = 6000, Target = 5500 }
};
public class SalesData
{
public string Month { get; set; } = "";
public int Revenue { get; set; }
public int Target { get; set; }
}
}
Powerful data tables with built-in sorting, filtering, pagination, and selection:
<DataTable TItem="User"
Items="@users"
Columns="@columns"
ShowPagination="true"
InitialPageSize="10" />
Enterprise-grade data grid powered by AG DataGrid with Blazor template support and auto-discovery actions, designed with shadcn theme with real-time light/dark theme switching support:
<DataGrid Items="@orders" ActionHost="this">
<Columns>
<DataGridColumn Field="Id" Header="Order ID" Sortable="true" Width="100px" />
<DataGridColumn Field="CustomerName" Header="Customer" Sortable="true" />
<DataGridColumn Field="OrderDate" Header="Date" DataFormatString="d" />
<DataGridColumn Field="Total" Header="Total" DataFormatString="C" />
<DataGridColumn Field="Status" Header="Status">
<CellTemplate Context="order">
<Badge Variant="@GetStatusVariant(order.Status)">
@order.Status
</Badge>
</CellTemplate>
</DataGridColumn>
<DataGridColumn Field="Actions" Header="">
<CellTemplate Context="order">
<Button data-action="Edit" Variant="ButtonVariant.Ghost">
Edit
</Button>
</CellTemplate>
</DataGridColumn>
</Columns>
</DataGrid>
@code {
[DataGridAction]
private async Task Edit(Order order)
{
// Action auto-wired via [DataGridAction] attribute
await ShowEditDialog(order);
}
}
Add smooth animations with 20+ presets:
<Motion Preset="MotionPreset.FadeIn" Duration="500">
<div>Animated content</div>
</Motion>
NeoUI uses OKLCH-based CSS variables for theming, compatible with shadcn/ui themes. You can use any theme from:
NeoUI v4 adds the Style Variant System on top of this foundation β 7 named variants that go beyond color to control shape, density, and surface treatment. See for the full guide including the 3-layer CSS merge pipeline, AppProvider setup, and migration steps.
All components accept standard HTML attributes and CSS classes:
<Button Class="my-custom-class" id="my-button" data-test="submit">
Custom Button
</Button>
Override default styles with Tailwind classes:
<Card Class="bg-blue-500 border-blue-700">
Custom colored card
</Card>
All components are built with accessibility in mind:
Visit our interactive documentation site for:
These components are built on top of NeoUI.Blazor.Primitives - a library of headless, unstyled components that provide behavior and accessibility without any styling. If you need complete control over styling, you can use the primitives directly.
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE file for details
Note: This package was formerly known as BlazorUI.Components. As of version 1.0.7, the assembly name has been updated to NeoUI.Blazor to match the NuGet package ID, ensuring consistent asset paths when consumed from NuGet.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 net10.0 is compatible. net10.0-android net10.0-android was computed. net10.0-browser net10.0-browser was computed. net10.0-ios net10.0-ios was computed. net10.0-maccatalyst net10.0-maccatalyst was computed. net10.0-macos net10.0-macos was computed. net10.0-tvos net10.0-tvos was computed. net10.0-windows net10.0-windows was computed. |
Showing the top 1 NuGet packages that depend on NeoUI.Blazor:
| Package | Downloads |
|---|---|
|
NeoAdmin.Blazor
NeoAdmin.Blazor ηεΊη‘ζ‘ζΆιͺ¨ζΆγ |
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 4.1.15 | 480 | 6/11/2026 |
| 4.1.14 | 111 | 6/8/2026 |
| 4.1.13 | 109 | 6/7/2026 |
| 4.1.11 | 129 | 6/4/2026 |
| 4.1.10 | 103 | 6/3/2026 |
| 4.1.9 | 171 | 5/25/2026 |
| 4.1.8 | 103 | 5/25/2026 |
| 4.1.7 | 631 | 5/21/2026 |
| 4.1.6 | 107 | 5/20/2026 |
| 4.1.5 | 104 | 5/19/2026 |
| 4.1.4 | 98 | 5/18/2026 |
| 4.1.3 | 89 | 5/18/2026 |
| 4.1.2 | 93 | 5/18/2026 |
| 4.1.1 | 105 | 5/18/2026 |
| 4.1.0 | 98 | 5/17/2026 |
| 4.0.19 | 98 | 5/16/2026 |
| 4.0.18 | 172 | 5/13/2026 |
| 4.0.17 | 101 | 5/13/2026 |
| 4.0.16 | 99 | 5/13/2026 |
| 4.0.15 | 107 | 5/12/2026 |