NeoBlazorUI.Components 1.1.0

There is a newer version of this package available.
See the version list below for details.

dotnet add package NeoBlazorUI.Components --version 1.1.0

NuGet\Install-Package NeoBlazorUI.Components -Version 1.1.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="NeoBlazorUI.Components" Version="1.1.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="NeoBlazorUI.Components" Version="1.1.0" />
                    

                            Directory.Packages.props

<PackageReference Include="NeoBlazorUI.Components" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add NeoBlazorUI.Components --version 1.1.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: NeoBlazorUI.Components, 1.1.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package NeoBlazorUI.Components@1.1.0

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=NeoBlazorUI.Components&version=1.1.0
                    

                            Install as a Cake Addin

#tool nuget:?package=NeoBlazorUI.Components&version=1.1.0
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

NeoBlazorUI.Components

Over 75+ production-ready Blazor components with shadcn/ui design and Tailwind CSS. Beautiful defaults that you can customize to match your brand.

✨ Features

🎨 Zero Configuration: Pre-built CSS included - no Tailwind setup required
🌙 Dark Mode Built-in: Automatic dark mode support using CSS variables
🎯 .NET 10 Ready: Built for the latest .NET platform with full WebAssembly and Server support
♿ Accessible First: WCAG 2.1 AA compliant with proper ARIA attributes
🧩 Composable: Flexible component composition patterns
🎭 shadcn/ui Design: Modern design language inspired by shadcn/ui
🎨 Theme Compatible: Use any theme from shadcn/ui or tweakcn.com
📦 Pre-Styled: Production-ready components with beautiful defaults
🔧 Fully Customizable: Override styles with custom CSS or Tailwind classes
🔒 Type-Safe: Full C# type safety with IntelliSense support
📱 Responsive: Mobile-first design with touch gesture support

📦 Installation

dotnet add package NeoBlazorUI.Components

This package automatically includes:

NeoBlazorUI.Primitives - Headless primitives providing behavior and accessibility
NeoBlazorUI.Icons.Lucide - 1,640+ beautiful icons
Pre-built CSS - No Tailwind setup required!

🚀 Quick Start

1. Add to your `_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.

2. Add CSS to your `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="/" />

    
    <link rel="stylesheet" href="styles/theme.css" />

    
    <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>

3. Start using components:

<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.

📚 Available Components (75+)

Form & Input Components

Button - Interactive buttons with 6 variants and multiple sizes
Button Group - Visually group related buttons
Checkbox - Binary selection with indeterminate state
Combobox - Autocomplete input with searchable dropdown
Date Picker - Date selection with calendar popover
Field - Form field wrapper with label, description, and errors
Input - Text input fields with multiple types
Input Group - Enhanced inputs with icons, buttons, and addons
Input OTP - One-time password input with character slots
Label - Accessible labels for form controls
Multi Select - Searchable multi-selection with tags
Native Select - Styled native HTML select
Radio Group - Mutually exclusive options
Select - Dropdown selection with groups
Slider - Range input for numeric values
Switch - Toggle control for on/off states
Textarea - Multi-line text input
Time Picker - Time selection with hour/minute controls

Data Display Components

Avatar - User profile images with fallbacks
Badge - Labels for status and categories
Card - Content container with header/footer
Data Table - Advanced tables with sorting, filtering, pagination
Empty - Empty state displays
Grid - Advanced data grid with state management
Item - Flexible list items with media and actions
Kbd - Keyboard shortcut badges
Progress - Progress bars with ARIA support
Separator - Visual dividers
Skeleton - Loading placeholders
Spinner - Loading indicators
Typography - Semantic text styling

Accordion - Collapsible content sections
Breadcrumb - Hierarchical navigation
Command - Command palette for quick actions
Context Menu - Right-click menus
Dropdown Menu - Context menus with shortcuts
Menubar - Desktop-style horizontal menu bar
Navigation Menu - Horizontal navigation with dropdowns
Pagination - Page navigation
Sidebar - Responsive navigation sidebar
Tabs - Tabbed interface

Overlay Components

