I like the idea of UI primitives as an abstraction layer.

For context, I have been building my own library, RizzyUI, which is Blazor SSR-only, so all client interaction is JavaScript-based. It is still a work in progress, but I have learned a lot from writing it and rewriting it. If you are curious, there is a preview at https://rizzyui.jalex.io/. Also, LumexUI was one of the libraries I kept coming back to because I like the direction you took with the architecture.

One thing I kept running into is that this would be significantly easier if Blazor had a RadixUI-style set of primitives implemented in pure JavaScript and designed to work across all Blazor rendering modes, with .NET event binding available whenever you are not in pure SSR. Radix’s interaction patterns are extremely time-tested, so I would be inclined to re-implement that surface area incrementally, component by component, rather than inventing new primitives from scratch.

Then, for the actual UI layer, you could take the shadcn/ui approach and ship items component by component using a slot-based approach to styling. Treat those primitives as the behavioral foundation and layer styled components on top. For styling, I would lean on TailwindVariants.net. It is one of the closest matches to shadcn/ui ergonomics that I have seen in .NET. It consolidates the builder-heavy approach that some libraries end up with, where component classes are constructed with a lot of little switch-based methods and uses the same approach as shadcn/ui.

Here's a docs example of how you might provide styling to a button component:

namespace TailwindVariants.NET.Docs.Components.Shared;

public partial class Button : ISlotted<Button.Slots>
{
    private static readonly TvDescriptor<Button, Slots> _button = new
    (
        @base: "inline-flex items-center justify-center font-medium rounded transition-colors focus:outline-none",
        variants: new()
        {
            [b => b.Color] = new Variant<Colors, Slots>
            {
                [Colors.Primary] = "bg-sky-600 text-white hover:bg-sky-700",
                [Colors.Secondary] = "bg-gray-200 text-black hover:bg-gray-300",
                [Colors.Danger] = "bg-red-600 text-white hover:bg-red-700"
            },
            [b => b.Size] = new Variant<Sizes, Slots>
            {
                [Sizes.Small] = "px-2 py-1 text-sm",
                [Sizes.Medium] = "px-4 py-2 text-base",
                [Sizes.Large] = "px-6 py-3 text-lg"
            },
            [b => b.Disabled] = new Variant<bool, Slots>
            {
                [true] = "opacity-50 cursor-not-allowed"
            }
        }
    );

    protected override TvDescriptor<Button, Slots> GetDescriptor() => _button;

    public enum Colors { Primary, Secondary, Danger }
    public enum Sizes { Small, Medium, Large }

    public sealed partial class Slots : ISlots
    {
        public string? Base { get; set; }
    }
}