Installation

For new Blazor projects, the NeoUI template is the quickest path — one command scaffolds a complete app with sidebar layout, theme switcher, dark mode toggle, Spotlight command palette, and Tailwind CSS v4 pre-wired:

Supports Server, WebAssembly, and Auto interactivity modes. See Template docs for all options and examples.

NeoUI.Blazor — Styled Components

The primary package. Includes everything you need to build a full application:

• 80+ production-ready styled components matching the shadcn/ui design system
• Pre-built CSS included — no Tailwind CSS setup required
• NeoUI.Blazor.Primitives — headless accessibility layer (transitive)
• NeoUI.Icons.Lucide, NeoUI.Icons.Heroicons, NeoUI.Icons.Feather (transitive)
• Compatible with all Blazor hosting models: Server, WebAssembly, and Auto

NeoUI.Blazor.Primitives — Headless Layer

Install this package separately only if you want to use headless primitives without the styled components — for example, when building a fully custom design system from scratch. It is already included as a transitive dependency of NeoUI.Blazor.

The primitives are fully headless and unstyled. They handle all behavior, accessibility (WCAG 2.1 AA), keyboard navigation, and ARIA attributes — you provide the styling. Available primitives include Accordion, Checkbox, Collapsible, Dialog, Dropdown Menu, Hover Card, Label, Popover, Radio Group, Select, Sheet, Switch, Table, Tabs, and Tooltip.

Icon Libraries

All three icon packages are included transitively with NeoUI.Blazor. Install them explicitly only if you're using the primitives package standalone.

_Imports.razor

Add these two lines to your _Imports.razor. They cover every styled component and service for the vast majority of projects:

@using NeoUI.Blazor
@using NeoUI.Blazor.Services

Optional: Lucide Icons

@using NeoUI.Icons.Lucide      @* 1,640 icons — stroke-based *@

Lucide provides 1,640+ consistent stroke-based icons used throughout NeoUI itself. Heroicons and Feather are available as alternative icon packages.

Optional: Primitives (headless custom styling only)

@using NeoUI.Blazor.Primitives
@using NeoUI.Blazor.Primitives.Services

Only needed when you are building your own components directly on the headless Primitives layer rather than using the ready-made styled components from NeoUI.Blazor.

Using Icon Components

Each icon library exposes a single component you use throughout your app:

@* Lucide *@
<LucideIcon Name="circle-check" Size="20" Class="text-green-500" />

@* Heroicons (variant: outline | solid | mini | micro) *@
<HeroIcon Name="check-circle" Variant="HeroIconVariant.Solid" Size="20" />

@* Feather *@
<FeatherIcon Name="check-circle" Size="20" />

Icon names follow kebab-case. Browse all available icons at lucide.dev, heroicons.com, and feathericons.com.