Installation

ShellUI offers two installation methods to fit your workflow preferences. Choose the method that works best for your project.

dotnet tool install -g ShellUI.CLI

cd your-blazor-project
shellui init

# Add individual components
shellui add button input card dialog

# Add multiple components at once
shellui add table badge avatar alert

# See all available components
shellui list

YourProject/
├── Components/
│   └── UI/                    # ShellUI components
│       ├── Button.razor
│       ├── Input.razor
│       ├── Card.razor
│       └── ...
├── wwwroot/
│   ├── input.css              # Tailwind input
│   └── app.css                # Compiled CSS
├── .shellui/
│   └── bin/                   # Tailwind CLI binary
├── tailwind.config.js         # Tailwind configuration
├── shellui.json              # ShellUI configuration
└── Build/
    └── ShellUI.targets       # MSBuild integration

dotnet add package ShellUI.Components

npm install -D tailwindcss@^4.1.14 @tailwindcss/cli@^4.1.14

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/*.{razor,html,cshtml}",
    "./wwwroot/**/*.{js,css}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@import "tailwindcss";

<Target Name="BuildTailwind" BeforeTargets="Build">
  <Exec Command="npx @tailwindcss/cli -i wwwroot/input.css -o wwwroot/app.css --watch=false" />
</Target>

Project Types

ShellUI works with all Blazor hosting models. The setup process is the same regardless of your project type.

Blazor Server

Works out of the box with Blazor Server applications. No additional configuration needed.

# Create a new Blazor Server project
dotnet new blazorserver -n MyApp
cd MyApp

# Install ShellUI
shellui init
shellui add button card input

Blazor WebAssembly

Fully supported with Blazor WebAssembly (WASM) projects.

# Create a new Blazor WASM project
dotnet new blazorwasm -n MyApp
cd MyApp

# Install ShellUI
shellui init
shellui add button card input

Blazor Hybrid

Works seamlessly with Blazor Hybrid applications (MAUI, WPF, WinForms).

# Create a new Blazor Hybrid project
dotnet new maui-blazor -n MyApp
cd MyApp

# Install ShellUI
shellui init
shellui add button card input

Blazor Interactive Server

Supports .NET 9's Interactive Server rendering mode.

# Create a new Blazor Interactive Server project
dotnet new blazor -n MyApp
cd MyApp

# Install ShellUI
shellui init
shellui add button card input

Import Components

After adding components, import them in your _Imports.razor or individual Razor files:

@using YourProject.Components.UI

Verification

After installation, verify everything is working:

1. Build your project: dotnet build
2. Check that wwwroot/app.css was generated (for CLI method, this happens automatically)
3. Use a component in your Razor file
4. Ensure proper styling is applied

Quick Test

Add a simple component to test:

@page "/test"
@using YourProject.Components.UI

<Button>Test Button</Button>

If the button renders with proper styling, your installation is successful!

Troubleshooting

Common Issues

Tailwind CSS not compiling:

• Ensure the correct Tailwind version (4.1.14)
• Check your tailwind.config.js paths
• Verify Node.js installation (if using npm method)

Components not rendering:

• Check that components are in Components/UI/ folder
• Ensure proper namespace imports
• Verify Tailwind CSS is loaded

CLI not found:

• Restart your terminal/command prompt
• Check dotnet tool list -g for installation
• Ensure PATH includes .NET tools directory

Getting Help

• GitHub Issues
• Documentation
• Community Discussions