Project Template

Scaffold a production-ready Blazor Web App pre-wired with NeoUI components — sidebar layout, Theme v2 style picker, dark mode toggle, and Spotlight command palette — in seconds.

Prerequisites

.NET 10 SDK or later
Node.js — required for the Tailwind CSS build step

Installation

Install the template package from NuGet once, then use it for any number of projects:

Terminal

$ dotnet new install NeoUI.Blazor.Templates

Verify the template is registered:

Terminal

$ dotnet new list neoui

Quick Start

Terminal

$ dotnet new neoui -n MyApp

$ cd MyApp

$ dotnet run --project MyApp

Automatic Build

The Tailwind CSS build runs automatically during dotnet build. If node_modules is absent, npm install runs automatically too — Node.js just needs to be on your PATH.

Template Options

All options are available from the CLI and from the Visual Studio new project dialog.

Option	Short	Type	Default	Description
`--interactivity`	`-in`	Server \| WebAssembly \| Auto	`Auto`	Blazor interactive render mode
`--allInteractive`	`-al`	bool	`false`	Make every page interactive (applied at `Routes.razor` level)
`--empty`	`-e`	bool	`false`	Skip sample pages (Home, Counter, Weather)
`--no-https`	`-no`	bool	`false`	Disable HTTPS in launch settings
`--use-program-main`	`-us`	bool	`false`	Use explicit `Program.Main` instead of top-level statements
Theme v2 — initial style (persisted to localStorage)
`--style`	—	Default \| Vega \| Nova \| Maia \| Lyra \| Mira \| Luma	`Default`	Visual style variant — controls spacing scale, radius curve, and component density
`--font`	—	System \| Inter \| Geist \| CalSans \| DmSans \| PlusJakarta	`System`	Font preset — sets `--font-sans` / `--font-heading` CSS variables
`--radius`	—	None \| Small \| Medium \| Large	`Medium`	Border radius preset — overrides the style variant's default radius scale
`--menuColor`	—	Default \| Inverted \| DefaultTranslucent \| InvertedTranslucent	`Default`	Menu and popover surface style — `Translucent` variants add glassmorphism backdrop
`--menuAccent`	—	Subtle \| Bold	`Subtle`	Menu item hover accent — `Bold` uses the primary brand color

Theme v2 defaults are persisted

The Theme v2 parameters inject a tiny inline script before theme.js that seeds localStorage on first load — no FOUC. Users can still switch at runtime via ThemeSwitcher, and their preference is remembered.

Ports are randomized at scaffold time (HTTPS: 7100–7299 · HTTP: 5100–5299) so multiple projects never conflict.

Examples

Default: Auto interactivity, two-project solution

Terminal

$ dotnet new neoui -n MyApp

Server-side Blazor, single project

Terminal

$ dotnet new neoui -n MyApp -in Server

WebAssembly only

Terminal

$ dotnet new neoui -n MyApp -in WebAssembly

Auto, skip sample pages

Terminal

$ dotnet new neoui -n MyApp --empty

Server, no HTTPS (e.g. behind a reverse proxy)

Terminal

$ dotnet new neoui -n MyApp -in Server --no-https

Auto, explicit Program.Main entry point

Terminal

$ dotnet new neoui -n MyApp --use-program-main

Nova style + Inter font (compact dashboard feel)

Terminal

$ dotnet new neoui -n MyApp --style Nova --font Inter

Luma style + glassmorphism menus (modern SaaS)

Terminal

$ dotnet new neoui -n MyApp --style Luma --menuColor DefaultTranslucent --menuAccent Bold

Maia style + Plus Jakarta Sans + large radius (consumer app)

Terminal

$ dotnet new neoui -n MyApp --style Maia --font PlusJakarta --radius Large

See all options

Terminal

$ dotnet new neoui -h

What You Get

Project Structure

The scaffolded structure depends on the interactivity mode selected.

Server mode — single project

MyApp/
+-- MyApp.csproj
+-- Program.cs
+-- App.razor
+-- Routes.razor
+-- Layout/
|   +-- MainLayout.razor        # NeoUI Sidebar + header toolbar
|   \-- NavMenu.razor
+-- Components/
|   +-- Common/
|   |   +-- AppLoader.razor
|   |   +-- ReconnectModal.razor
|   |   \-- SpotlightCommandPalette.razor
|   \-- Pages/
|       +-- Home.razor
|       +-- Counter.razor
|       +-- Weather.razor
|       +-- NotFound.razor
|       \-- Error.razor
+-- styles/                     # Tailwind CSS source
+-- wwwroot/                    # Compiled CSS + static assets
+-- package.json
\-- tailwind.config.js

Auto / WebAssembly mode — two-project solution

MyApp.sln
MyApp/                          # Web host
\-- MyApp.csproj

MyApp.Client/                   # WebAssembly client
+-- MyApp.Client.csproj
+-- Layout/
|   +-- MainLayout.razor        # NeoUI Sidebar + header toolbar
|   \-- NavMenu.razor
+-- Components/
|   +-- Common/
|   |   +-- AppLoader.razor
|   |   +-- ReconnectModal.razor    # Auto mode only
|   |   \-- SpotlightCommandPalette.razor
|   \-- Pages/
|       +-- Home.razor
|       +-- Counter.razor
|       +-- Weather.razor
|       \-- NotFound.razor
+-- styles/
+-- wwwroot/
+-- package.json
\-- tailwind.config.js

NeoUI Components Included

Component	Description
`Sidebar`	Collapsible sidebar with icon-only collapsed state
`AppProvider`	Required v4 wrapper — provides Theme v2 context to all NeoUI components
`ThemeSwitcher`	170-combination theme picker (10 base × 17 primary) with style variant selector (`ShowStyles="true"`)
`DarkModeToggle`	Light / dark / system mode toggle
`SpotlightCommandPalette`	`Ctrl+K` command palette (`<Dialog>` + `<CommandContent>`)
`ReconnectModal`	Custom SignalR reconnect UI (Server + Auto modes)
`AppLoader`	WASM initialization progress overlay

Tailwind CSS v4

The template ships with a full Tailwind CSS v4 pipeline:

OKLCH-based theme variables mapped to Tailwind color tokens
Light and dark mode via .dark class
Custom alert color variables (--alert-success, --alert-warning, etc.)
Auto-rebuild on every dotnet build via npm run build MSBuild target

Customizing the Theme

The generated app includes AppProvider in MainLayout.razor — this is required for Theme v2 to work. All style variant, radius, font, and menu settings flow through it via ThemeService.

For deeper customization, open styles/theme.css in the client project and replace the OKLCH variable values under :root (light) and .dark. Any theme from tweakcn.com or ui.shadcn.com/themes is directly compatible.

Full Theming Guide

For runtime theme switching, the 170-theme system (10 base × 17 primary), style variants, font presets, radius presets, and full CSS variable reference, see the Theming guide.

Uninstalling

Terminal

$ dotnet new uninstall NeoUI.Blazor.Templates

Next Steps

Getting Started

Adding NeoUI to an existing project instead.

Theming

85 color combinations and custom CSS themes.

Components

Browse 100+ components with live examples.

Project Template

Prerequisites

Installation

Quick Start

Automatic Build

Template Options

Theme v2 defaults are persisted

Examples

What You Get

Project Structure

NeoUI Components Included

Tailwind CSS v4

Customizing the Theme

Full Theming Guide

Uninstalling

Next Steps

Getting Started

Theming

Components

An error has occurred