RizzyUI 0.9.1-alpha

.NET 10.0 This package targets .NET 10.0. The package is compatible with this framework or higher.
This is a prerelease version of RizzyUI. 
dotnet add package RizzyUI --version 0.9.1-alpha
                    


                    

                
NuGet\Install-Package RizzyUI -Version 0.9.1-alpha
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="RizzyUI" Version="0.9.1-alpha" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="RizzyUI" Version="0.9.1-alpha" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="RizzyUI" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add RizzyUI --version 0.9.1-alpha
                    


                    

                
#r "nuget: RizzyUI, 0.9.1-alpha"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package RizzyUI@0.9.1-alpha
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=RizzyUI&version=0.9.1-alpha&prerelease
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=RizzyUI&version=0.9.1-alpha&prerelease
                    


                            Install as a Cake Tool

<img src="https://jalexsocial.github.io/Rizzy/media/rizzy-logo.png?cache=bust3" width="600"/>

RizzyUI: Modern UI Composition for ASP.NET SSR

<div align="center">

NuGet npm License: MIT

</div>

Composable SSR UI for ASP.NET Core - no WASM runtime, no SignalR circuit, no SPA rewrite.

If you like MVC or Razor Pages because they’re explicit, stateless, and easy to debug, RizzyUI keeps that model and modernizes the view layer:

  • SSR Razor Components for composition
  • Tailwind CSS v4 for styling
  • Alpine.js for local interactivity
  • HTMX for hypermedia-driven updates

RizzyUI runs in the normal ASP.NET Core request/response lifecycle. You can View Source, set breakpoints, and reason about what happened.

Documentation Site

For detailed documentation and examples, please visit the Rizzy Documentation Site. You can find a demo of all components along with documentation of RizzyUI at the RizzyUI Component Documentation site.

Who this is for

RizzyUI is a good fit if you want component reuse without switching to a SPA.

  • ASP.NET Core teams that want a modern component model but still want SSR.
  • MVC/Razor Pages apps suffering from partial-view sprawl, global JS, and CSS leakage.
  • SSR-first projects where SEO, initial render, and debuggability matter.

Not a fit for

  • Offline-first applications that depend on heavy client-side sync/storage.
  • Ultra high-frequency real-time experiences where WebSockets/streaming is the product.
  • Teams avoiding Tailwind—RizzyUI is Tailwind-first.

Tech stack (what you’re actually using)

RizzyUI is not a new platform. It’s a set of components + conventions built on common web primitives.

  • Structure: Razor Components (C#) — SSR only
  • Styling: Tailwind CSS v4
  • Interactivity: Alpine.js
  • Updates: HTMX (HTML fragments over HTTP)

Installation

You install:

  1. the .NET package (components + server integration), and
  2. the NPM package (client-side assets and build pipeline).

1) Install packages

dotnet add package RizzyUI
npm install @jalexsocial/rizzyui
npm install -D tailwindcss @tailwindcss/cli

2) Register services + middleware

In Program.cs:

using RizzyUI;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRizzyUI(config =>
{
    config.DefaultTheme = RzTheme.ArcticTheme;
});

var app = builder.Build();

app.UseRizzy();

app.Run();

3) Wire up the document head

In App.razor (or your main layout):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    
    <link rel="stylesheet" href="app.css" />

    
    <RzHeadOutlet />

    
    <RzThemeProvider />
</head>
<body>
    <Routes />
</body>
</html>

The shift: component-driven SSR (without changing your architecture)

RizzyUI isn’t asking you to replatform. It’s a better way to compose views.

Before: partials + global JS

Partials tend to leak styling and force manual ID management for JS.


<div class="card @ViewData["Classes"]" id="card-@Model.Id">
  <h3>@Model.Name</h3>
  <button onclick="toggleDetails(@Model.Id)">Toggle</button>
  <div id="details-@Model.Id" style="display:none;">...</div>
</div>

After: components + local state

You get encapsulated markup, typed parameters, and scoped behavior via Alpine.

// UserCard.razor
<RzCard class="w-[350px]">
    <CardHeader>
        <CardTitle>@User.Name</CardTitle>
    </CardHeader>
    <CardContent>
        <div x-data="{ open: false }">
            <RzButton x-on:click="open = !open" Variant="ThemeVariant.Outline">
                Toggle Details
            </RzButton>
            <div x-show="open" x-collapse>
                <p>@User.Email</p>
            </div>
        </div>
    </CardContent>
</RzCard>

@code {
    [Parameter] public UserData User { get; set; } = default!;
}

Advanced: the Alpine “code-behind” pattern

Inline Alpine strings (x-on:click="...") are great until they aren’t. For more complex behavior, RizzyUI supports a code-behind approach:

  • your JS lives next to the component
  • RizzyUI handles bundling/registration
  • CSP nonces are handled automatically

1) Component (Counter.razor)

@attribute [RzAlpineCodeBehind]

<RzAlpineComponent For="this" Name="counter" AsChild>
    <div class="flex gap-4">
        <span x-text="count"></span>
        <button x-on:click="increment">Increment</button>
    </div>
</RzAlpineComponent>

2) Logic (Counter.razor.js)

export default () => ({
    count: 0,
    increment() {
        this.count++;
    }
});

Tradeoffs (honest costs)

RizzyUI is intentionally “boring tech,” but there are still costs:

  • Build tooling: Tailwind implies Node.js + a build step.
  • Logic near markup: Alpine keeps things local, but you’ll want conventions to avoid messy templates.
  • Hypermedia mindset: HTMX shines when you’re comfortable returning HTML fragments, not just full pages.

License

RizzyUI is licensed under the MIT License.

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
0.9.1-alpha 0 6/9/2026
0.9.0-alpha 94 2/7/2026
0.8.6-alpha 226 5/26/2025
0.8.5-alpha 165 5/23/2025
0.8.0-alpha 208 5/6/2025
0.7.0-alpha 259 4/20/2025
0.6.2-alpha 537 3/25/2025
0.6.1-alpha 235 3/10/2025
0.6.0-alpha 306 3/6/2025
0.5.0-alpha 178 3/2/2025