Shellui

<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="images/Shellui-dark.png"> <source media="(prefers-color-scheme: light)" srcset="images/Shellui-light.png"> <img alt="ShellUI Logo" src="images/Shellui-light.png" width="120"> </picture> </p> <h1 align="center">ShellUI</h1> <p align="center"> A modern, CLI-first Blazor component library inspired by <a href="https://ui.shadcn.com/">shadcn/ui</a>.<br/> Copy components directly into your project and customize them to match your needs. </p> <p align="center"> <a href="https://github.com/shellui-dev/shellui"><img src="https://img.shields.io/github/stars/shellui-dev/shellui?style=flat-square" alt="GitHub stars"></a> <a href="https://www.nuget.org/packages/ShellUI.Components"><img src="https://img.shields.io/nuget/v/ShellUI.Components?style=flat-square&logo=nuget&color=004880" alt="NuGet"></a> <a href="https://www.nuget.org/packages/ShellUI.CLI"><img src="https://img.shields.io/nuget/v/ShellUI.CLI?style=flat-square&logo=nuget&label=CLI&color=004880" alt="CLI"></a> <a href="https://github.com/shellui-dev/shellui/blob/main/LICENSE.txt"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="License"></a> </p> <p align="center"> <a href="https://star-history.com/#shellui-dev/shellui&Date"> <img height="150" alt="Star History Chart" src="https://api.star-history.com/svg?repos=shellui-dev/shellui&type=Date" /> </a> </p>

---

New here? Check out the Quick Start section below!

Vision

ShellUI transforms Blazor component development with a hybrid approach:

• CLI-First: Copy components to YOUR codebase for full control (shellui add button)
• NuGet Option: Traditional package install for quick starts (dotnet add package ShellUI.Components)
• Choose your workflow: Use CLI for customization, NuGet for speed, or mix both
• Powered by Tailwind CSS v4.1.18 (standalone CLI - no Node.js required!)
• Best of both worlds: flexibility when you need it, convenience when you want it

Current Status: 100 Components (Alpha) 🎉

ShellUI is in alpha! Test and provide feedback before we ship stable. We've completed:

• ✅ CLI Tool (dotnet tool install -g ShellUI.CLI)
• ✅ NuGet Package (dotnet add package ShellUI.Components)
• ✅ 100 Components with Tailwind v4.1.18 *(actual components only; *-variants, -service auto-installed)
• ✅ Hybrid Workflow (CLI + NuGet)
• ✅ No Node.js Required (Standalone Tailwind CLI)
• ✅ Comprehensive Documentation
• ✅ Working Demos & Examples

Ready to use today! 🚀

What's Working Today 🚀

✅ CLI Tool + NuGet Package

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

# Initialize in your Blazor project (choose npm or standalone)
shellui init

# For CI/CD or automated environments:
shellui init --yes  # Uses standalone Tailwind with default options

# Add components
shellui add button input card dialog

# List all available components
shellui list

⚠️ Note: The CLI tool must be installed first. Use shellui commands (not dotnet shellui).

📦 Unified Versioning System

ShellUI uses a centralized versioning system where all components, CLI tool, and packages share the same version number. This ensures consistency and simplifies dependency management.

Version Update Process

To update ShellUI version across all components:

1. Edit Directory.Build.props in the repository root:

   <ShellUIVersion>0.3.0</ShellUIVersion>
   <ShellUIVersionSuffix></ShellUIVersionSuffix>  <!-- Leave empty for stable releases -->
   

2. Clean and rebuild all projects:

   dotnet clean
   dotnet build --configuration Release
   

This single file change updates:

• ✅ All NuGet packages (ShellUI.CLI, ShellUI.Components)
• ✅ All component templates (~100 installable components)
• ✅ Build configurations and metadata

Example for pre-release:

<ShellUIVersion>0.3.0</ShellUIVersion>
<ShellUIVersionSuffix>alpha.2</ShellUIVersionSuffix>

Results in version: 0.3.0-alpha.2

Component Versioning Strategy

By Design: All components share the same version because they:

• Work together as a cohesive system
• Depend on shared utilities and theming
• Follow consistent design patterns
• Are tested together

For Advanced Users: Future versions may support component-specific versioning for power users who need granular control.

✅ 100 Production-Ready Components

Form Components (14): Button, Input, Textarea, Select, Checkbox, RadioGroup, RadioGroupItem, Switch, Toggle, Label, Slider, Form, InputOTP

Layout Components (15): Card, Dialog, Sheet, Drawer, Popover, Tooltip, Separator, ScrollArea, Resizable, Collapsible, Accordion, Breadcrumb, BreadcrumbItem, Sonner, Toast

Navigation Components (12): Navbar, Sidebar, NavigationMenu, NavigationMenuItem, Menubar, MenubarItem, Pagination, Tabs, Stepper

Data Display (14): Table, TableHeader, TableBody, TableRow, TableHead, TableCell, DataTable, Badge, Avatar, Alert, Toast, Sonner, Skeleton, Progress, Loading

