Skip to content
DaisyBlazor

Getting started

DaisyBlazor is a Tailwind CSS v4 + daisyUI v5 component kit for Blazor (Server or WebAssembly). This guide adds it to an existing app. To start from scratch, use the template instead:

Terminal window
dotnet new install DaisyBlazor.Templates
dotnet new daisyblazor -o MyApp

1. Add the package

Section titled “1. Add the package”
Terminal window
dotnet add package DaisyBlazor.Components
# optional: dependency-free SVG charts
dotnet add package DaisyBlazor.Charts

2. Add the front-end build tools

Section titled “2. Add the front-end build tools”

DaisyBlazor styles are generated by Tailwind at build time. Add the CLI + daisyUI to the web project:

Terminal window
npm init -y
npm install -D tailwindcss @tailwindcss/cli daisyui

package.json scripts:

{
  "scripts": {
    "build:css": "tailwindcss -i ./Styles/main.css -o ./wwwroot/css/app.css --minify",
    "watch:css": "tailwindcss -i ./Styles/main.css -o ./wwwroot/css/app.css --watch"
  }
}

3. Author your stylesheet

Section titled “3. Author your stylesheet”

Create Styles/main.css:

@import "tailwindcss";
@import "daisyblazor/preset.css";  /* daisyUI plugin + neutral themes + dynamic-class safelist */


/* Let Tailwind see the classes used INSIDE the packaged components.
   Point this at wherever DaisyBlazor.Components is restored (project ref or NuGet cache). */
@source "../../**/DaisyBlazor.Components/**/*.{razor,cs}";

The @import "daisyblazor/preset.css" path resolves through the @daisyblazor/tailwind npm package, or copy preset.css from the NuGet package’s staticwebassets/styles folder. See CSS preset for the details.

Then build it (once, or watch:css during development) and link the output in your host page (App.razor / index.html):

<link rel="stylesheet" href="@Assets["css/app.css"]" />
<!-- Icons rendered by the Icon component + Icons.Material.* -->
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

4. Register services

Section titled “4. Register services”

Program.cs:

using DaisyBlazor;


builder.Services.AddDaisyBlazor();   // ISnackbar + IDialogService

_Imports.razor:

@using DaisyBlazor
@using DaisyBlazor.Theming

5. Wrap your layout in the theme provider + hosts

Section titled “5. Wrap your layout in the theme provider + hosts”

In your main layout, add the ThemeProvider (dark mode + theme switching) and the dialog/snackbar hosts so services can render into them:

<ThemeProvider>
    @Body


    <DialogProvider />
    <SnackbarProvider />
</ThemeProvider>

6. Use components

Section titled “6. Use components”
<Card>
    <CardContent>
        <h2 class="card-title">Hello DaisyBlazor</h2>
        <p>60+ daisyUI components with a MudBlazor-compatible API.</p>
        <Tabs>
            <Tab Title="One">First panel</Tab>
            <Tab Title="Two">Second panel</Tab>
        </Tabs>
        <CardActions>
            <Button Color="Color.Primary" StartIcon="@Icons.Material.Filled.Check">OK</Button>
        </CardActions>
    </CardContent>
</Card>

Next: Theming · CSS preset · Components