Blazor Blueprint

Beautiful UI components for Blazor, built with accessibility in mind. Inspired by shadcn/ui.

<a href="https://blazorblueprintui.com"> <img src=".github/assets/hero.png" alt="Blazor Blueprint - Beautiful Components for Blazor" /> </a> <a href="https://blazorblueprintui.com">Documentation</a> · <a href="https://blazorblueprintui.com/components">Components</a> · <a href="https://blazorblueprintui.com/primitives">Primitives</a> 100+ Components · 11 Chart Types · 3,200+ Icons

Why Blazor Blueprint?
AI Integration
Getting Started
Components
Primitives
Icons
Theming
Localization
Architecture
Demo Applications
Contributing
License
Acknowledgments

Why Blazor Blueprint?

Blazor developers lack a modern, design-system-first UI library equivalent to what React developers have with shadcn/ui. Blazor Blueprint fills that gap — pre-built components and headless primitives that integrate directly with Tailwind and shadcn themes, targeting .NET 8 across Server, WebAssembly, and Auto render modes.

Zero Configuration — Pre-built CSS included. No Tailwind setup, no Node.js, no build tools required.
Full shadcn/ui Theme Compatibility — Use themes from shadcn/ui or tweakcn directly.
Built with Accessibility in Mind — Includes ARIA attributes, keyboard support, and semantic HTML structure.
Dark Mode Built-in — Light and dark themes with CSS variables, ready out of the box.
Two-Layer Architecture — Use pre-styled components for speed, or headless primitives for full control.

AI Integration

Blazor Blueprint ships with a built-in MCP server and llms.txt — so Claude, Cursor, Copilot, and Windsurf generate correct component code on the first try.

MCP Server — 11 tools give your AI structured access to every component, pattern, and API.
llms.txt — 100+ machine-optimized docs so any LLM can understand the library without hallucinating.
Works Everywhere — Claude Code, Cursor, GitHub Copilot, Windsurf — any MCP-compatible AI tool.

npx blazorblueprint add mcp-server

Learn more at blazorblueprintui.com.

Getting Started

Installation

# Styled components (includes Primitives)
dotnet add package BlazorBlueprint.Components

# Or just headless primitives for custom styling
dotnet add package BlazorBlueprint.Primitives

Optionally add an icon library:

dotnet add package BlazorBlueprint.Icons.Lucide      # 1,640+ icons
dotnet add package BlazorBlueprint.Icons.Heroicons    # 1,288 icons (4 variants)
dotnet add package BlazorBlueprint.Icons.Feather      # 286 icons

Project Template

The fastest way to start a new project:

dotnet new install BlazorBlueprint.Templates
dotnet new blazorblueprint -n MyApp

Setup

1. Register services in Program.cs:

builder.Services.AddBlazorBlueprintComponents();

2. Add imports to _Imports.razor:

@using BlazorBlueprint.Components

3. Add CSS to your App.razor <head>:

<!-- Your theme variables (optional) -->
<link rel="stylesheet" href="styles/theme.css" />
<!-- Blazor Blueprint styles -->
<link rel="stylesheet" href="_content/BlazorBlueprint.Components/blazorblueprint.css" />

4. Add BbPortalHost to your root layout (required for overlays like Dialog, Sheet, Popover):

@inherits LayoutComponentBase

<div class="min-h-screen bg-background">
    @Body
</div>

<BbPortalHost />

5. Use components:

<BbButton Variant="ButtonVariant.Default">Click me</BbButton>

<BbDialog>
    <BbDialogTrigger>
        <BbButton>Open Dialog</BbButton>
    </BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Welcome</BbDialogTitle>
            <BbDialogDescription>
                Beautiful Blazor components inspired by shadcn/ui.
            </BbDialogDescription>
        </BbDialogHeader>
        <BbDialogFooter>
            <BbDialogClose>
                <BbButton Variant="ButtonVariant.Outline">Close</BbButton>
            </BbDialogClose>
        </BbDialogFooter>
    </BbDialogContent>
