BlazorBlueprint.Templates 3.1.0

BlazorBlueprint Templates

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

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

# Target a specific framework
dotnet new blazorblueprint -n MyApp -F net8.0

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 — 100+ pre-styled components (shadcn/ui design, OKLCH colours) including DataGrid, Chart (11 chart types), Dashboard Grid, Tree View, Rich Text Editor, Form Wizard, and more
• BlazorBlueprint.Primitives — 26 headless primitives for fully custom styling
• BlazorBlueprint.Icons.Lucide — 1,640+ 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
• Dark mode toggle — Class-based theme switching wired into the default layout
• Toast, Dialog, and Portal providers — BbToastProvider, BbDialogProvider, BbPortalHost registered out of the box
• 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 demo pages at /showcase/*:

• Buttons — All button variants, sizes, and states
• Cards — Card layouts and compositions
• Forms — Inputs, selects, checkboxes, and more
• Dialogs — Modals, alert dialogs, and sheets
• Alerts — Alert banners and toast notifications
• Navigation — Tabs, accordions, and collapsibles
• Data Display — Tables, avatars, badges, and progress

To remove showcase pages, delete the Pages/Showcase/ folder (or regenerate with --IncludeShowcase 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, 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.

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 × framework versions
./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