NeoUI.Blazor.Templates 3.1.0

NeoUI Blazor Templates

Project templates for creating Blazor applications with NeoUI components, including a sidebar layout, theme switcher, spotlight command palette, and dark mode toggle.

Prerequisites

• .NET 10.0 SDK or later
• Node.js and npm (for Tailwind CSS build)

Building the Package

cd templates_publish
dotnet pack

This produces bin/Release/NeoUI.Blazor.Templates.3.0.0.nupkg.

Installing the Template

From local package (development)

dotnet new install ./bin/Release/NeoUI.Blazor.Templates.3.0.0.nupkg

From NuGet (once published)

dotnet new install NeoUI.Blazor.Templates

Verify installation

dotnet new list neoui

Usage

Basic (Auto interactivity, default)

dotnet new neoui -n MyApp

All parameters

Examples

# Server mode (single project)
dotnet new neoui -n MyApp -in Server

# WebAssembly mode (Web host + Client projects)
dotnet new neoui -n MyApp -in WebAssembly

# Auto mode (default) - Web host + Client projects, uses Server initially then WASM
dotnet new neoui -n MyApp -in Auto

# Server mode, empty (no sample pages)
dotnet new neoui -n MyApp -in Server -E

# Auto mode with explicit Program.Main
dotnet new neoui -n MyApp -us

# Server mode, no HTTPS
dotnet new neoui -n MyApp -in Server -N

# WebAssembly, empty, no HTTPS
dotnet new neoui -n MyApp -in WebAssembly -E -N

# Check all options
dotnet new neoui -h

Project Structure

Server mode (-I Server)

Single project output:

MyApp/
├── MyApp.csproj              # Web SDK project with NeoUI + Tailwind build
├── Program.cs                # Server-side Blazor setup
├── App.razor                 # Root component (InteractiveServer rendermode)
├── Routes.razor              # Router
├── _Imports.razor
├── Layout/
│   ├── MainLayout.razor      # NeoUI Sidebar + ThemeSwitcher + DarkModeToggle
│   └── NavMenu.razor         # Sidebar navigation
├── Components/
│   ├── Common/
│   │   ├── AppLoader.razor
│   │   ├── ReconnectModal.razor   # SignalR reconnect UI
│   │   └── SpotlightCommandPalette.razor  # Ctrl+K command palette
│   └── Pages/
│       ├── Home.razor
│       ├── Counter.razor
│       ├── Weather.razor
│       ├── NotFound.razor
│       └── Error.razor
├── styles/                   # Tailwind CSS source
├── wwwroot/                  # Static assets + compiled CSS
├── package.json              # npm/Tailwind build config
├── tailwind.config.js
├── appsettings.json
└── Properties/launchSettings.json

Auto / WebAssembly mode (-I Auto or -I WebAssembly)

Two-project solution:

MyApp.sln
MyApp/                        # Web host project
├── MyApp.csproj              # References MyApp.Client
├── Program.cs                # Blazor hosting + WebAssembly setup
├── App.razor                 # Root component (InteractiveAuto/InteractiveWebAssembly)
├── _Imports.razor
├── Components/Pages/
│   └── Error.razor
├── appsettings.json
└── Properties/launchSettings.json

MyApp.Client/                 # WebAssembly client project
├── MyApp.Client.csproj       # BlazorWebAssembly SDK
├── Program.cs                # WASM entry point with NeoUI services
├── Routes.razor
├── _Imports.razor
├── Layout/
│   ├── MainLayout.razor      # NeoUI Sidebar + ThemeSwitcher + DarkModeToggle
│   └── NavMenu.razor
├── Components/
│   ├── Common/
│   │   ├── AppLoader.razor
│   │   ├── ReconnectModal.razor   # (Auto mode only)
│   │   └── SpotlightCommandPalette.razor
│   └── Pages/
│       ├── Home.razor
│       ├── Counter.razor
│       ├── Weather.razor
│       └── NotFound.razor
├── styles/                   # Tailwind CSS source
├── wwwroot/                  # Static assets + compiled CSS
├── package.json
└── tailwind.config.js

After Scaffolding

1. Build Tailwind CSS

The Tailwind CSS build runs automatically during dotnet build. Node.js and npm are required.

For Server mode:

cd MyApp
npm install          # only needed once
dotnet run

For Auto / WebAssembly mode:

cd MyApp.Client
npm install          # only needed once
cd ..
dotnet run --project MyApp

The NpmInstall MSBuild target handles npm install automatically if node_modules is missing.

2. Run the application

dotnet run --project MyApp
# or: dotnet run --project MyApp/MyApp.csproj

NeoUI Components Included

All modes include the full NeoUI shell:

• Sidebar — Collapsible sidebar with NeoUI <Sidebar> components
• ThemeSwitcher — Built-in <ThemeSwitcher /> from NeoUI.Blazor
• DarkModeToggle — Built-in <DarkModeToggle /> from NeoUI.Blazor
• SpotlightCommandPalette — Ctrl+K command palette using <Dialog> + <CommandContent>
• ReconnectModal — Server/Auto modes: custom reconnect UI for SignalR circuits
• AppLoader — WASM initialization progress indicator

Uninstalling the Template

dotnet new uninstall NeoUI.Blazor.Templates