BlazorBlueprint.Components 3.4.0

.NET 8.0

dotnet add package BlazorBlueprint.Components --version 3.4.0

NuGet\Install-Package BlazorBlueprint.Components -Version 3.4.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="BlazorBlueprint.Components" Version="3.4.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="BlazorBlueprint.Components" Version="3.4.0" />
                    

                            Directory.Packages.props

<PackageReference Include="BlazorBlueprint.Components" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add BlazorBlueprint.Components --version 3.4.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: BlazorBlueprint.Components, 3.4.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package BlazorBlueprint.Components@3.4.0

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=BlazorBlueprint.Components&version=3.4.0
                    

                            Install as a Cake Addin

#tool nuget:?package=BlazorBlueprint.Components&version=3.4.0
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

BlazorBlueprint.Components

Pre-styled Blazor components with shadcn/ui design. Beautiful defaults with zero configuration - no Tailwind setup required!

Features

Zero Configuration: Pre-built CSS included - no Tailwind setup required
shadcn/ui Design: Beautiful, modern design language inspired by shadcn/ui
Pre-Styled Components: Production-ready components with pre-built styling
Dark Mode: Built-in dark mode support using CSS variables
shadcn/ui Theme Compatible: Use any theme from shadcn/ui or tweakcn.com
Fully Customizable: Override styles with custom CSS or Tailwind classes
Built with Accessibility in Mind: Includes ARIA attributes and keyboard support via BlazorBlueprint.Primitives
Composable: Flexible component composition patterns
Type-Safe: Full C# type safety with IntelliSense support
.NET 8: Built for the latest .NET platform

Installation

dotnet add package BlazorBlueprint.Components

This package automatically includes:

BlazorBlueprint.Primitives - Headless primitives providing behavior and accessibility
BlazorBlueprint.Icons.Lucide - Lucide icon set
Pre-built CSS - No Tailwind setup required!

Quick Start

1. Register services in `Program.cs`:

builder.Services.AddBlazorBlueprintComponents();

This registers all required services including portal management, focus trapping, positioning, toast notifications, and programmatic dialogs.

2. Add to your `_Imports.razor`:

@using BlazorBlueprint.Components
@using BlazorBlueprint.Primitives

That's it — two imports give you access to all components and their enums (ButtonVariant, InputType, AccordionType, etc.).

3. Add CSS to your `App.razor`:

BlazorBlueprint Components come with pre-built CSS - no Tailwind setup required!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />

    
    <link rel="stylesheet" href="styles/theme.css" />

    
    <link rel="stylesheet" href="_content/BlazorBlueprint.Components/blazorblueprint.css" />

    <HeadOutlet @rendermode="InteractiveServer" />
</head>
<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>
</html>

4. Add the portal host to your root layout (`MainLayout.razor`):

<BbPortalHost />

This is required for overlay components (Dialog, Sheet, Popover, Tooltip, etc.) to render correctly.

5. Start using components:

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

<BbDialog>
    <BbDialogTrigger AsChild>
        <BbButton>Open Dialog</BbButton>
    </BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Welcome to BlazorBlueprint</BbDialogTitle>
            <BbDialogDescription>
                Beautiful Blazor components with zero configuration
            </BbDialogDescription>
        </BbDialogHeader>
        <BbDialogFooter>
            <BbDialogClose AsChild>
                <BbButton Variant="ButtonVariant.Outline">Close</BbButton>
            </BbDialogClose>
        </BbDialogFooter>
    </BbDialogContent>
</BbDialog>

That's it! No Tailwind installation, no build configuration needed.

Available Components

General

Component	Description
Accordion	Collapsible content sections with smooth animations
Alert	Contextual feedback messages with variant support
Alert Dialog	Modal confirmation dialogs requiring user action
Aspect Ratio	Maintain consistent width-to-height ratios
Avatar	User profile images with fallback initials and group support
Badge	Labels for status, categories, and metadata
Breadcrumb	Navigation breadcrumb trail with separator support
Button	Interactive buttons with multiple variants and sizes
Button Group	Grouped button controls with shared styling
Calendar	Date selection calendar
Card	Content container with header, content, and footer sections
Carousel	Scrollable content carousel with navigation controls
Chart	Data visualization with multiple series types (Bar, Line, Area, Pie, Radar, Radial)
Collapsible	Expandable content area with trigger control
Empty	Empty state placeholder for no-content scenarios
Item	List item container for menus and lists
Kbd	Keyboard shortcut display
Pagination	Page navigation controls
Progress	Progress indicator bar
Resizable	Resizable panel layout with drag handles
Scroll Area	Custom scrollable area with styled scrollbars
Separator	Visual dividers for content sections
Skeleton	Loading placeholders for content and images
Spinner	Loading spinner indicator
Split Button	Button with dropdown action split
Timeline	Chronological event display
Toggle	Toggle button control
Typography	Typography components for consistent text styling

