FluentKit.Blazor 0.1.3-alpha

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher.
This is a prerelease version of FluentKit.Blazor.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package FluentKit.Blazor --version 0.1.3-alpha
                    


                    

                
NuGet\Install-Package FluentKit.Blazor -Version 0.1.3-alpha
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="FluentKit.Blazor" Version="0.1.3-alpha" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="FluentKit.Blazor" Version="0.1.3-alpha" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="FluentKit.Blazor" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add FluentKit.Blazor --version 0.1.3-alpha
                    


                    

                
#r "nuget: FluentKit.Blazor, 0.1.3-alpha"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package FluentKit.Blazor@0.1.3-alpha
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=FluentKit.Blazor&version=0.1.3-alpha&prerelease
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=FluentKit.Blazor&version=0.1.3-alpha&prerelease
                    


                            Install as a Cake Tool

<div align="center">

FluentKit

A token-accurate Fluent Design (WinUI 3) component library for Blazor

WebAssembly · Server · MAUI Blazor Hybrid — pure Razor and CSS, no third-party UI framework underneath

NuGet License: MIT CI .NET 10

Live sample · Getting started · Known gaps · Third-party notices

</div> <img width="1912" height="1242" alt="image" src="https://github.com/user-attachments/assets/299a9235-6fc5-4eb4-9c92-64560ebd6cae" />

Design tokens (color, corner radius, state aliases) are transcribed directly from Microsoft's own microsoft-ui-xaml resource dictionaries, and effects like Mica and Acrylic are rebuilt against WinUI's actual effect graph rather than approximated from screenshots. See THIRD_PARTY_NOTICES.md for exactly where each component's markup, styling, or token values were sourced from.

Status: alpha — see the NuGet badge above for the current published version. APIs may still change between versions — see Known gaps.

Contents

What's in here

<table> <tr> <td width="50%" valign="top">

Primitives — Buttons

  • FluentButton (4 variants × 4 states)
  • FluentToggleButton
  • FluentIconButton

</td> <td width="50%" valign="top">

Primitives — Input

  • FluentTextBox
  • FluentPasswordBox
  • FluentNumberBox
  • FluentCheckBox (incl. indeterminate)
  • FluentRadioButton / FluentRadioGroup
  • FluentToggleSwitch
  • FluentSlider

</td> </tr> <tr> <td width="50%" valign="top">

Primitives — Display

  • FluentTextBlock (full type ramp)
  • FluentDivider
  • FluentCard
  • FluentExpander
  • FluentIcon
  • FluentPersonPicture

</td> <td width="50%" valign="top">

Primitives — Status & progress / collections

  • FluentProgressBar
  • FluentProgressRing
  • FluentInfoBadge
  • FluentInfoBar
  • FluentListView

</td> </tr> <tr> <td width="50%" valign="top">

Composite — Overlays

  • FluentTooltip
  • FluentFlyout
  • FluentMenuFlyout / FluentContextMenu
  • FluentContentDialog
  • FluentTeachingTip

</td> <td width="50%" valign="top">

Composite — Pickers & inputs

  • FluentComboBox
  • FluentAutoSuggestBox
  • FluentCalendarView / FluentCalendarDatePicker

</td> </tr> <tr> <td width="50%" valign="top">

Composite — Buttons with menus

  • FluentDropDownButton
  • FluentSplitButton

</td> <td width="50%" valign="top">

Composite — Navigation

  • FluentNavigationView
  • FluentMenuBar
  • FluentPivot

</td> </tr> <tr> <td width="50%" valign="top">

Effects

  • FluentMicaPanel — opaque backdrop material: blurred wallpaper → luminosity blend → color tint → noise, rebuilt against WinUI's real BuildMicaEffectBrush graph
  • FluentAcrylicBrush — translucent, live backdrop-filter blur, Base/Thin kinds
  • FluentRevealBackground — pointer-tracked radial-gradient highlight

</td> <td width="50%" valign="top">

Theming

Light / dark / system, resolved through IThemeService, applied as data-theme on <html>, with live updates on OS prefers-color-scheme changes.

Overlay infrastructure

IOverlayService + FluentOverlayHost + OverlaySurface — a portal layer for anything rendering outside its parent's layout flow (tooltips, flyouts, context menus, teaching tips).

</td> </tr> </table>

Getting started

1. Install

Recommended — from NuGet:

dotnet add package FluentKit.Blazor

dotnet add package pins the exact current version automatically — the current published version is always shown in the NuGet badge at the top of this README. If editing your .csproj by hand, pin a specific version rather than using a floating wildcard, for reproducible builds:

<PackageReference Include="FluentKit.Blazor" Version="0.1.0-alpha" />

Alternatively, to track main directly, consume it as a project or repository reference instead:

git clone https://github.com/VibeNoobNotFound/FluentKit.git

<ItemGroup>
  <ProjectReference Include="..\FluentKit\src\FluentKit\FluentKit.csproj" />
</ItemGroup>

2. Link the token stylesheet

wwwroot/index.html (WASM) or Pages/_Host.cshtml / App.razor (Server):

<link rel="stylesheet" href="_content/FluentKit/Tokens/tokens.css" />