Interactive Components (8): Dropdown, Command, ContextMenu, HoverCard, ThemeToggle, EmptyState, FileUpload

Advanced Components (18): Calendar, DatePicker, DateRangePicker, TimePicker, Combobox, AlertDialog, Carousel, Charts (Chart, BarChart, LineChart, PieChart, AreaChart, MultiSeriesChart), CarouselItem, CarouselContent, CarouselPrevious, CarouselNext, CarouselDots

✅ Tailwind CSS v4.1.18 Integration

Two Setup Methods:

Method 1: Standalone CLI (No Node.js!)

shellui init  # Choose "standalone"
# Or: dotnet shellui init

• Downloads Tailwind CLI binary automatically
• No Node.js or npm required
• Auto-builds on project compile

Method 2: npm (If you prefer)

shellui init  # Choose "npm"
# Or: dotnet shellui init

• Installs tailwindcss@^4.1.18 + @tailwindcss/cli@^4.1.18
• Uses npx @tailwindcss/cli for builds
• Requires Node.js

🎨 Easy Theme Customization

Customize themes instantly with tweakcn:

1. Visit tweakcn and design your perfect theme
2. Copy the generated CSS variables
3. Paste into wwwroot/input.css
4. All ShellUI components update automatically!

Custom fonts? Add Google Fonts links and update your CSS variables - works seamlessly! 🔤

What's Next

Phase 1: Additional Components

Target: Q1 2026

• More advanced components
• Enhanced DataTable features (sorting/filtering)
• Charts and data visualization
• VirtualScroll for large lists
• PDFViewer component
• And more...

Phase 2: Documentation & Polish

Target: Q2 2026

• Complete documentation website
• Video tutorials
• Migration guides
• Performance optimization
• Testing infrastructure

Design Principles

1. Copy, Don't Install: Components are copied to your project, not imported from a package
2. Tailwind-First: All styling uses Tailwind CSS v4.1.18 utility classes
3. Accessible by Default: WCAG 2.1 AA compliant out of the box
4. Composable: Build complex components from simple ones
5. Customizable: Modify any component to fit your needs
6. Type-Safe: Leverage C# type system for better DX
7. Performance: Optimized for both Server and WASM scenarios
8. No Node.js Required: Standalone Tailwind CLI for maximum compatibility

Architecture Decisions

Why Hybrid Approach (CLI + NuGet)?

CLI Benefits:

• Full control over component code
• Customize without forking
• Only include what you use (smaller bundles)
• No version lock-in
• Better debugging experience

NuGet Benefits:

• Traditional workflow developers know
• Faster initial setup
• Automatic updates via package manager
• Good for prototyping
• Team familiarity

Use both: Start with NuGet, migrate to CLI for components you customize heavily!

Why Tailwind v4.1.18?

• Latest stable version with v4 features
• Better performance than v3
• Improved dark mode support
• Native CSS variable support
• Smaller output CSS
• Standalone CLI (no Node.js required!)

Component Structure

• Components/UI/ - ShellUI components (Button.razor, Input.razor, Card.razor, ...)
• Components/UI/Variants/ - Variant classes (*Variants.cs)
• wwwroot/ - input.css, app.css (compiled)
• .shellui/bin/ - Tailwind CLI binary (standalone)
• tailwind.config.js, shellui.json
• Build/ShellUI.targets - MSBuild integration

Developer Experience Today

Quick Start

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

# Initialize in your Blazor project (choose npm or standalone)
shellui init
# Or: dotnet shellui init

# Add components
shellui add button input card dialog
# Or: dotnet shellui add button input card dialog

shellui list  # See all 100 available components
# Or: dotnet shellui list

Use Components

@page "/example"

<Card>
    <CardHeader>
        <CardTitle>Welcome to ShellUI</CardTitle>
        <CardDescription>Build beautiful Blazor apps</CardDescription>
    </CardHeader>
    <CardContent>
        <Input Placeholder="Enter your email" Type="email" />
        <Button Class="mt-4">Subscribe</Button>
    </CardContent>
</Card>

Customize Components

Simply edit the component file in Components/UI/ - it's yours to modify!

Technical Requirements

• .NET 8.0 or higher
• Choice of Tailwind setup:
  • Standalone CLI (recommended): No Node.js required
  • npm: Requires Node.js, uses tailwindcss@^4.1.18

Comparison with Existing Solutions

| Feature | ShellUI | MudBlazor | Radzen | Blazorise | |---------|---------|-----------|--------|-----------| | CLI Installation | ✅ | ❌ | ❌ | ❌ | | NuGet Package | ✅ | ✅ | ✅ | ✅ | | Component Ownership (CLI) | ✅ | ❌ | ❌ | ❌ | | Tailwind CSS | ✅ (v4.1.18) | ❌ | ❌ | ❌ | | No Node.js Required | ✅ | N/A | N/A | N/A | | Hybrid Workflow | ✅ | ❌ | ❌ | ❌ | | Free & Open Source | ✅ | ✅ | Partial | ✅ | | Cu