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

v0.3.0-alpha.2 — Latest

CLI-first Blazor component library inspired by shadcn/ui. Now with charts & data visualization, type-safe variants, and CVA patterns. Copy components directly into your project, customize everything, and build beautiful applications with Tailwind CSS v4.1.18.

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

# Installing ShellUI CLI...

shellui init

# Initializing ShellUI in your project...

shellui add button card input

# Components added successfully!

What's New in v0.3.0-alpha.2

Compositional subcomponents, CLI registry fixes, new utility components, and more.

Compositional Patterns

DrawerTrigger, SheetTrigger, and more subcomponents — no external open state required

CLI Registry Fixed

shellui add drawer and shellui add sheet now correctly install all subcomponent files

New Components

Callout, CopyButton, LinkCard, PrevNextNav, Sonner, and Stepper — all CLI-installable

Chart Fixes

Tooltip generation fixed, chart-styles auto-installs to wwwroot and injects the link tag

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