Table of Contents

• Features ✨
• The problem it solves
• Quick start
• Usage
• Packages
• Screenshots
• Repo layout
• Documentation
• Tech Stack
• Roadmap 🗺️
• Contributing & releasing
• License

🌼 DaisyBlazor

A Tailwind CSS v4 + daisyUI v5 component library for Blazor.
60+ daisyUI-native components, a MudBlazor-compatible API, theming, dialogs, snackbars, 54 theme-aware chart types, a shippable CSS preset, and a dotnet new template.

📖 Documentation · Getting started · NuGet

---

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

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		54 SVG chart types (line, bar, pie through Sankey, treemap, heatmaps, gauges…) themed by daisyUI.
DaisyBlazor.Charts.Server		Optional: renders the charts on the server (prerendering, static SSR) with Jint, no Node.
DaisyBlazor.Templates		dotnet new daisyblazor starter template.

Screenshots

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

Run the docs site yourself: dotnet run --project website.

Repo layout

src/        DaisyBlazor.Components, DaisyBlazor.Charts
templates/  DaisyBlazor.Templates — dotnet new template
website/    documentation site — Blazor WebAssembly, built with DaisyBlazor (GitHub Pages)
tests/      bUnit component tests
docs/       markdown guides, readable on GitHub (the site carries the live versions)
scripts/    update-deps, gen-styles, pack, test-template

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 install it.
• Component reference — every component by daisyUI category.
• Charts — the 54 SVG chart types and server rendering.
• Migrating from MudBlazor — the MudX → X map.

Tech Stack

• .NET 10
• DaisyBlazor.Components
• DaisyBlazor.Charts
• bunit
• Shouldly
• xunit.v3
• xunit.runner.visualstudio

Roadmap 🗺️

• Grow chart coverage beyond line/area/bar/pie/donut/sparkline (e.g. radar, scatter)
• Add more MudBlazor-compatible surfaces to ease larger migrations
• Expand the dotnet new daisyblazor template with more starter layouts
• Broaden bUnit test coverage across the component set

Track progress and proposals in the open issues.

Contributing & releasing

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

License

MIT