60+ production-ready Blazor components built on Tailwind CSS for modern, accessible, and customizable UI experiences in Blazor WebAssembly and Blazor Server applications.
Built for modern Blazor development with developer experience and performance in mind.
Built specifically for Blazor WebAssembly and Blazor Server with native component architecture and strongly-typed parameters.
Built on Tailwind CSS for easy customization with utility classes. Change colors, spacing, and styles without touching component code.
Tested and ready for production use with accessibility, keyboard navigation, and browser compatibility built-in.
60+ components organized into logical categories for every use case.
Get started in minutes with NuGet and Tailwind CSS.
Add to your index.html or _Layout.cshtml:
<link href="https://cdn.tailwindcss.com" rel="stylesheet">Add to _Imports.razor:
@page "/demo"
<!-- Button Component -->
<Button BackgroundColor="bg-purple-600"
HoverBackgroundColor="hover:bg-purple-700">
Click Me
</Button>
<!-- Card Component -->
<Card Title="Welcome" ButtonText="Learn More">
This is card content.
</Card>See components in action with real-world examples.
@page "/example"
@using Noundry.Blazor.Button
<Button BackgroundColor="bg-purple-600"
HoverBackgroundColor="hover:bg-purple-700"
OnButtonClick="HandleClick">
Click Me
</Button>
@code {
private void HandleClick()
{
Console.WriteLine("Button clicked!");
}
}@using Noundry.Blazor.Card
<Card Title="Product Card"
ButtonText="Add to Cart"
OnButtonClick="AddToCart">
<p>Premium quality product with excellent features.</p>
<p class="font-bold text-lg">$29.99</p>
</Card>
@code {
private void AddToCart()
{
// Add item to cart
Console.WriteLine("Item added to cart");
}
}@using Noundry.Blazor.Modal
@using Noundry.Blazor.Button
<Button OnButtonClick="() => showModal = true">
Open Modal
</Button>
<Modal @bind-IsOpen="showModal" Title="Confirm Action">
<p>Are you sure you want to proceed?</p>
<div class="flex gap-4 mt-4">
<Button BackgroundColor="bg-gray-600"
OnButtonClick="() => showModal = false">
Cancel
</Button>
<Button BackgroundColor="bg-purple-600"
OnButtonClick="ConfirmAction">
Confirm
</Button>
</div>
</Modal>
@code {
private bool showModal = false;
private void ConfirmAction()
{
showModal = false;
// Perform action
}
}Comprehensive guides and API references.