Welcome to ShellUI, a modern, CLI-first Blazor component library inspired by shadcn/ui. Build beautiful, accessible, and performant web applications with our comprehensive collection of components.

Getting Started

Installation

Choose your preferred installation method:

CLI Installation (Recommended)

# Install CLI globally
dotnet tool install -g ShellUI.CLI

# Initialize in your Blazor project
shellui init

# Add components
shellui add button input card table

NuGet Package

dotnet add package ShellUI.Components

Quick Example

<Card>
  <Header>
    <h3 class="text-lg font-semibold">Welcome to ShellUI</h3>
    <p class="text-sm text-muted-foreground">Build beautiful Blazor apps</p>
  </Header>
  <ChildContent>
    <Input Placeholder="Enter your email" Type="email" />
    <Button Class="mt-4">Subscribe</Button>
  </ChildContent>
</Card>

Component Categories

Explore our comprehensive component library, organized by category:

Form Components

Buttons, inputs, selects, and form controls

Layout Components

Cards, dialogs, sheets, and structural elements

Navigation Components

Menus, breadcrumbs, tabs, and navigation elements

Data Display

Tables, badges, avatars, and data presentation

Interactive Components

Dropdowns, tooltips, and interactive elements

Advanced Components

Calendars, charts, and complex UI elements

Key Features

CLI-First: Copy components directly to your codebase for full control
Tailwind CSS v4.1.14: Modern styling with standalone CLI (no Node.js required)
69 Production-Ready Components: Comprehensive component library
Type-Safe: Full C# type safety throughout
Accessible: WCAG 2.1 AA compliant by default
Performance Optimized: Built for both Server and WASM scenarios
Customizable: Easy theme customization with CSS variables

Architecture

ShellUI offers a unique hybrid approach:

Copy Components: Like shadcn/ui, components are copied to your project
NuGet Option: Traditional package installation for quick starts
Tailwind Integration: Standalone CLI or npm setup options
Build Integration: Automatic CSS compilation on project build

Theming

Customize your theme instantly with tweakcn or modify CSS variables:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --secondary: 210 40% 96%;
  /* ... more variables */
}

ShellUI Documentation