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.ComponentsPre-styled Blazor components with shadcn/ui design. Beautiful defaults with zero configuration - no Tailwind setup required!
dotnet add package BlazorUI.Components
This package automatically includes:
BlazorUI.Primitives - Headless primitives providing behavior and accessibility_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
Add imports for each component namespace you use. This gives access to component-specific enums like ButtonVariant, InputType, etc.
App.razor:BlazorUI Components come with pre-built CSS - 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="/" />
<!-- 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/BlazorUI.Components/blazorui.css" />
<HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
<Routes @rendermode="InteractiveServer" />
<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 BlazorUI</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.
<Button
Variant="ButtonVariant.Default"
Size="ButtonSize.Default"
Type="ButtonType.Button"
IconPosition="IconPosition.Start"
Disabled="false">
Click me
</Button>| Parameter | Type | Default | Values |
|---|---|---|---|
Variant | ButtonVariant | Default | Default, Destructive, Outline, Secondary, Ghost, Link |
Size | ButtonSize | Default | Small, Default, Large, Icon, IconSmall, IconLarge |
Type | ButtonType | Button | Button, Submit, Reset |
IconPosition | IconPosition | Start | Start, End |
<Input
Type="InputType.Email"
Placeholder="name@example.com"
Disabled="false" />| Parameter | Type | Default | Values |
|---|---|---|---|
Type | InputType | Text | Text, Email, Password, Number, Tel, Url, Search, Date, Time, File |
<Avatar Size="AvatarSize.Default">
<AvatarImage Src="user.jpg" Alt="User" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>| Parameter | Type | Default | Values |
|---|---|---|---|
Size | AvatarSize | Default | Small, Default, Large, ExtraLarge |
<Badge Variant="BadgeVariant.Default">New</Badge>| Parameter | Type | Default | Values |
|---|---|---|---|
Variant | BadgeVariant | Default | Default, Secondary, Destructive, Outline |
<Accordion Type="AccordionType.Single" Collapsible="true">
<AccordionItem Value="item-1">
<AccordionTrigger>Section 1</AccordionTrigger>
<AccordionContent>Content 1</AccordionContent>
</AccordionItem>
</Accordion>| Parameter | Type | Default | Description |
|---|---|---|---|
Type | AccordionType | Single | Single (one item open) or Multiple (many items open) |
Collapsible | bool | false | When Single, allows closing all items |
<Tabs
DefaultValue="tab1"
Orientation="TabsOrientation.Horizontal"
ActivationMode="TabsActivationMode.Automatic">
<TabsList>
<TabsTrigger Value="tab1">Tab 1</TabsTrigger>
<TabsTrigger Value="tab2">Tab 2</TabsTrigger>
</TabsList>
<TabsContent Value="tab1">Content 1</TabsContent>
<TabsContent Value="tab2">Content 2</TabsContent>
</Tabs>| Parameter | Type | Default | Values |
|---|---|---|---|
Orientation | TabsOrientation | Horizontal | Horizontal, Vertical |
ActivationMode | TabsActivationMode | Automatic | Automatic (on focus), Manual (on click) |
<Sheet>
<SheetTrigger AsChild>
<Button>Open Sheet</Button>
</SheetTrigger>
<SheetContent Side="SheetSide.Right">
<SheetHeader>
<SheetTitle>Sheet Title</SheetTitle>
<SheetDescription>Sheet description</SheetDescription>
</SheetHeader>
<!-- Content -->
</SheetContent>
</Sheet>| Parameter | Type | Default | Values |
|---|---|---|---|
Side | SheetSide | Right | Top, Right, Bottom, Left |
<Select TValue="string" @bind-Value="selectedValue">
<SelectTrigger>
<SelectValue Placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem Value="@("option1")">Option 1</SelectItem>
<SelectItem Value="@("option2")">Option 2</SelectItem>
</SelectContent>
</Select>Select is a generic component. Specify TValue for type safety.
<Separator Orientation="SeparatorOrientation.Horizontal" />| Parameter | Type | Default | Values |
|---|---|---|---|
Orientation | SeparatorOrientation | Horizontal | Horizontal, Vertical |
<Skeleton Shape="SkeletonShape.Rectangular" Class="w-full h-4" />
<Skeleton Shape="SkeletonShape.Circular" Class="w-12 h-12" />| Parameter | Type | Default | Values |
|---|---|---|---|
Shape | SkeletonShape | Rectangular | Rectangular, Circular |
<DataTable TItem="User" Items="users" SelectionMode="DataTableSelectionMode.Multiple">
<DataTableColumn TItem="User" Field="x => x.Name" Header="Name" />
<DataTableColumn TItem="User" Field="x => x.Email" Header="Email" />
</DataTable>| Parameter | Type | Default | Values |
|---|---|---|---|
SelectionMode | DataTableSelectionMode | None | None, Single, Multiple |
BlazorUI is 100% compatible with shadcn/ui themes. Customize your application's appearance using CSS variables.
You can use any theme from:
Simply copy the CSS variables and paste them into your wwwroot/styles/theme.css file.
Create wwwroot/styles/theme.css:
@layer base {
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.1450 0 0);
--primary: oklch(0.2050 0 0);
--primary-foreground: oklch(0.9850 0 0);
/* ... other variables */
}
.dark {
--background: oklch(0.1450 0 0);
--foreground: oklch(0.9850 0 0);
--primary: oklch(0.9220 0 0);
--primary-foreground: oklch(0.2050 0 0);
/* ... other variables */
}
}Reference it in your App.razor before the BlazorUI CSS:
<link rel="stylesheet" href="styles/theme.css" />
<link rel="stylesheet" href="_content/BlazorUI.Components/blazorui.css" />Dark mode automatically activates when you add the .dark class to the <html> element. All components will switch to dark mode colors.
@using BlazorUI.Components.Dialog
<Dialog>
<DialogTrigger AsChild>
<Button>Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm Action</DialogTitle>
<DialogDescription>
Are you sure you want to proceed?
</DialogDescription>
</DialogHeader>
<p>This action cannot be undone.</p>
<DialogFooter>
<DialogClose AsChild>
<Button Variant="ButtonVariant.Outline">Cancel</Button>
</DialogClose>
<Button Variant="ButtonVariant.Default">Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>Use AsChild on trigger components to use your own styled elements instead of the default button:
<DropdownMenu>
<DropdownMenuTrigger AsChild>
<Button Variant="ButtonVariant.Outline">
Actions
<LucideIcon Name="chevron-down" Size="16" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>This is the industry-standard pattern from Radix UI/shadcn/ui. When AsChild is true, the child component (e.g., Button) automatically receives trigger behavior via TriggerContext.
@using BlazorUI.Components.Label
@using BlazorUI.Components.Input
@using BlazorUI.Components.Checkbox
@using BlazorUI.Components.Button
<div class="space-y-4">
<div>
<Label For="email">Email</Label>
<Input Id="email" Type="InputType.Email" Placeholder="name@example.com" />
</div>
<div class="flex items-center space-x-2">
<Checkbox Id="terms" @bind-Checked="agreedToTerms" />
<Label For="terms">I agree to the terms and conditions</Label>
</div>
<Button Disabled="@(!agreedToTerms)">Submit</Button>
</div>
@code {
private bool agreedToTerms = false;
}Use the Class parameter to add custom CSS classes or Tailwind classes (if you have Tailwind set up):
<Button Class="bg-purple-600 hover:bg-purple-700">
Custom Button
</Button>
<Card Class="border-2 border-purple-500 shadow-xl">
Custom Card Styling
</Card>Note: BlazorUI Components include pre-built CSS and don't require Tailwind. However, you can still use Tailwind classes for customization if you've set up Tailwind in your project.
Build complex UIs by composing components:
<Card>
<CardHeader>
<CardTitle>Settings</CardTitle>
<CardDescription>Manage your account settings</CardDescription>
</CardHeader>
<CardContent class="space-y-4">
<div>
<Label>Email Notifications</Label>
<Switch @bind-Checked="emailNotifications" />
</div>
<Separator />
<div>
<Label>Push Notifications</Label>
<Switch @bind-Checked="pushNotifications" />
</div>
</CardContent>
<CardFooter>
<Button>Save Changes</Button>
</CardFooter>
</Card>BlazorUI.Components follows the shadcn/ui philosophy with zero-configuration deployment:
Use BlazorUI.Components when:
Consider BlazorUI.Primitives when:
For full documentation, examples, and API reference, visit:
Optional:
MIT License - see LICENSE for details.
Contributions are welcome! Please see our Contributing Guide.
Made with ❤️ by the BlazorUI team