Beautiful UI components for Blazor, built with accessibility in mind. Inspired by shadcn/ui.
Documentation · Components · Primitives
100+ Components · 11 Chart Types · 3,200+ Icons
- Why Blazor Blueprint?
- AI Integration
- Getting Started
- Components
- Primitives
- Icons
- Theming
- Architecture
- Demo Applications
- Contributing
- License
- Acknowledgments
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.
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-serverLearn more at blazorblueprintui.com.
# Styled components (includes Primitives)
dotnet add package BlazorBlueprint.Components
# Or just headless primitives for custom styling
dotnet add package BlazorBlueprint.PrimitivesOptionally 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 iconsThe fastest way to start a new project:
dotnet new install BlazorBlueprint.Templates
dotnet new blazorblueprint -n MyApp1. Register services in Program.cs:
builder.Services.AddBlazorBlueprintComponents();2. Add imports to _Imports.razor:
@using BlazorBlueprint.Components3. 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>Blazor Blueprint includes 87 styled components organized into the following categories.
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, 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. |
| 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 Combobox | Pre-configured combobox field with built-in label, description, and validation |
| Form Field Input | Pre-configured 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 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 Wizard | Multi-step form wizard with step navigation, progress indication, per-step validation, and optional/skippable steps |
| Input | Text input with multiple types and validation |
| Input Field | Typed input with automatic conversion, formatting, and validation for 15+ types |
| Input Group | Enhanced inputs with icons, buttons, and addons |
| Input OTP | One-time password input with individual digit fields |
| Label | Form labels with control association |
| Masked Input | Input with format masks (phone, SSN, etc.) |
| MultiSelect | Searchable multi-selection with tags and checkboxes |
| Native Select | Browser-native select with consistent styling |
| Numeric Input | Numeric input with increment/decrement controls |
| Radio Group | Radio buttons with keyboard navigation |
| Range Slider | Dual-handle slider for selecting value ranges |
| Rating | Star/icon rating input |
| Select | Dropdown select with search and keyboard navigation |
| Slider | Range input with drag support |
| Split Button | Primary action with dropdown for secondary actions |
| Switch | Toggle switch with customizable thumb |
| Tag Input | Inline tag/chip input for managing string lists with suggestions, validation, and customizable triggers |
| Textarea | Multi-line text input with auto-sizing and character count |
| Time Picker | Time selection with hour/minute controls |
| Toggle | Two-state toggle button |
| Toggle Group | Single or multi-select toggle group |
| Component | Description |
|---|---|
| Accordion | Collapsible content sections (single or multiple) |
| Aspect Ratio | Maintain width/height ratio for responsive content |
| Breadcrumb | Navigation trail with hierarchical location |
| Card | Container with header, content, footer, and action areas |
| Carousel | Slideshow for cycling through content |
| Collapsible | Expandable/collapsible panels |
| Item | Flexible list items with media, content, and actions |
| Navigation Menu | Horizontal navigation with dropdown menus |
| Pagination | Page navigation with first/previous/next/last controls and page size selection |
| Resizable | Resizable panels with drag handles |
| Responsive Nav | Adaptive navigation that switches between desktop and mobile layouts |
| Scroll Area | Custom scrollable area with styled scrollbars |
| Separator | Visual dividers (horizontal and vertical) |
| Sidebar | Responsive sidebar with collapsible icon mode, variants (default, floating, inset), and mobile sheet integration |
| Tabs | Tabbed interfaces with controlled/uncontrolled modes |
| Timeline | Vertical timeline with alignment, connector styles, loading states, and collapsible items |
| Component | Description |
|---|---|
| Alert Dialog | Modal requiring user acknowledgement |
| Command | Command palette with keyboard navigation, filtering, and dialog mode |
| Context Menu | Right-click menu with customizable items |
| Dialog | Modal dialogs with programmatic DialogService |
| Drawer | Mobile-friendly panel sliding from screen edge |
| Dropdown Menu | Menus with checkbox items and keyboard navigation |
| Hover Card | Rich hover previews |
| Menubar | Desktop application-style menu bar |
| Popover | Floating content containers |
| Sheet | Slide-out panels (top, right, bottom, left) |
| Toast | Notification messages with multiple positions via ToastService |
| Tooltip | Contextual hover tooltips |
| Component | Description |
|---|---|
| Chart | 11 chart types (Area, Bar, Candlestick, Funnel, Gauge, Heatmap, Line, Pie, Radar, Radial Bar, Scatter) with theme integration |
| Dashboard Grid | Drag-and-drop, resizable widget layout for dashboards with responsive breakpoints, state persistence, and keyboard accessibility |
| DataGrid | Enterprise data grid with sorting, per-column filtering, row grouping with aggregates, selection, expandable rows, row virtualization, context menu, pinned columns, column reordering/resizing/visibility, and state persistence |
| DataTable | Tables with sorting, filtering, pagination, and row selection |
| DataView | Displays data using templates in a grid or list layout with sorting, filtering, pagination, and infinite scrolling |
| Markdown Editor | Toolbar formatting with live preview |
| Rich Text Editor | WYSIWYG editor with formatting toolbar and HTML output |
| Tree View | Hierarchical data display with selection, checkboxes, lazy loading, drag-and-drop, search filtering, and data-driven or declarative modes |
| Component | Description |
|---|---|
| Alert | Callout messages with dismissible variants |
| Avatar | User avatars with fallback and group support |
| Badge | Status badges and labels |
| Empty | Empty state placeholder with icon, title, and description |
| Kbd | Keyboard shortcut display |
| Progress | Progress bar indicator |
| Skeleton | Loading placeholders |
| Spinner | Loading spinner with size variants |
| Typography | Consistent text styling (H1–H4, paragraph, lead, muted, blockquote, inline code, etc.) |
Blazor Blueprint's 18 headless primitives provide behavior, ARIA attributes, and keyboard support without any styling. They handle all the complex interaction logic — focus trapping, ARIA attributes, keyboard shortcuts, portal rendering — while giving you complete control over appearance.
Use primitives when you need full design freedom or are building a custom design system.
| Primitive | What it handles |
|---|---|
| Accordion | Expand/collapse logic, single/multiple mode, keyboard navigation |
| Checkbox | Checked/unchecked/indeterminate state, ARIA attributes |
| Collapsible | Open/close state, animated transitions |
| Dashboard Grid | Widget layout state, drag-and-drop coordination, resize handling, responsive breakpoints |
| DataGrid | Headless data grid with sorting, filtering, pagination, selection, expansion, row grouping, and state management |
| Dialog | Focus trapping, escape to close, scroll locking, portal rendering |
| Dropdown Menu | Open/close, keyboard navigation, click-outside dismissal |
| Hover Card | Hover intent, delay timing, portal positioning |
| Label | Label-control association |
| Popover | Floating positioning, portal rendering, click-outside |
| Radio Group | Single selection, arrow key navigation, ARIA roles |
| Select | Dropdown behavior, typeahead, keyboard navigation |
| Sheet | Side panel, focus trapping, scroll locking |
| Switch | Toggle state, keyboard support, ARIA switch role |
| Table | Sorting, pagination, row selection, keyboard row navigation |
| Tabs | Tab selection, arrow key navigation, ARIA tab roles |
| Tooltip | Hover/focus triggers, delay, portal positioning |
| Tree View | Hierarchical expand/collapse, selection, checkbox state management |
Primitives are completely unstyled — bring your own CSS, Tailwind classes, or inline styles:
<BbAccordion class="my-accordion">
<BbAccordionItem Value="item-1">
<BbAccordionTrigger class="my-trigger">Section One</BbAccordionTrigger>
<BbAccordionContent class="my-content">Content here.</BbAccordionContent>
</BbAccordionItem>
</BbAccordion>Three icon library packages with 3,200+ total icons:
| Package | Icons | Style | License |
|---|---|---|---|
BlazorBlueprint.Icons.Lucide |
1,640+ | Stroke-based, consistent 24x24 | ISC |
BlazorBlueprint.Icons.Heroicons |
1,288 | 4 variants (Outline, Solid, Mini, Micro) | MIT |
BlazorBlueprint.Icons.Feather |
286 | Minimalist, stroke-based 24x24 | MIT |
Blazor Blueprint is 100% compatible with shadcn/ui themes. Use any theme from shadcn/ui or tweakcn — copy the CSS variables into your theme.css:
@layer base {
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.1450 0 0);
--primary: oklch(0.2050 0 0);
--primary-foreground: oklch(0.9850 0 0);
/* ... */
}
.dark {
--background: oklch(0.1450 0 0);
--foreground: oklch(0.9850 0 0);
--primary: oklch(0.9220 0 0);
--primary-foreground: oklch(0.2050 0 0);
/* ... */
}
}Load your theme before blazorblueprint.css so the variables are defined when referenced.
- Colors —
--background,--foreground,--primary,--secondary,--accent,--destructive,--muted, and their foreground variants - Typography —
--font-sans,--font-serif,--font-mono - Layout —
--radius,--shadow-* - Charts —
--chart-1through--chart-5 - Sidebar —
--sidebar,--sidebar-primary,--sidebar-accent, and variants
Apply the .dark class to your <html> element. All components automatically switch to dark mode colors.
Blazor Blueprint uses a two-layer architecture inspired by Radix UI:
BlazorBlueprint.Components ← Pre-styled, ready to use
↓ builds on
BlazorBlueprint.Primitives ← Headless, includes ARIA attributes and keyboard support
Components ship pre-built CSS matching the shadcn/ui design system. No Tailwind setup required — just reference the stylesheet and optionally provide theme variables.
Primitives are completely unstyled. They include ARIA attributes, focus management, and keyboard support for complex interaction patterns, giving you full control over appearance.
Services are registered via dependency injection:
AddBlazorBlueprintComponents()— registers everything (Components + Primitives)AddBlazorBlueprintPrimitives()— registers only Primitives services
Key services include IPortalService (overlay rendering), IFocusManager (focus trapping), IPositioningService (floating element positioning), IKeyboardShortcutService (global shortcuts), DialogService (programmatic dialogs), and ToastService (notifications).
Demo applications are included for all three Blazor hosting models:
dotnet run --project demos/BlazorBlueprint.Demo.Server
dotnet run --project demos/BlazorBlueprint.Demo.Wasm
dotnet run --project demos/BlazorBlueprint.Demo.AutoThe demos share a common Razor Class Library (BlazorBlueprint.Demo.Shared) with thin hosting projects per render mode, demonstrating that components work identically across Server, WebAssembly, and Auto.
See CONTRIBUTING.md for development setup and guidelines.
Blazor Blueprint is open source software licensed under the Apache License 2.0.
If you create derivative works, you must include the contents of the NOTICE file in your distribution.
Blazor Blueprint is inspired by shadcn/ui and the design principles of Radix UI. Blazor Blueprint is a complete reimplementation for Blazor/C# and contains no code from these projects.
- shadcn/ui — MIT License, Copyright (c) 2023 shadcn
- Radix UI — MIT License, Copyright (c) 2022-present WorkOS
- Tailwind CSS — Utility-first CSS framework
- Lucide Icons — ISC License
- Heroicons — MIT License, Tailwind Labs
- Feather Icons — MIT License
- Apache ECharts — Apache License 2.0