Over 75+ pre-styled Blazor components built with shadcn/ui design and Tailwind CSS with full .NET 10 support. Beautiful defaults that you can customize to match your brand.
$ dotnet add package NeoBlazorUI.ComponentsOver 85+ production-ready Blazor components with shadcn/ui design and Tailwind CSS. Beautiful defaults that you can customize to match your brand.
dotnet add package NeoBlazorUI.Components
This package automatically includes:
NeoBlazorUI.Primitives - Headless primitives providing behavior and accessibilityNeoBlazorUI.Icons.Lucide - 1,640+ beautiful icons_Imports.razor:@using BlazorUI.Components
@using BlazorUI.Components.Button
@using BlazorUI.Components.Input
@using BlazorUI.Components.Dialog
@using BlazorUI.Components.Sheet
@using BlazorUI.Components.Accordion
@using BlazorUI.Components.Tabs
@using BlazorUI.Components.Select
@using BlazorUI.Components.Avatar
@using BlazorUI.Components.Badge
@using BlazorUI.Components.Card
@using BlazorUI.Components.Chart
@using BlazorUI.Components.DataTable
@using BlazorUI.Icons.Lucide.Components
Add imports for each component namespace you use. This gives access to component-specific enums like ButtonVariant, InputType, etc.
App.razor or index.html:BlazorUI Components come with pre-built CSS - no Tailwind setup required!
<!DOCTYPE html>
<html lang="en" data-theme="default">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<!-- Optional: Your custom theme (defines CSS variables) -->
<link rel="stylesheet" href="styles/theme.css" />
<!-- Pre-built BlazorUI styles (included in NuGet package) -->
<link rel="stylesheet" href="_content/NeoBlazorUI.Components/blazorui.css" />
<HeadOutlet @rendermode="InteractiveAuto" />
</head>
<body>
<Routes @rendermode="InteractiveAuto" />
<script src="_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 NeoBlazorUI</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.
Create beautiful, responsive charts with a declarative Recharts-inspired API:
<LineChart Data="@salesData">
<XAxis DataKey="Month" />
<YAxis />
<Grid />
<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"
PageSize="10" />Enterprise-grade data grid powered by AG Grid with Blazor template support and auto-discovery actions, designed with shadcn theme with real-time light/dark theme switching support:
<Grid Items="@orders" ActionHost="this">
<Columns>
<GridColumn Field="Id" Header="Order ID" Sortable="true" Width="100px" />
<GridColumn Field="CustomerName" Header="Customer" Sortable="true" />
<GridColumn Field="OrderDate" Header="Date" DataFormatString="d" />
<GridColumn Field="Total" Header="Total" DataFormatString="C" />
<GridColumn Field="Status" Header="Status">
<CellTemplate Context="order">
<Badge Variant="@GetStatusVariant(order.Status)">
@order.Status
</Badge>
</CellTemplate>
</GridColumn>
<GridColumn Field="Actions" Header="">
<CellTemplate Context="order">
<Button data-action="Edit" Variant="ButtonVariant.Ghost">
Edit
</Button>
</CellTemplate>
</GridColumn>
</Columns>
</Grid>
@code {
[GridAction]
private async Task Edit(Order order)
{
// Action auto-wired via [GridAction] attribute
await ShowEditDialog(order);
}
}Add smooth animations with 20+ presets:
<Motion Preset="MotionPreset.FadeIn" Duration="500">
<div>Animated content</div>
</Motion>NeoBlazorUI uses CSS variables for theming, compatible with shadcn/ui themes. You can use any theme from:
Or create your own by defining CSS variables:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
/* ... and more */
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
/* ... dark mode colors */
}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 NeoBlazorUI.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 NeoBlazorUI.Components to match the NuGet package ID, ensuring consistent asset paths when consumed from NuGet.