Table of Contents
Features ✨
- 60+ daisyUI-native components — organized under daisyUI's own taxonomy: Actions, Data display, Navigation, Feedback, Data input, Layout, and Mockup.
- MudBlazor-compatible API —
Button, Card, Table, IDialogService, ISnackbar, Icons.Material.* let existing MudBlazor apps migrate incrementally, one MudX → X rename at a time.
ThemeProvider theming — a cascading, MudThemeProvider-style component with 35 built-in daisyUI themes, dark-mode resolution via prefers-color-scheme, and SSR-safe persistence to localStorage/cookies.- 54 SVG chart types — line, area, bar, pie and donut through Sankey, treemap, sunburst, chord, network, scatter, box plot, violin, heatmaps, calendar, candlestick with technical indicators, Gantt, radar, gauges, waterfall, funnel, Pareto, combo bar-and-line, Smith, polar, shape (floor plans), 3D columns, choropleth maps and more, with stacked, 100%, step and drill-down variants and a range selector. D3 computes the layout (bundled in the package, no npm), Blazor draws the SVG in the active daisyUI theme's colours, and
DaisyBlazor.Charts.Server renders them on the server for prerendering and static pages.
- Shippable CSS preset — one
@import wires up daisyUI, the theme set, and the class safelist for Tailwind v4 — shipped in the NuGet package, which also runs the Tailwind standalone CLI for you: no Node or npm needed.
dotnet new daisyblazor template — scaffolds a fully wired app (Tailwind, daisyUI, DI) in seconds.- Live documentation — the docs site is a Blazor WebAssembly app built with DaisyBlazor: every component live, with its source, a parameter playground, API tables and all 37 themes.
The problem it solves
Blazor has no first-class Tailwind/daisyUI component story. Today you usually pick one of two paths,
and both have real costs:
- Adopt a heavyweight component framework (MudBlazor, Radzen, …) — you inherit its design language,
its CSS runtime, and its lock-in. Restyling to match a Tailwind/daisyUI design system fights the framework.
- Hand-roll daisyUI markup — you write
<button class="btn btn-primary"> everywhere, then re-implement
theming, dialogs, toasts, form binding, and a Tailwind build by hand in every project.
DaisyBlazor closes that gap:
| Pain | DaisyBlazor |
|---|
| No native daisyUI components for Blazor | 60+ components mapped to daisyUI's own taxonomy (Actions, Data display, Navigation, Feedback, Data input, Layout, Mockup). |
| Migrating off MudBlazor is all-or-nothing | A MudBlazor-compatible API (Button, Card, Table, IDialogService, ISnackbar, Icons.Material.*) — migrate incrementally by renaming MudX → X. |
| Wiring Tailwind + daisyUI + a class safelist is fiddly | A shippable CSS preset — one @import enables daisyUI, the themes, and the dynamic-class safelist. |
| Theming/dark-mode is manual | A parameter-driven ThemeProvider with 35 built-in themes + your own, dark mode, and SSR-safe persistence. |
| Charts mean a heavy JS dependency or a short list | 54 chart types drawn as SVG in the active daisyUI theme, with D3 layouts bundled in the package (no npm) and optional server rendering. |
| Starting a new app is boilerplate | dotnet new daisyblazor scaffolds a wired app in seconds. |
Quick start
Scaffold a new app:
dotnet new install DaisyBlazor.Templates
dotnet new daisyblazor -o MyApp
cd MyApp && dotnet run
…or add it to an existing Blazor app:
dotnet add package DaisyBlazor.Components
<!-- MyApp.csproj: compile Styles/main.css with the Tailwind standalone CLI on every build (no Node/npm) -->
<PropertyGroup>
<DaisyBlazorBuildCss>true</DaisyBlazorBuildCss>
</PropertyGroup>
// Program.cs
builder.Services.AddDaisyBlazor();
/* Styles/main.css — the package copies the preset to obj/daisyblazor/ on every build. */
@import "tailwindcss";
@import "../obj/daisyblazor/preset.css";
@source "./Components/**/*.{razor,cs}";
<Card>
<CardContent>
<h2 class="card-title">Hello DaisyBlazor</h2>
<Tabs>
<Tab Title="One">First panel</Tab>
<Tab Title="Two">Second panel</Tab>
</Tabs>
<Button Color="Color.Primary" StartIcon="@Icons.Material.Filled.Check">OK</Button>
</CardContent>
</Card>
Full setup (CSS pipeline, fonts, DI, theming) is in Getting started.
Usage
Drop a themed chart straight into a page; there is nothing to install from npm:
<LineChart Series="_lineSeries"
Labels="_monthLabels"
Smooth="true"
ShowGrid="true"
ShowPoints="true"
ShowLegend="true"
Title="Monthly signups vs. cancellations" />
Wrap your app in ThemeProvider once to get 35 daisyUI themes, dark-mode detection, and persisted preferences for free:
@* MainLayout.razor *@
<ThemeProvider>
<Router AppAssembly="typeof(Program).Assembly">
...
</Router>
</ThemeProvider>
Add the pre-paint script to <head> in App.razor so the saved theme is applied before first paint (no flash, works on static SSR pages, CSP-friendly):
<script src="_content/DaisyBlazor.Components/theme-init.js"></script>
Explore every component live on the documentation site, or run it locally:
dotnet run --project website
以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗
