Skip to content
BlazorUI

Documentation

bit BlazorUI

v10.6.0 MIT licensed .NET 8, 9 and 10

An open-source suite of native components written entirely in C#, rendering unchanged under WebAssembly, Server, Hybrid (MAUI) and pre-rendering. This page is the whole library in one read: what is in the box, how to install it, how it is put together, what it costs you, and where it runs.

At a glance

99 Components, in 13 categories
100% C# No JavaScript framework underneath
4 presets Fluent, Fluent 2, Material, Cupertino
~50 KB For the first five components you use
.NET 8+ WASM, Server, Hybrid and static SSR
MIT Free in commercial products, no per-seat fee

What is in the box

Every component the library ships, grouped the way the navigation groups them. A category goes straight to that part of the gallery.

Buttons 5 Trigger actions, open menus, and hold a pressed state. Inputs 14 Collect and validate everything a form needs. Pickers 5 Drop-down controls for dates, times, and colors. Layouts 6 Structure a page: headers, footers, grids, and stacks. Lists 4 Render collections as lists, carousels, and timelines. Navs 6 Move people around an app and show them where they are. Notifications 5 Tell people what happened, and how important it was. Progress 3 Show that work is happening, and how far along it is. Surfaces 11 Containers that hold content: cards, dialogs, panels, popovers. Utilities 14 Small building blocks the other components are made of. Extras 18 Larger components that ship in the separate Extras package. Legacy 6 Previous implementations, kept unchanged for backward compatibility. Theming 2 Ready-made chrome for switching design system, scheme, and accent.
Browse all 99 components - every one with a live demo and its full API

Quick start

Three steps from an empty Blazor project to a working component.

1. Install the package

dotnet add package Bit.BlazorUI

2. Add the styles and scripts

<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></script>

3. Use a component

@using Bit.BlazorUI

<BitButton Size="BitSize.Large" IconName="@BitIconName.Add">
    Click me
</BitButton>

<BitTextField Label="Enter your name" Placeholder="Name" />

<BitDatePicker Label="Select a date" />
The full getting started guide - optional packages, cache busting, MCP

Start from the project template

A clean solution wired for theming, SSR and responsive layouts, so the first commit is your app rather than its setup.

Install the template once:

dotnet new install Bit.BlazorEmpty

Then create an app from it:

dotnet new bit-empty -n MyBitBlazorEmptyApp

The packages

One package is required. The others exist so that an app only ships the parts it asked for.

Bit.BlazorUI Required

The library itself: every component in the categories above except Extras and Legacy, the theme runtime, and the Fluent design system the core stylesheet implements.

Bit.BlazorUI.Extras Optional

The heavier components - the data grid, the native charts, the map, the PDF viewer and the editors - together with the Fluent 2, Material and Cupertino design system presets. Every component page says which package it comes from.

Bit.BlazorUI.Icons Optional

The Fabric (MDL2) icon set that BitIconName names, shipped as a font and browsable on the iconography page.

Bit.BlazorUI.Assets Optional

The Segoe UI and Roboto web fonts behind the Fluent and Material type ramps, for clients that do not have them installed - plus the Script and Link components that fingerprint a static asset by its content.

Bit.BlazorUI.Legacy Optional

The previous implementations of the chart, the grid, the editors and the PDF reader, preserved unchanged under their own namespace so an upgrading project can run both generations side by side.

Bit.BlazorEmpty Template

A dotnet new template rather than a dependency: the starting solution from the section above, already wired for theming, SSR and responsive layouts.

How it is built

Six decisions that shape every component in the library - and that are close to impossible to retrofit into one later.

  1. Native C#, not a wrapper

    Every component is a Blazor component rather than a thin layer over a JavaScript widget. Even the ones you would expect to need a JS library - the PDF viewer, the markdown renderer and editor, the charts - are drawn by the library itself. That is the reason one piece of markup works under every render mode instead of only the interactive ones.

  2. One API, learned once

    Every component inherits the same base parameters - Class, Style, Id, Dir, IsEnabled, Visibility, TabIndex, AriaLabel, HtmlAttributes and ForceAnimation. Learn them on the first component and you already know them on all 99.

  3. Styled by tokens, not by cascade

    Color, shape, size, type, motion and elevation are --bit-* custom properties that every component reads. A theme is therefore data you set on :root, not a stylesheet you fork or an !important you have to win with - which is how four design systems re-skin the whole library from one block of variables.

  4. Direction, keyboard and motion are defaults

    Dir is a parameter on every component, so right-to-left is a direction rather than a stylesheet added later. Keyboard support and ARIA semantics arrive with the component, and prefers-reduced-motion is honoured by the motion tokens themselves, so it takes effect everywhere at once rather than component by component.

  5. You pay for what you render

    There is no barrel to import and no framework runtime to load before the first component appears. Nothing is pulled into the app that it did not use, which is what keeps the figures below as low as they are.

  6. Documented for people and for agents

    Every component has a page with live examples and its full API table. The same catalog is served over MCP, so GitHub Copilot, Cursor, Claude and Windsurf write against the real API instead of guessing at it - set it up here.

What it costs

Measured on a published WebAssembly app - dll, css and js together, on top of the framework the app already ships:

What you use Roughly adds
Five components 50 KB
Forty components 200 KB
The whole suite 400 KB

Where it runs

The same component, the same parameters and the same markup under all four Blazor render modes - and on the browsers and devices below.

WebAssembly

Standalone or ASP.NET Core hosted, with the whole library running in the browser.

Server

Interactive circuits over SignalR, rendered on the server and patched into the DOM over the wire.

Hybrid

.NET MAUI on Android, iOS, macOS and Windows, through a BlazorWebView.

Static SSR and pre-rendering

Real HTML on the first response, which the component picks up from once interactivity arrives.

Browsers and platforms

Verified on the current release of each, for desktop and mobile.

Browsers

  • Apple Safari (current+)
  • Google Chrome (current+)
  • Microsoft Edge (current+)
  • Mozilla Firefox (current+)

Blazor Hybrid platforms

  • Android 7.1 (API level 24) or higher
  • iOS 15 or higher
  • macOS 12 (Monterey) or higher
  • Windows 7 SP1 or higher

License, versions and support

What using the library commits you to, and who is on the other end when something does not work.

MIT, and that is all

Free in commercial products, with no per-developer fee, no per-application fee and nothing you have to display in your own UI. The license(opens in a new tab) is the whole agreement.

One package, three .NET versions

Bit.BlazorUI multi-targets .NET 8, 9 and 10, so moving the app to a newer framework does not mean changing the package reference. These docs describe v10.6.0.

Built in the open

A dedicated team at bit platform develops the library on the same repository you file an issue on. Ask in discussions(opens in a new tab), report a bug in issues(opens in a new tab).

Resources

Where to go next, and where to go when something does not work.

Components Live demos and the full API for all 99 components. Theming Design tokens, presets, dark mode, and the theme factory. Iconography The full Fabric (MDL2) icon set, searchable and copyable. Playground A ready-to-use GitHub Codespace - no local setup to try something. DeepWiki An AI-oriented wiki for troubleshooting and deeper technical detail. GitHub Source, issues, discussions, roadmap and release notes.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.