3. Register theming

Program.cs:

builder.Services.AddScoped<IThemeService, ThemeService>();

4. Wrap your root component

<ThemeProvider>
    <FluentOverlayHost>
        @Body
    </FluentOverlayHost>
</ThemeProvider>

ThemeProvider resolves and applies the theme on first render; FluentOverlayHost is required by any composite control built on the overlay service (tooltips, flyouts, menus, dialogs, teaching tips).

5. Use components

<FluentButton Variant="FluentButtonVariant.Accent">Save changes</FluentButton>

Running the sample

samples/FluentKit.Sample.Wasm demos every component above, including theme switching, the page background rendered through FluentMicaPanel over a real wallpaper image, Mica Base vs. Base Alt side by side, and FluentAcrylicBrush cards live-blurring that Mica background behind them.

git clone https://github.com/VibeNoobNotFound/FluentKit.git
cd FluentKit
dotnet restore
dotnet run --project samples/FluentKit.Sample.Wasm

Requires the .NET 10 SDK. A hosted build is also published to vibenoobnotfound.github.io/FluentKit.

Theming

Three modes, matching WinUI: System (tracks the OS/browser preference live), Light, and Dark.

@inject IThemeService ThemeService

await ThemeService.SetModeAsync(ThemeMode.Dark);

The token layer is split so consumers only ever need to link one file:

File Purpose
_primitives.css Theme-independent primitive values (raw color ramps, spacing, corner radius)
_semantic.light.css / _semantic.dark.css Semantic aliases transcribed from WinUI's own XAML resource dictionaries, mirrored property-for-property
tokens.css Single entry point importing both layers — the only file consumers should link directly

Project layout

src/FluentKit/
  Theming/       IThemeService, ThemeProvider, theme-interop.js
  Primitives/    One folder per primitive component (.razor / .razor.cs / .razor.css)
  Composite/     One folder per composite control, built on Overlay/ where applicable
  Overlay/       IOverlayService, FluentOverlayHost, OverlaySurface
  Effects/       Mica, Acrylic, Reveal
  wwwroot/       Tokens, per-component JS interop modules, icon webfont
samples/
  FluentKit.Sample.Wasm/   Blazor WASM host demoing every component

Each component folder follows the same three-file convention: .razor for markup, .razor.cs for the code-behind, .razor.css for CSS-isolated styles. Components that need pointer/DOM measurement (drag tracking, overlay positioning, pointer-relative gradients) pair with a small JS interop module under wwwroot/, matched folder-for-folder with the component that consumes it.

CSS isolation gotcha

A Razor Class Library's own component-scoped stylesheet (_content/FluentKit/FluentKit.bundle.scp.css) is not meant to be linked directly and will 404 if you try. The host app's build generates its own bundle ({HostAssemblyName}.styles.css, served flat from the app's own root) which internally @imports every referenced RCL's bundle. Only link the host app's own generated stylesheet — see samples/FluentKit.Sample.Wasm/wwwroot/index.html for a working example.

Related: any markup built via RenderTreeBuilder in a .cs file does not get a component's CSS isolation scope attribute, so .razor.css styles silently won't apply to it. Define dynamically-shown markup as Razor template fields (RenderFragment x = @<span>...</span>;) inside the .razor file's @code block instead.

Known gaps / next up

  1. Accent color tokens (--accent-fill-color-default etc.) are still placeholders (Windows' default blue), not derived from the user's actual system accent color — flagged TODO in both _semantic.*.css files.
  2. No automated tests yet (tests/ doesn't exist) — bUnit plus Playwright screenshot tests pinned against real WinUI 3 screenshots are planned.
  3. No published docs/demo site yet, beyond the sample app.
  4. No High Contrast theme (a third theme alongside light/dark, mirroring WinUI's own HighContrast resource key) — Theming/ currently only resolves light/dark/system.
  5. overlay-interop.js only flips vertically (below to above); full 4-direction collision handling (left/right flipping too) hasn't been needed yet, but would matter for a dropdown pinned near a viewport edge.
  6. FluentTeachingTip's beak is positioned from the requested placement, not whatever overlay-interop.js actually flipped it to — fine as long as there's room, but the beak won't flip sides if the tip itself gets flipped.

Contributing

Issues and pull requests are welcome. If you're adding or changing a component, please also update THIRD_PARTY_NOTICES.md when markup, styling structure, or token values are derived from an external source.

License

MIT — see LICENSE. See THIRD_PARTY_NOTICES.md for attribution of design tokens, ported component structure, and bundled assets (fluent-svelte, microsoft-ui-xaml, Fluent System Icons).

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.2.2 41 7/16/2026
0.2.1 42 7/16/2026
0.2.0 42 7/15/2026
0.2.0-alpha 36 7/15/2026
0.1.8 41 7/15/2026
0.1.7 43 7/15/2026
0.1.6 48 7/15/2026
0.1.5-alpha 44 7/15/2026
0.1.3-alpha 36 7/15/2026
0.1.2-alpha 36 7/14/2026
0.1.1-alpha 37 7/14/2026
0.1.0-alpha 46 7/14/2026

https://github.com/VibeNoobNotFound/FluentKit/releases