Build production-ready Blazor components with a few clicks

v0.2.0 - Production Ready80 Components

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

http://localhost:5249

ShellUI initialized!Listening on http://localhost:5249

 Terminal
PS C:\MyApp> shellui init   
  ███████╗██╗  ██╗███████╗██╗     ██╗     ██╗   ██╗██╗
  ██╔════╝██║  ██║██╔════╝██║     ██║     ██║   ██║██║
  ███████╗███████║█████╗  ██║     ██║     ██║   ██║██║
  ╚════██║██╔══██║██╔══╝  ██║     ██║     ██║   ██║██║
  ███████║██║  ██║███████╗███████╗███████╗╚██████╔╝██║
  ╚══════╝╚═╝  ╚═╝╚══════╝╚══════╝╚══════╝ ╚═════╝ ╚═╝
               Detected: BlazorServerProject: MyAppNamespace: MyAppChecking for Bootstrap files to clean up...Deleted: wwwroot/lib/bootstrap folderRemoved 1 Bootstrap items.Setting up Tailwind CSS...Which Tailwind CSS method do you prefer?> standalone - Use Tailwind CLI (no Node.js required, automatic builds)  npm - Use npm packages (requires Node.js, more flexible) Downloading Tailwind CSS standalone CLI...Downloading Tailwind CLI v4.1.18...Tailwind CLI downloaded successfully!Creating component folders...Created: Components/UI/Created: shellui.jsonCreating CSS files...Created: wwwroot/input.cssCreated: wwwroot/app.cssBuilding Tailwind CSS...Built: Tailwind CSS ShellUI initialized successfully! Next steps: 1. Add components: shellui add button card input 2. Browse all: shellui list 3. Run your app: dotnet run

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.2.0

Charts & data visualization, theme-aware chart containers, and Tailwind CSS v4.1.18 with 80 production-ready components.

7 Chart Components

Bar, Line, Area, Pie, and Multi-Series charts built on ApexCharts.Blazor

Chart Themes

Three built-in themes: Default, Colorful, and Monochrome with dark mode support

Theme-Aware Containers

Charts automatically use your CSS variables for borders, shadows, and colors

Custom Tooltips

Compact, shadcn-inspired HTML tooltips with multi-series and dark mode support

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

80 Components

Comprehensive library covering forms, layouts, navigation, data display, interactive elements, and advanced components

Get Started