</BbDialog>

Components

Blazor Blueprint includes 99 styled components organized into the following categories.

Enterprise Components

Production-ready components for complex data-driven applications:

| Component | Description | |-----------|-------------| | Dashboard Grid | Drag-and-drop, resizable widget layout for composing dashboards. Built on CSS Grid with responsive breakpoints, state persistence, keyboard accessibility, and loading/empty states. | | DataGrid | Full-featured data grid with multi-column sorting, per-column filtering, row grouping with aggregates, hierarchical tree data, row selection, expandable rows, virtualization, context menus, pinned columns, column reordering/resizing/visibility, and state persistence. Supports IQueryable, IEnumerable, and ItemsProvider data sources. | | Dynamic Form | Schema-driven form rendering — define fields, validation rules, and layout in a schema object, and the component generates the complete form with appropriate inputs, conditional visibility, and error display. | | Filter Builder | Visual query builder for constructing complex filter expressions with AND/OR logic, nested condition groups, and type-aware operators. Pairs with DataGrid for interactive data exploration. | | Form Wizard | Multi-step form wizard with progress indicators, per-step validation, optional/skippable steps, and navigation controls. | | Chart | 11 chart types (Area, Bar, Candlestick, Funnel, Gauge, Heatmap, Line, Pie, Radar, Radial Bar, Scatter) built on Apache ECharts with a declarative composition API and automatic theme integration. | | Rich Text Editor | WYSIWYG editor with formatting toolbar and HTML output. | | Markdown Editor | Toolbar formatting with split-pane live preview. |

Form & Input

| Component | Description | |-----------|-------------| | Button | Multiple variants (default, destructive, outline, secondary, ghost, link) with loading state and icon support | | Button Group | Visually group related buttons with connected styling | | Calendar | Interactive calendar with date constraints and range selection | | Checkbox | Checkbox with indeterminate state and ARIA attributes | | Checkbox Group | Group of checkboxes with select-all support | | Color Picker | Color selection with swatches and custom input | | Combobox | Searchable autocomplete dropdown | | Currency Input | Currency-formatted numeric input with locale support | | Date Picker | Date picker with popover calendar and formatting options | | Date Range Picker | Dual-calendar range selection | | Dynamic Form | Schema-driven form rendering — generates complete forms from a definition with automatic input selection, validation, conditional visibility, and layout customization | | Field | Combines label, control, description, and error for structured forms | | Filter Builder | Visual query builder for data filter expressions with AND/OR logic, condition groups, and two-way binding | | File Upload | Drag-and-drop file upload with preview | | Form Field Checkbox | Pre-configured checkbox field with built-in label, description, and validation | | Form Field Checkbox Group | Pre-configured checkbox group field with built-in label, description, and manual validation | | Form Field Combobox | Pre-configured combobox field with built-in label, description, and validation | | Form Field Currency Input | Pre-configured currency input field with built-in label, description, and validation | | Form Field Date Picker | Pre-configured date picker field with built-in label, description, and validation | | Form Field Date Range Picker | Pre-configured date range picker field with built-in label, description, and manual validation | | Form Field File Upload | Pre-configured file upload field with built-in label, description, and manual validation | | Form Field Input | Pre-configured input field with built-in label, description, and validation | | Form Field Input OTP | Pre-configured OTP input field with built-in label, description, and validation | | Form Field Masked Input | Pre-configured masked input field with built-in label, description, and validation | | Form Field MultiSelect | Pre-configured multi-select field with built-in label, description, and validation | | Form Field Native Select | Pre-configured native select field with built-in label, description, and validation | | Form Field Numeric Input | Pre-configured numeric input field with built-in label, description, and validation | | Form Field RadioGroup | Pre-configured radio group field with built-in label, description, and validation | | Form Field Select | Pre-configured select field with built-in label, description, and validation | | Form Field Switch | Pre-configured switch field with built-in label, description, and validation | | Form Field Tag Input | Pre-configured ta

Ui

Install / Use

README