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

CLI-first Blazor component library inspired by shadcn/ui. v0.3.0 is stable: 76 components, dependencies installed for you, tweakcn themes, and a CLI that works in Blazor projects on .NET 8, 9 and 10.

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!

Stable release

What's New in v0.3.0

Everything from the 0.3.0 alphas and release candidates. Every component is installed and built on its own in a fresh app before release.

Composable Components

Select, Dropdown, Popover, ContextMenu, NavigationMenu, Carousel, Tabs and more, with their parts installed together

.NET 8, 9 & 10

The CLI runs on the .NET 10 SDK and its components build in Blazor projects on .NET 8, 9 and 10

shellui init that just works

Sets up Tailwind 4.3.2, the theme and App.razor, and removes the template's Bootstrap — safe to re-run

Dependencies Handled

shellui add installs sub-components, models, NuGet packages and _Imports usings; tweakcn themes via shellui theme

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