Getting started

Command line - run this in your project directory:

dotnet add package Bit.BlazorUI

Package Manager Console - in Visual Studio:

Install-Package Bit.BlazorUI

Visual Studio - or use the NuGet Package Manager UI and search for Bit.BlazorUI.

dotnet add package Bit.BlazorUI.Extras

dotnet add package Bit.BlazorUI.Assets

dotnet add package Bit.BlazorUI.Icons

Add this line to your app's _Imports.razor:

@using Bit.BlazorUI

Open App.razor (or index.html in a standalone WASM app) and add the stylesheet:

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

Then the script:

<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></script>

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

<link href="_content/Bit.BlazorUI.Assets/styles/bit.blazorui.assets.css" rel="stylesheet" />

<link href="_content/Bit.BlazorUI.Icons/styles/bit.blazorui.icons.css" rel="stylesheet" />

On .NET 9 or later, the built-in @Assets[""] feature fingerprints the resource files for you.

bit BlazorUI also publishes its own version, which you can append as a query string:

<script src="_content/Bit.BlazorUI/scripts/[email protected]"></script>

Note: that expression only works in App.razor. For other root files - index.html in a standalone WASM project, for instance - the version has to be added another way.

<Script Src="_content/Bit.BlazorUI/scripts/bit.blazorui.js"></Script>

<script src="_content/Bit.BlazorUI/scripts/bit.blazorui.js?v=sha256-Z5yBv0K89OBRVurhAVzatpp3aGXsNn00e3GzQiTq_Z4"></script>

<Link Href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />

<link href="_content/Bit.BlazorUI/styles/bit.blazorui.css?v=sha256-VI6BIGZLTtmyhn3V-4RH-Yyi0Ud3p0g5dHvByeaoZ9Y" rel="stylesheet" />

Some of the older components were re-implemented with new APIs - the native SVG BitChart, the new BitDataGrid, BitMarkdownViewer, BitMarkdownEditor, BitRichTextEditor and BitPdfViewer. Their previous versions are preserved unchanged in Bit.BlazorUI.Legacy, under their own namespace, so the two generations can live side by side without conflict.

The package ships:

• BitChartLegacy - the original Chart.js based charting component.
• BitDataGridLegacy - the original data grid (previously renamed to BitQuickGrid).
• BitMarkdownViewerLegacy - the original marked.js based markdown viewer.
• BitMarkdownEditorLegacy - the original markdown editor.
• BitRichTextEditorLegacy - the original Quill based rich text editor.
• BitPdfReaderLegacy - the original pdf.js based PDF reader.

1. Install the package:

dotnet add package Bit.BlazorUI.Legacy

2. Import the namespace in _Imports.razor:

@using Bit.BlazorUI.Legacy

3. Register its services (this also registers the core bit BlazorUI services):

services.AddBitBlazorUILegacyServices();

4. Add its stylesheet and script:

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

The endpoint is https://blazorui.bitplatform.dev/mcp, and it works with GitHub Copilot, Cursor, Claude, Windsurf and anything else that speaks MCP.

Register the server

.vscode/mcp.json

{
    "servers": {
        "bitBlazorUI": {
            "type": "http",
            "url": "https://blazorui.bitplatform.dev/mcp"
        }
    }
}

mcp.json

{
  "mcpServers": {
    "bitBlazorUI": {
      "type": "http",
      "url": "https://blazorui.bitplatform.dev/mcp",
      "tools": [
        "*"
      ]
    }
  }
}

Tell the agent to use it

Add these rules to your agents.md, copilot-instructions.md, .cursor/rules, or whatever your agent reads:

### bit BlazorUI

- For all UI-related tasks in this Blazor project, you **MUST** use the bit BlazorUI MCP server.
- Always start component discovery with the `GetBitBlazorUIComponentsList` tool.
- For detailed API, parameters, and usage examples, call `GetBitBlazorUIComponentExamples`.
- Prefer `Bit*` components over plain HTML/CSS or other UI libraries.
        

Tip: many agents - Cursor and Claude in particular - pick up the server automatically once those instructions are in place.