ShellUI.Components
0.3.0
dotnet add package ShellUI.Components --version 0.3.0
NuGet\Install-Package ShellUI.Components -Version 0.3.0
<PackageReference Include="ShellUI.Components" Version="0.3.0" />
<PackageVersion Include="ShellUI.Components" Version="0.3.0" />
<PackageReference Include="ShellUI.Components" />
paket add ShellUI.Components --version 0.3.0
#r "nuget: ShellUI.Components, 0.3.0"
#:package ShellUI.Components@0.3.0
#addin nuget:?package=ShellUI.Components&version=0.3.0
#tool nuget:?package=ShellUI.Components&version=0.3.0
ShellUI Components
Blazor components styled with Tailwind CSS, in the spirit of shadcn/ui, as a Razor class library.
Prefer to own and edit the component source? Use the ShellUI CLI instead; it copies the components into your project.
Install
Requires a .NET 10 project:
dotnet add package ShellUI.Components
On .NET 8 or 9, use the ShellUI CLI instead. The source it installs builds on .NET 8, 9 and 10.
Set up
Import the namespace in
Components/_Imports.razor:@using ShellUI.ComponentsMake the app interactive. Components with state or events (dialogs, dropdowns, tabs) need an interactive render mode, for example in
Components/App.razor:<HeadOutlet @rendermode="InteractiveServer" /> ... <Routes @rendermode="InteractiveServer" />Add the styles, in one of two ways:
Precompiled stylesheet. No Tailwind build needed. Add it to the
<head>inApp.razor:<link href="_content/ShellUI.Components/shellui-all.css" rel="stylesheet" />Your own Tailwind build. On build, the package writes the class names it uses to
wwwroot/shellui-classes.txt. Add it as a source in your input stylesheet, and copy the theme variables from the package'sshellui-theme.cssinto the same file:@import "tailwindcss"; @source "./shellui-classes.txt";ShellUI uses Tailwind CSS
4.3.2.
Use
<Button Variant="ButtonVariant.Outline">Cancel</Button>
<Button>Save</Button>
<Card>
<CardHeader>
<CardTitle>ShellUI</CardTitle>
</CardHeader>
<CardContent>
<p>Card content</p>
</CardContent>
</Card>
Themes
Themes come from tweakcn. With the CLI, write a theme as a stylesheet and load it after shellui-all.css:
shellui theme apply https://tweakcn.com/themes/THEME_ID --emit-override wwwroot/theme.css
<link href="theme.css" rel="stylesheet" />
Documentation
License
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net10.0
- Blazor-ApexCharts (>= 6.0.2)
- Microsoft.AspNetCore.Components.Web (>= 10.0.0)
- System.Linq.Dynamic.Core (>= 1.7.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 0.3.0 | 35 | 9/29/2026 |
| 0.3.0-rc.3 | 44 | 9/27/2026 |
| 0.3.0-rc.2 | 50 | 9/26/2026 |
| 0.3.0-rc.1 | 98 | 6/18/2026 |
| 0.3.0-alpha.3 | 71 | 6/3/2026 |
| 0.3.0-alpha.2 | 101 | 2/21/2026 |
| 0.3.0-alpha.1 | 80 | 2/17/2026 |
| 0.2.1 | 140 | 2/22/2026 |
| 0.2.0 | 134 | 2/8/2026 |
| 0.1.1 | 136 | 1/17/2026 |
| 0.1.0 | 134 | 1/16/2026 |
| 0.0.3 | 392 | 11/30/2025 |