BlazorBlueprint.Templates 4.0.0

BlazorBlueprint Templates

Project templates for creating Blazor applications with BlazorBlueprint pre-installed.

Requirements

.NET 10 SDK or later. BlazorBlueprint v4 dropped support for .NET 8 and .NET 9, so the template targets net10.0 only. If you need .NET 8 or .NET 9, install version 3.x of this template pack, which references BlazorBlueprint v3.

Installation

dotnet new install BlazorBlueprint.Templates

Usage

Create a new project

# Default: Auto render mode with component showcase
dotnet new blazorblueprint -n MyApp

# Server mode (interactive server rendering, single project)
dotnet new blazorblueprint -n MyApp -R Server

# Standalone WebAssembly (no server host, deployable to static hosting)
dotnet new blazorblueprint -n MyApp -R WebAssembly

# Auto mode (Blazor Web App: server host + WASM .Client project)
dotnet new blazorblueprint -n MyApp -R Auto

# Without showcase pages
dotnet new blazorblueprint -n MyApp -I false

Run your new project

cd MyApp
dotnet run

Visit https://localhost:5001 to see your app.

Render Modes

Template Parameters

What's Included

• BlazorBlueprint.Components — 135 pre-styled components (shadcn/ui design, OKLCH colours) including DataGrid, 13 chart types, Scheduler, Dashboard Grid, Tree View, Rich Text Editor, Form Wizard, and more
• BlazorBlueprint.Primitives — 31 headless primitives for fully custom styling
• BlazorBlueprint.Icons.Lucide — 1,750+ Lucide icons
• Tailwind CSS — Pre-built v4 utilities; theme tokens and scan paths configured in wwwroot/css/app-input.css for customisation of showcase pages and layouts
• Theme switcher — BbThemeSwitcher and BbDarkModeToggle in the header. Base colour, accent, radius, density and font, all persisted. theme-init.js applies the saved theme before the first paint, so there is no flash of the wrong theme
• Toast, Dialog, and Portal providers — BbToastProvider, BbDialogProvider, BbPortalHost registered out of the box
• Responsive layout — Header with a mobile menu sheet, and a footer with documentation links
• Localization-ready — Components resolve chrome strings via IBbLocalizer (English defaults built in; override to integrate with your i18n stack)
• shadcn/ui theme compatible — Drop in any CSS variable theme from shadcn/ui or tweakcn
• Accessible components — Semantic HTML, ARIA attributes, focus trapping, and keyboard interaction support
• AI-friendly — The library ships with an MCP server and llms.txt so Claude, Cursor, Copilot, and Windsurf generate correct component code — see the main repo for setup
• Showcase pages — Learn by example (optional)

Showcase Pages

When --IncludeShowcase is true (default), your project includes a 22-page guided tour at /showcase, running inside your own app. Every example is live code you can copy.

Every showcase page carries a dismissible banner explaining that these are demo pages and how to remove them. To remove the showcase:

1. Delete the Pages/Showcase/ folder.
2. Remove the Showcase link from Shared/MainLayout.razor.
3. Remove the Showcase card and the "Take the tour" button from Pages/Index.razor.

Or scaffold without it in the first place:

dotnet new blazorblueprint -n MyApp -I false

Customising CSS

The template ships with a pre-built Tailwind v4 app.css. Tailwind does not run as part of dotnet build — when you add new utility classes to your pages, regenerate the CSS manually:

npm install --no-save tailwindcss @tailwindcss/cli
./node_modules/.bin/tailwindcss -i wwwroot/css/app-input.css -o wwwroot/css/app.css --minify

• wwwroot/css/app-input.css — Tailwind source. Contains @source directives for scanned paths, @custom-variant dark for class-based dark mode, a @layer base rule that sets the default border colour, and a @theme block that maps shadcn CSS variables onto Tailwind colour/radius/font tokens
• wwwroot/css/app.css — compiled output loaded by the layout

Tailwind v4 configures everything in CSS — there is no tailwind.config.js.

Two rules in app-input.css matter and are easy to delete by accident:

• The @layer base border rule. Tailwind's preflight resets border-color to currentColor, and the stylesheet that loads last wins. Without the rule your own border and border-b classes render near-black instead of the theme's grey.
• The @custom-variant dark line. The library toggles dark mode with a .dark class, but Tailwind v4 defaults dark: to the operating system setting. Without the line your own dark: classes apply at the wrong times.

Do not add an @source that points at the BlazorBlueprint package. Since v4 every utility in blazorblueprint.css is prefixed bb: and sits in its own cascade layer, so the two builds cannot collide and load order no longer matters.

Theme Customisation

Edit wwwroot/styles/themes/default.css to customise the OKLCH-based colour palette. See THEMING.md for the full list of CSS variables.

Uninstall

dotnet new uninstall BlazorBlueprint.Templates

Development

To test templates locally:

# Install template from source
./scripts/install-template-local.sh

# Create projects across all render modes
./scripts/create-template-test.sh

# Build/run the test projects
./scripts/run-template-test.sh

To rebuild the template's pre-shipped CSS after modifying content:

cd content/BlazorBlueprint.WebApp
npm install --no-save tailwindcss @tailwindcss/cli
./node_modules/.bin/tailwindcss -i wwwroot/css/app-input.css -o wwwroot/css/app.css --minify

Links

• BlazorBlueprint Documentation
• GitHub Repository
• Component Reference
• Theming Guide
• v4 Migration Guide