Component	Description
Command	Command palette for quick actions and navigation
Context Menu	Right-click context menus with items, labels, and shortcuts
Dialog	Modal dialogs with backdrop and focus management
Drawer	Slide-out drawer panels with header, footer, and items
Dropdown Menu	Context menus with items, separators, and shortcuts
Hover Card	Rich preview cards on hover with delay control
Menubar	Horizontal menu bar with dropdown menus
Navigation Menu	Responsive navigation menu with submenus
Popover	Floating panels for additional content and actions
Responsive Nav	Mobile-responsive navigation
Sheet	Side panels that slide in from viewport edges
Sidebar	Responsive navigation sidebar with collapsible menus
Tabs	Tabbed interface for organizing related content
Toast	Toast notification system with action support
Tooltip	Brief informational popups on hover or focus

Form Controls

Component	Description
Checkbox	Binary selection control with indeterminate state
Checkbox Group	Group of checkboxes with shared state management
Color Picker	Color selection input
Combobox	Autocomplete input with searchable dropdown
Currency Input	Currency-formatted number input
Date Picker	Date selection input with calendar popup
Date Range Picker	Date range selection input
Field	Form field wrapper with label, description, and error states
File Upload	File upload with drag-and-drop support
Input	Text input fields with multiple types and sizes
Input Field	Integrated input with field label and description
Input Group	Grouped input controls with addons and buttons
Input OTP	One-time password input with segmented fields
Label	Accessible labels for form controls
Masked Input	Input with mask pattern enforcement
Multi Select	Multi-select dropdown with tag support
Native Select	Native HTML select element with styling
Numeric Input	Number input with formatting and validation
Radio Group	Mutually exclusive options with keyboard navigation
Range Slider	Dual-handle range slider input
Rating	Star/icon rating input
Select	Dropdown selection with groups and labels
Slider	Single-handle slider input
Switch	Toggle control for on/off states
Textarea	Multi-line text input field
Time Picker	Time selection input

Editors

Component	Description
Markdown Editor	Markdown editor with toolbar and live preview
Rich Text Editor	Rich text editor with formatting toolbar

Pre-Built Form Fields

Convenience wrappers that combine a form control with BbField for label, description, and error handling:

Component	Description
FormFieldCheckbox	Checkbox with integrated field wrapper
FormFieldCombobox	Combobox with integrated field wrapper
FormFieldInput	Input with integrated field wrapper
FormFieldMultiSelect	MultiSelect with integrated field wrapper
FormFieldRadioGroup	RadioGroup with integrated field wrapper
FormFieldSelect	Select with integrated field wrapper
FormFieldSwitch	Switch with integrated field wrapper

Services

Service	Description
`ToastService`	Toast notification state management
`DialogService`	Programmatic dialog/confirm control
`IPortalService`	Portal management for overlays (from Primitives)
`IFocusManager`	Focus trapping and restoration (from Primitives)
`IPositioningService`	Floating element positioning (from Primitives)
`IKeyboardShortcutService`	Global keyboard shortcut registration (from Primitives)
`DropdownManagerService`	Coordinates dropdown mutual exclusivity (from Primitives)

Component API Reference

Button

<BbButton
    Variant="ButtonVariant.Default"
    Size="ButtonSize.Default"
    Type="ButtonType.Button"
    IconPosition="IconPosition.Start"
    Disabled="false">
    Click me
</BbButton>

Parameter	Type	Default	Values
`Variant`	`ButtonVariant`	`Default`	`Default`, `Destructive`, `Outline`, `Secondary`, `Ghost`, `Link`
`Size`	`ButtonSize`	`Default`	`Small`, `Default`, `Large`, `Icon`, `IconSmall`, `IconLarge`
`Type`	`ButtonType`	`Button`	`Button`, `Submit`, `Reset`
`IconPosition`	`IconPosition`	`Start`	`Start`, `End`

Input

<BbInput
    Type="InputType.Email"
    Placeholder="name@example.com"
    Disabled="false" />

Parameter	Type	Default	Values
`Type`	`InputType`	`Text`	`Text`, `Email`, `Password`, `Number`, `Tel`, `Url`, `Search`, `Date`, `Time`, `File`

Avatar

