NeoUI logo NeoUI

Project Template

NEW

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

Prerequisites

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

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

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

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

C#
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

C#
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
ThemeSwitcher Base color theme selector (zinc, slate, gray, neutral, stone)
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

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.

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.

Reconnecting...

Attempting to rejoin the server

Connection Lost

Retrying in seconds

Connection Failed

Failed to rejoin the server.
Please retry or reload the page.

Session Paused

The session has been paused by the server

Resume Failed

Failed to resume the session.
Please reload the page.