🌼 DaisyBlazor

A Tailwind CSS v4 + daisyUI v5 component library for Blazor.
60+ daisyUI-native components, a MudBlazor-compatible API, theming, dialogs, snackbars, dependency-free charts, a shippable CSS preset, and a dotnet new template.

📖 Documentation · Getting started · NuGet

---

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	Dependency-free SVG charts that follow the active daisyUI theme — zero charting runtime.
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 && npm install && dotnet run

…or add it to an existing Blazor app:

dotnet add package DaisyBlazor.Components
npm install -D tailwindcss @tailwindcss/cli daisyui

// Program.cs
builder.Services.AddDaisyBlazor();

/* Styles/main.css — Tailwind v4 source globs are one line per extension (no { } brace groups). */
@import "tailwindcss";
@import "daisyblazor/preset.css";
@source "../**/DaisyBlazor.Components/**/*.razor";
@source "../**/DaisyBlazor.Components/**/*.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.

Packages

Package	Version	Description
DaisyBlazor.Components		The component kit: daisyUI-native components + MudBlazor-compatible surface, ThemeProvider, dialog/snackbar services, and the CSS preset.
DaisyBlazor.Charts		Dependency-free SVG charts (line, area, bar, pie/donut, sparkline) themed by daisyUI.
DaisyBlazor.Templates		dotnet new daisyblazor starter template.
@daisyblazor/tailwind	—	npm package shipping the Tailwind/daisyUI preset for non-.NET build pipelines.

Screenshots

Data display — cards, table, stats, timeline, chat, carousel…	Charts — dependency-free SVG, theme-aware
Data input — inputs, select, range, rating, validation…	Theming — 35 daisyUI themes, light & dark

Run the live gallery yourself: dotnet run --project samples/DaisyBlazor.Gallery.

Repo layout

src/        DaisyBlazor.Components, DaisyBlazor.Charts, DaisyBlazor.Tailwind
samples/    DaisyBlazor.Gallery — a runnable showcase of every component
templates/  DaisyBlazor.Templates — dotnet new template
website/    Astro Starlight documentation site (GitHub Pages)
tests/      bUnit component tests
docs/       markdown source for the docs site
scripts/    update-deps, build-css, pack

Documentation

📖 https://phmatray.github.io/daisyblazor/

• Getting started — install, CSS wiring, DI, fonts.
• Theming — ThemeProvider, built-in & custom themes.
• CSS preset — what preset.css ships and how to wire @source.
• Component reference — every component by daisyUI category.
• Charts — the dependency-free SVG charts.
• Migrating from MudBlazor — the MudX → X map.

Contributing & releasing

See CONTRIBUTING.md for the branch strategy (main / release / feature branches) and the automated release pipeline.

License

MIT