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

v0.2.0 - Production Ready80 ComponentsNew: Charts

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 chart

NuGet Package

dotnet add package ShellUI.Components

Quick Example

<Card>
  <CardHeader>
    <CardTitle>Welcome to ShellUI</CardTitle>
    <CardDescription>Build beautiful Blazor applications</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content goes here.</p>
  </CardContent>
</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, carousels, and complex UI elements

What's New in v0.2.0

Charts & Data Visualization: 7 new chart components built on ApexCharts.Blazor
Chart Themes: Three built-in themes (Default, Colorful, Monochrome)
Theme-Aware Charts: Charts automatically use your theme's CSS variables
Custom Tooltips: Compact, shadcn-inspired chart tooltips with dark mode support
Tailwind CSS v4.1.18: Updated to latest stable Tailwind release

Key Features

CLI-First: Copy components directly to your codebase for full control
Hybrid Workflow: CLI + NuGet packages for maximum flexibility
Tailwind CSS v4.1.18: Modern styling with standalone CLI (no Node.js required)
80 Production-Ready Components: Comprehensive component library
Type-Safe Variants: CVA patterns with full C# type safety
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: oklch(0.9900 0 0);
  --foreground: oklch(0 0 0);
  --primary: oklch(0 0 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9400 0 0);
  --secondary-foreground: oklch(0 0 0);
  /* ... more variables */
}

ShellUI Documentation