Windzor 1.0.0

Windzor

Admin dashboard components for Blazor, styled with Tailwind CSS v4.

Live demo: https://agriffard.github.io/Windzor/

Components

Services: IToastService (toasts), IDialogService (await Dialogs.ConfirmAsync(...) — requires a <WzDialogProvider /> in the layout) and IClipboardService (await Clipboard.CopyAsync(...)).

All components support dark mode out of the box (dark class on <html>, toggled by WzThemeToggle and persisted in localStorage).

All built-in strings are localizable: AddWindzor(loc => loc.TableEmpty = "Aucune donnée.") sets them globally, or cascade a WzLocalization instance for a subtree. Explicit parameters always win.

Getting started

dotnet add package Windzor

The package ships a prebuilt stylesheet — no Node or Tailwind tooling needed. In wwwroot/index.html:

<link rel="stylesheet" href="_content/Windzor/windzor.css" />
<script>
    // Apply the saved theme before Blazor boots to avoid a flash of light theme.
    (function () {
        var theme = localStorage.getItem('windzor-theme');
        var dark = theme ? theme === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.classList.toggle('dark', dark);
    })();
</script>

In Program.cs:

using Windzor;

builder.Services.AddWindzor();

In _Imports.razor:

@using Windzor

Place a <WzToaster /> and a <WzDialogProvider /> once in your layout, then inject the services anywhere:

@inject IToastService Toasts
@inject IDialogService Dialogs

Toasts.Success("Saved.");

if (await Dialogs.ConfirmAsync("Delete project?", "This cannot be undone.", confirmText: "Delete", danger: true))
{
    // delete it
}

Note (Blazor Server): AddWindzor() registers IToastService as a singleton, which fits WebAssembly. On Blazor Server, register it scoped instead so toasts stay per-circuit.

Example

<WzDashboardLayout>
    <SidebarContent>
        <WzSidebar>
            <Brand><a href="">My App</a></Brand>
            <ChildContent>
                <WzSidebarItem Href="" Match="NavLinkMatch.All">Dashboard</WzSidebarItem>
                <WzSidebarItem Href="orders">Orders</WzSidebarItem>
            </ChildContent>
        </WzSidebar>
    </SidebarContent>
    <HeaderContent>
        <WzTopBar>
            <Actions><WzThemeToggle /></Actions>
        </WzTopBar>
    </HeaderContent>
    <ChildContent>
        @Body
        <WzToaster />
    </ChildContent>
</WzDashboardLayout>

Using your own Tailwind build

If your app already runs Tailwind CSS v4, skip the prebuilt stylesheet and scan the library sources instead, so utilities are deduplicated and tree-shaken together:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@source "../path/to/your/**/*.razor";

See samples/Windzor.Sample for the full integrated setup.

Theming

Components are styled with CSS-first @theme tokens, so a consumer running their own Tailwind build can rebrand without touching component code:

@import "tailwindcss";

@theme {
    /* Brand color: redefine the primary palette (50–950). */
    --color-primary-500: oklch(0.72 0.15 160);
    --color-primary-600: oklch(0.63 0.14 160);
    --color-primary-700: oklch(0.53 0.12 160);

    /* Corner radius used by every component (default 0.5rem / 0.75rem). */
    --radius-wz: 0.25rem;
    --radius-wz-lg: 0.375rem;
}

If you use the prebuilt stylesheet instead, override the same custom properties in a :root { … } block after the windzor.css link.

Development

Requires the .NET 10 SDK and Node 22+.

npm ci
dotnet build Windzor.slnx
dotnet test Windzor.slnx --no-build
dotnet run --project samples/Windzor.Sample

The Tailwind CLI runs automatically inside the build (MSBuild TailwindBuild target). To build without Node available, pass /p:SkipTailwind=true (works as long as the generated CSS exists from a previous build).

Releasing

• CI (ci.yml): builds the solution on every push and pull request to main.
• GitHub Pages (pages.yml): publishes the sample dashboard to https://agriffard.github.io/Windzor/ on every push to main. Requires Pages source set to GitHub Actions in the repository settings.
• NuGet (nuget.yml): packs and pushes to NuGet.org when a v* tag is pushed (version comes from the tag via MinVer). Requires a NUGET_API_KEY repository secret.

git tag v0.1.0
git push origin v0.1.0

License

MIT