Alert Dialog - Modal dialogs for confirmations
Dialog - Modal dialogs with backdrop
Hover Card - Rich preview cards on hover
Popover - Floating panels for content
Sheet - Side panels from viewport edges
Toast - Temporary notifications
Tooltip - Brief informational popups

Feedback Components

Alert - Status messages and callouts

Layout & Display Components

Aspect Ratio - Display content with desired ratio
Carousel - Slideshow with gestures and animations
Collapsible - Expandable content area
Resizable - Split layouts with draggable handles
Scroll Area - Custom scrollbars

Advanced Components

Chart - 8 chart types with beautiful defaults (Line, Bar, Area, Pie, Doughnut, Radar, Polar Area, Bubble)
Markdown Editor - Write/preview tabs with syntax support
Motion - Declarative animation system with 20+ presets
Rich Text Editor - WYSIWYG editor with formatting toolbar
Toggle - Pressable toggle buttons
Toggle Group - Single/multiple selection toggles

Icon Libraries

Lucide Icons - 1,640+ beautiful, consistent icons (included)
Heroicons - 1,288 icons across 4 variants (separate package)
Feather Icons - 286 minimalist icons (separate package)

🎯 Component Highlights

Chart Component

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; }
    }
}

Data Table Component

Powerful data tables with built-in sorting, filtering, pagination, and selection:

<DataTable TItem="User"
           Items="@users"
           Columns="@columns"
           ShowPagination="true"
           PageSize="10" />

Grid Component

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);
    }
}

Motion Component

Add smooth animations with 20+ presets:

<Motion Preset="MotionPreset.FadeIn" Duration="500">
    <div>Animated content</div>
</Motion>

🎨 Theming

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 */
}

🔧 Customization

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>

♿ Accessibility

All components are built with accessibility in mind:

WCAG 2.1 AA compliant
Proper ARIA attributes
Keyboard navigation support
Screen reader friendly
Focus management
High contrast mode support

📖 Documentation & Examples

Visit our interactive documentation site for:

Live component demos
API reference for all components
Code examples and recipes
Theming guides
Best practices

View Full Documentation

🏗️ Built On Primitives

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.

NeoBlazorUI.Primitives - Headless, unstyled components (included)
NeoBlazorUI.Icons.Lucide - 1,640+ Lucide icons (included)
NeoBlazorUI.Icons.Heroicons - 1,288 Heroicons across 4 variants
NeoBlazorUI.Icons.Feather - 286 beautiful minimalist icons

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

Initial Blazor components inspiration by Mathew Taylor
Design inspired by shadcn/ui
Icons from Lucide, Heroicons, and Feather
Built with ❤️ for the Blazor community

📊 Version Information

Current Version: 1.0.15
Target Framework: .NET 10
Package ID: NeoBlazorUI.Components
Assembly Name: NeoBlazorUI.Components

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.

Product	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.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net10.0
- Markdig (>= 0.37.0)
- Microsoft.AspNetCore.Components.Web (>= 10.0.0)
- Microsoft.AspNetCore.Http.Abstractions (>= 2.3.9)
- Microsoft.Extensions.Http (>= 10.0.2)
- NeoBlazorUI.Icons.Lucide (>= 1.0.7)
- NeoBlazorUI.Primitives (>= 1.0.14)

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.6.2	125	2/23/2026
2.6.1	101	2/22/2026
2.6.0	95	2/21/2026
2.5.3	101	2/19/2026
2.5.2	96	2/19/2026
2.5.1	93	2/19/2026
2.5.0	110	2/18/2026
2.4.0	88	2/16/2026
2.3.0	95	2/9/2026
2.2.1	96	2/7/2026
2.2.0	93	2/6/2026
2.1.0	94	2/6/2026
2.0.0	90	2/5/2026
1.2.0	101	1/31/2026
1.1.0	98	1/31/2026
1.0.17	105	1/29/2026
1.0.16	107	1/27/2026
1.0.15	96	1/24/2026
1.0.14	92	1/23/2026
1.0.13	89	1/23/2026