Introduction

A beautiful component library for Blazor, inspired by shadcn/ui and Radix UI.

Version 4 is here

v4 adds 37 components — Gantt, Pivot Data Grid, Signature, Scheduler, the Motion family, the mobile shell and more — plus Data Grid cell and batch editing. It requires .NET 10 or later, and every utility in blazorblueprint.css is now prefixed bb:. Upgrading from v3? Read the migration guide. Still on v3? Its documentation lives at /docs/v3.

What is Blazor Blueprint?

Blazor Blueprint is a comprehensive component library for Blazor applications that follows the design philosophy of shadcn/ui and Radix UI. It provides two tiers of components:

Primitives

Unstyled, accessible components that handle behavior, accessibility, and state management. Perfect for building custom design systems with full control over styling.

Components

Pre-styled components built on primitives with shadcn/ui design. Drop them in and use immediately with beautiful defaults.

Why Blazor Blueprint?

Accessibility-minded: Components use semantic HTML and ARIA attributes with keyboard interaction support. See each component's docs for specific accessibility details.
Customizable: Components are styled with Tailwind CSS and can be easily customized to match your brand.
Type-Safe: Built with C# for compile-time type checking and IntelliSense support.
Production Ready: Built for .NET 10 and later. Tested across Blazor Server, WebAssembly, and Hybrid.
Developer Experience: Modern API design with sensible defaults and comprehensive documentation.

Architecture

Blazor Blueprint uses a two-tier architecture that gives you flexibility in how you build your applications:

Tier 1: Primitives (Unstyled)

Primitives are headless components that provide the foundation for building accessible, interactive UI components. They handle complex interactions, state management, and accessibility concerns while giving you complete control over styling.

Use primitives when you:

Need full control over the visual design
Are building a custom design system
Want to integrate with existing styles

Tier 2: Components (Styled)

Components are built on top of primitives and come pre-styled with the shadcn/ui design system using Tailwind CSS. They provide beautiful defaults that you can use immediately or customize as needed.

Use components when you:

Want to get up and running quickly
Like the shadcn/ui design aesthetic
Need production-ready components with minimal setup

Technology Stack

Blazor (.NET 10+): Modern web framework for building interactive UIs with C#. Blazor Blueprint v4 targets net10.0.
Tailwind CSS: Utility-first CSS framework for styling
CSS Variables: For theming and customization (shadcn's approach)
OKLCH Color Space: Modern color system for better color perception

Getting Started

Ready to start building? Check out the Installation Guide to add Blazor Blueprint to your project, or browse the Components and Primitives to see what's available.

Next Installation