<BbAvatar Size="AvatarSize.Default">
    <BbAvatarImage Src="user.jpg" Alt="User" />
    <BbAvatarFallback>JD</BbAvatarFallback>
</BbAvatar>

Parameter	Type	Default	Values
`Size`	`AvatarSize`	`Default`	`Small`, `Default`, `Large`, `ExtraLarge`

Badge

<BbBadge Variant="BadgeVariant.Default">New</BbBadge>

Parameter	Type	Default	Values
`Variant`	`BadgeVariant`	`Default`	`Default`, `Secondary`, `Destructive`, `Outline`

Accordion

<BbAccordion Type="AccordionType.Single" Collapsible="true">
    <BbAccordionItem Value="item-1">
        <BbAccordionTrigger>Section 1</BbAccordionTrigger>
        <BbAccordionContent>Content 1</BbAccordionContent>
    </BbAccordionItem>
</BbAccordion>

Parameter	Type	Default	Description
`Type`	`AccordionType`	`Single`	`Single` (one item open) or `Multiple` (many items open)
`Collapsible`	`bool`	`false`	When `Single`, allows closing all items

Tabs

<BbTabs
    DefaultValue="tab1"
    Orientation="TabsOrientation.Horizontal"
    ActivationMode="TabsActivationMode.Automatic">
    <BbTabsList>
        <BbTabsTrigger Value="tab1">Tab 1</BbTabsTrigger>
        <BbTabsTrigger Value="tab2">Tab 2</BbTabsTrigger>
    </BbTabsList>
    <BbTabsContent Value="tab1">Content 1</BbTabsContent>
    <BbTabsContent Value="tab2">Content 2</BbTabsContent>
</BbTabs>

Parameter	Type	Default	Values
`Orientation`	`TabsOrientation`	`Horizontal`	`Horizontal`, `Vertical`
`ActivationMode`	`TabsActivationMode`	`Automatic`	`Automatic` (on focus), `Manual` (on click)

Sheet

<BbSheet>
    <BbSheetTrigger AsChild>
        <BbButton>Open Sheet</BbButton>
    </BbSheetTrigger>
    <BbSheetContent Side="SheetSide.Right">
        <BbSheetHeader>
            <BbSheetTitle>Sheet Title</BbSheetTitle>
            <BbSheetDescription>Sheet description</BbSheetDescription>
        </BbSheetHeader>
        
    </BbSheetContent>
</BbSheet>

Parameter	Type	Default	Values
`Side`	`SheetSide`	`Right`	`Top`, `Right`, `Bottom`, `Left`

Select

<BbSelect TValue="string" @bind-Value="selectedValue">
    <BbSelectTrigger>
        <BbSelectValue Placeholder="Select an option" />
    </BbSelectTrigger>
    <BbSelectContent>
        <BbSelectItem Value="@("option1")" Text="Option 1" />
        <BbSelectItem Value="@("option2")" Text="Option 2" />
    </BbSelectContent>
</BbSelect>

Select is a generic component. Specify TValue for type safety.

Separator

<BbSeparator Orientation="SeparatorOrientation.Horizontal" />

Parameter	Type	Default	Values
`Orientation`	`SeparatorOrientation`	`Horizontal`	`Horizontal`, `Vertical`

Skeleton

<BbSkeleton Shape="SkeletonShape.Rectangular" Class="w-full h-4" />
<BbSkeleton Shape="SkeletonShape.Circular" Class="w-12 h-12" />

Parameter	Type	Default	Values
`Shape`	`SkeletonShape`	`Rectangular`	`Rectangular`, `Circular`

DataTable

<BbDataTable TItem="User" Items="users" SelectionMode="DataTableSelectionMode.Multiple">
    <BbDataTableColumn TItem="User" Field="x => x.Name" Header="Name" />
    <BbDataTableColumn TItem="User" Field="x => x.Email" Header="Email" />
</BbDataTable>

Parameter	Type	Default	Values
`SelectionMode`	`DataTableSelectionMode`	`None`	`None`, `Single`, `Multiple`

Theming

BlazorBlueprint is 100% compatible with shadcn/ui themes. Customize your application's appearance using CSS variables.

Using Themes from shadcn/ui and tweakcn

You can use any theme from:

shadcn/ui themes - Official shadcn/ui theme gallery
tweakcn.com - Advanced theme customization tool

Simply copy the CSS variables and paste them into your wwwroot/styles/theme.css file.

Example Theme

Create wwwroot/styles/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);
    /* ... other variables */
  }

  .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);
    /* ... other variables */
  }
}

Reference it in your App.razor before the BlazorBlueprint CSS:

<link rel="stylesheet" href="styles/theme.css" />
<link rel="stylesheet" href="_content/BlazorBlueprint.Components/blazorblueprint.css" />

Dark Mode

Dark mode automatically activates when you add the .dark class to the <html> element. All components will switch to dark mode colors.

Usage Example

<BbDialog>
    <BbDialogTrigger AsChild>
        <BbButton>Open Dialog</BbButton>
    </BbDialogTrigger>
    <BbDialogContent>
        <BbDialogHeader>
            <BbDialogTitle>Confirm Action</BbDialogTitle>
            <BbDialogDescription>
                Are you sure you want to proceed?
            </BbDialogDescription>
        </BbDialogHeader>
        <p>This action cannot be undone.</p>
        <BbDialogFooter>
            <BbDialogClose AsChild>
                <BbButton Variant="ButtonVariant.Outline">Cancel</BbButton>
            </BbDialogClose>
            <BbButton Variant="ButtonVariant.Default">Confirm</BbButton>
        </BbDialogFooter>
    </BbDialogContent>
</BbDialog>

AsChild Pattern

Use AsChild on trigger components to use your own styled elements instead of the default button:

<BbDropdownMenu>
    <BbDropdownMenuTrigger AsChild>
        <BbButton Variant="ButtonVariant.Outline">
            Actions
            <BbLucideIcon Name="chevron-down" Size="16" />
        </BbButton>
    </BbDropdownMenuTrigger>
    <BbDropdownMenuContent>
        <BbDropdownMenuItem>Edit</BbDropdownMenuItem>
        <BbDropdownMenuItem>Delete</BbDropdownMenuItem>
    </BbDropdownMenuContent>
</BbDropdownMenu>

This is the industry-standard pattern from Radix UI/shadcn/ui. When AsChild is true, the child component (e.g., BbButton) automatically receives trigger behavior via TriggerContext.

Form Example

<div class="space-y-4">
    <div>
        <BbLabel For="email">Email</BbLabel>
        <BbInput Id="email" Type="InputType.Email" Placeholder="name@example.com" />
    </div>

    <div class="flex items-center space-x-2">
        <BbCheckbox Id="terms" @bind-Checked="agreedToTerms" />
        <BbLabel For="terms">I agree to the terms and conditions</BbLabel>
    </div>

    <BbButton Disabled="@(!agreedToTerms)">Submit</BbButton>
</div>

@code {
    private bool agreedToTerms = false;
}

Customizing Components

Override Default Styles

Use the Class parameter to add custom CSS classes or Tailwind classes (if you have Tailwind set up):

<BbButton Class="bg-purple-600 hover:bg-purple-700">
    Custom Button
</BbButton>

<BbCard Class="border-2 border-purple-500 shadow-xl">
    Custom Card Styling
</BbCard>

Note: BlazorBlueprint Components include pre-built CSS and don't require Tailwind. However, you can still use Tailwind classes for customization if you've set up Tailwind in your project.

Component Composition

Build complex UIs by composing components:

<BbCard>
    <BbCardHeader>
        <BbCardTitle>Settings</BbCardTitle>
        <BbCardDescription>Manage your account settings</BbCardDescription>
    </BbCardHeader>
    <BbCardContent class="space-y-4">
        <div>
            <BbLabel>Email Notifications</BbLabel>
            <BbSwitch @bind-Checked="emailNotifications" />
        </div>
        <BbSeparator />
        <div>
            <BbLabel>Push Notifications</BbLabel>
            <BbSwitch @bind-Checked="pushNotifications" />
        </div>
    </BbCardContent>
    <BbCardFooter>
        <BbButton>Save Changes</BbButton>
    </BbCardFooter>
</BbCard>

Design Philosophy

BlazorBlueprint.Components follows the shadcn/ui philosophy with zero-configuration deployment:

Zero Configuration: Pre-built CSS included - just install and use
shadcn/ui Compatible: Uses the same design tokens and CSS variables
Built on Primitives: All behavior comes from BlazorBlueprint.Primitives
Theme Tokens: Fully themeable using CSS variables
Built with Accessibility in Mind: Includes ARIA attributes and keyboard support
Customizable: Override with custom CSS or add Tailwind if needed

When to Use

Use BlazorBlueprint.Components when:

Want beautiful defaults with shadcn/ui design
Need zero-configuration setup (no build tools required)
Want to ship quickly without building components from scratch
Need dark mode and theming support out of the box
Want shadcn/ui theme compatibility

Consider BlazorBlueprint.Primitives when:

Building a completely custom design system
Want zero opinions about styling
Need to match a specific brand or design language
Prefer full control over all CSS

