ShellUI – Build production-ready Blazor components with a few clicks

CLI-first Blazor component library inspired by shadcn/ui. The v0.3.0 release candidate ships template-compile, CSP, and CLI install fixes from real-world Blazor Server use — now in internal testing ahead of the v0.3.0 final.

Getting Started Star on GitHub

Try it out.

shellui init

Get Started in Minutes

Install ShellUI and add components to your Blazor project with just a few commands. Components are copied directly into your codebase, giving you full control.

Install the CLI

Install ShellUI CLI globally using .NET tools

Initialize Your Project

Run shellui init in your Blazor project directory

Add Components

Use shellui add to copy components into your project

View Quickstart Guide

Terminal

dotnet tool install -g ShellUI.CLI --version 0.3.0-rc.1

# Installing ShellUI CLI...

shellui init

# Initializing ShellUI in your project...

shellui add button card input

# Components added successfully!

Release Candidate 1

What's Fixed in v0.3.0-rc.1

Five branches of integration-tested fixes against the alpha series, surfaced from real-world Blazor Server consumer use. Under internal testing — v0.3.0 final ships from this RC if no blockers surface.

Template Compilation

ChartVariants, PieChart, and DashboardLayout02 templates now compile — verbatim-string escapes fixed

CSP-Safe Runtime

ThemeToggle, InputOTP, and ThemeService no longer use eval() — strict CSP policies just work

Idempotent shellui init

Patches App.razor with render modes, theme bootstrap, and shellui.js — safe to re-run

CLI Install Fixes

shellui add data-table now installs DataTableModels.cs and auto-pulls NuGet deps; chart tooltips render

Read the full release notes

Built on Technologies You Trust

EditProfile.razor

<Dialog Open="@isOpen"
       OpenChanged="@((bool v) => isOpen = v)">
  <DialogTrigger>
    <Button>Edit Profile</Button>
  </DialogTrigger>
  <DialogContent Class="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>
        Update your profile information below.
      </DialogDescription>
    </DialogHeader>
    <div class="space-y-4 py-4">
      <div class="space-y-2">
        <Label>Name</Label>
        <Input @bind-Value="name" />
      </div>
      <div class="space-y-2">
        <Label>Email</Label>
        <Input @bind-Value="email" Type="email" />
      </div>
    </div>
    <DialogFooter>
      <DialogClose>
        <Button Variant="ButtonVariant.Outline">
          Cancel
        </Button>
      </DialogClose>
      <Button OnClick="HandleSave">
        Save Changes
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

@code {
    private bool isOpen = false;
    private string name = "";
    private string email = "";

    private void HandleSave()
    {
        // Save profile changes
        isOpen = false;
    }
}

Compound Components, Native Blazor

ShellUI uses compound component patterns — nest Dialog, Sheet, and Accordion sub-components just like native Blazor. Full RenderFragment support, event callbacks, and two-way binding.

Familiar Razor syntax with RenderFragments

Full IntelliSense support and compile-time type checking

Modify component code directly since it's in your project

Event handlers and all standard Blazor features

Build your Blazor Apps with Confidence

Everything you need to create beautiful, accessible, and performant Blazor applications

CLI-First Approach

Components are copied directly into your project, giving you complete ownership and the freedom to customize everything

Type-Safe Variants

Enum-based variants with Class Variance Authority (CVA) for compile-time safety and IntelliSense support

Enhanced Accessibility

WCAG 2.1 AA compliant with improved ARIA attributes, keyboard navigation, and screen reader support

shadcn/ui Patterns

Built following shadcn/ui architecture with CVA, compound variants, and modern React patterns adapted for Blazor

Fully Customizable

Theme with CSS variables or use tweakcn for instant theme generation

Comprehensive Library

Forms, layouts, navigation, data display, interactive elements, charts, and advanced components

Get Started