ShadCn.Blazor is a Blazor component library inspired by shadcn/ui. It provides accessible, customizable, open source UI components for Blazor WebAssembly and Blazor Server, with a default theme driven by CSS variables. Components are pure Blazor and require no JavaScript/JS interop at runtime.
- Built for .NET 8+ and both Blazor WebAssembly and Blazor Server.
- No JavaScript/JS interop required at runtime.
- Single package install.
- Dark mode support via a
darkclass on thehtmlelement. - Easy customization through CSS variables and a
Classparameter on components.
- .NET 8.0 or later
- Blazor WebAssembly or Blazor Server project
dotnet add package ShadCn.Blazor.ComponentsPackage Manager Console:
Install-Package ShadCn.Blazor.ComponentsAdd this to index.html (WebAssembly) or _Host.cshtml / App.razor (Server):
<link rel="stylesheet" href="_content/ShadCn.Blazor.Theme.Default/theme.css" />The theme uses CSS variables for colors. Values are in HSL format without the hsl() wrapper.
Add this to Program.cs:
builder.Services.AddShadCnBlazorComponents();Add using ShadCn.Blazor.Components; if needed.
Add component namespaces to your _Imports.razor:
@using ShadCn.Blazor.Components
@using ShadCn.Blazor.Components.Alert
@using ShadCn.Blazor.Components.Badge
@using ShadCn.Blazor.Components.Button
@using ShadCn.Blazor.Components.Card
@using ShadCn.Blazor.Components.Input
@using ShadCn.Blazor.Components.Separator<Button>Click me</Button>
<Card>
<CardHeader>
<CardTitle>Welcome</CardTitle>
<CardDescription>Get started with ShadCn.Blazor</CardDescription>
</CardHeader>
<CardContent>
<p>Your content here</p>
</CardContent>
</Card>Add the dark class to your html element:
<html class="dark">
...
</html>You can toggle dark mode by adding/removing the class (for example via JavaScript or a persisted user preference).
All components accept a Class parameter for additional Tailwind CSS classes:
<Button Class="w-full">Full Width Button</Button>
<Card Class="max-w-md mx-auto">...</Card>Override colors by redefining the CSS variables in your own stylesheet (loaded after theme.css). Values use HSL format without the hsl() wrapper:
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
/* Sidebar (defaults inherit from the above) */
--sidebar: var(--background);
--sidebar-foreground: var(--foreground);
--sidebar-primary: var(--primary);
--sidebar-primary-foreground: var(--primary-foreground);
--sidebar-accent: var(--accent);
--sidebar-accent-foreground: var(--accent-foreground);
--sidebar-border: var(--border);
--sidebar-ring: var(--ring);
}Override dark mode with .dark { ... }. Override fonts with @theme { --font-sans: ...; }.
Tip: use https://ui.shadcn.com/themes to generate color palettes, then copy the CSS variables into your project.