Documentation

For full documentation, examples, and API reference, visit:

Dependencies

BlazorBlueprint.Primitives - Headless component primitives (auto-installed)
BlazorBlueprint.Icons.Lucide - Lucide icon set (auto-installed)
Pre-built CSS (included in package)
No external dependencies required!

Optional:

Tailwind CSS (if you want to use Tailwind classes for customization)

License

Apache License 2.0 - see LICENSE for details.

Contributing

Contributions are welcome! Please see our Contributing Guide.

Product	Compatible and additional computed target framework versions.
.NET	net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net8.0
- BlazorBlueprint.Icons.Lucide (>= 2.0.0)
- BlazorBlueprint.Primitives (>= 3.4.0)
- HtmlSanitizer (>= 9.0.892)
- Markdig (>= 0.37.0)
- Microsoft.AspNetCore.Components.Web (>= 8.0.14)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
3.4.0	204	3/6/2026
3.3.0	358	3/4/2026
3.2.0	940	2/28/2026
3.1.2	109	2/28/2026
3.1.1	88	2/28/2026
3.1.0	89	2/28/2026
3.0.1	706	2/17/2026
3.0.0	101	2/17/2026
2.5.0	424	2/10/2026
2.4.2	171	2/9/2026
2.4.1	244	2/8/2026
2.3.0	142	2/7/2026
2.2.0	110	2/7/2026
2.1.1	123	2/6/2026
2.1.0	97	2/6/2026
2.0.1	124	2/5/2026
2.0.0	133	2/2/2026

## What's New in v3.4.0

### New Components

- **DashboardGrid** — Drag-and-drop, resizable widget grid layout with CSS Grid, collision detection, responsive breakpoints, state persistence, keyboard navigation, ARIA accessibility, and configurable grid guide backgrounds
- **BbDashboardWidget** — Dashboard widget with header, content areas, remove button, and loading skeleton support
- **BbDataGridGroupColumn** — Declarative column component for configuring DataGrid row grouping

### New Features

- **DataGrid** — Row grouping with collapsible group headers, aggregate functions (Sum, Average, Min, Max, Count), and custom header templates via `GroupBy` parameter or `BbDataGridGroupColumn`
- **DataGrid** — Server-side grouping support via `GroupedItemsProvider` delegate
- **DataGrid** — `ExpandAllGroups()` and `CollapseAllGroups()` public methods for toolbar integration
- **DataGrid** — `GroupsCollapsedByDefault` parameter to control initial group state
- **DataGrid** — Pin icon with tooltip on pinned column headers indicating the column is pinned and cannot be moved
- **DataGrid** — Column visibility dropdown now disables pinned columns and prevents hiding the last visible column
- **Tabs** — Responsive mode via `Responsive` parameter on `BbTabsList` that collapses to a `BbSelect` dropdown when tabs overflow their container
- **BbTabsTrigger** — `Label` parameter for display text in the responsive Select fallback
- **DashboardGrid** — `CellWidth`, `MinWidth`, `MaxWidth` parameters for fixed-size grid cells with scroll wrapper
- **DashboardGrid** — Built-in loading skeleton, empty state, and `GetConfig()` method for persistence

### Bug Fixes

- **Slider / RangeSlider** — Fixed style rendering broken by cultures using `,` as decimal separator by using invariant culture for percentage values
- **DataGrid** — Fixed cell border rendering broken by `position: relative` on table rows (Chromium border-collapse bug)
- **DataGrid** — Fixed empty state not rendering when grouping is active
- **DashboardGrid** — Fixed widget position updates not applying during compact mode
- **DashboardGrid** — Fixed stale layout after widget removal and widgets not repositioning until user interaction
- **DashboardGrid** — Fixed resize min-span defaults exceeding widget's declared span
- **DashboardGrid** — Added collision detection in freeform (non-compact) mode
- **Container components** — Fixed parent re-renders not cascading through `BbDataTable`, `BbDataGrid`, `BbDataView`, `BbTable`, and `BbCollapsible` when child components trigger `ValueChanged`

### Improvements

- **DataGrid** — Aggregate values render aligned under their respective column headers with independent `AggregateFormat` parameter
- **DataGrid** — Pagination counts data rows only; group headers don't consume page slots
- **DashboardGrid** — Keyboard accessibility with focus-visible ring, keyboard resize, and compact-on-blur
- **DashboardGrid** — Responsive widget stacking that clamps column spans to fit active breakpoint
- **Primitives** — Bumped BlazorBlueprint.Primitives dependency to 3.4.0