Skip to content

Latest commit

 

History

History

ShellUI.CLI

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

README.md

ShellUI

ShellUI CLI

shellui sets up Tailwind CSS in a Blazor project and copies ShellUI components into it as source you own, in the spirit of shadcn/ui.

Install

The tool runs on .NET 8 or later. The projects it sets up can target .NET 8, 9 or 10:

dotnet tool install --global ShellUI.CLI

Or as a local tool, invoked as dotnet shellui:

dotnet new tool-manifest
dotnet tool install --local ShellUI.CLI

Quick start

From the root of a Blazor project:

shellui init
shellui add button card dialog
dotnet watch

init sets up Tailwind CSS 4.3.2 (the standalone executable, or npm), writes the default theme to wwwroot/input.css, adds a build step that compiles it to wwwroot/app.css, and patches App.razor with an interactive render mode, a theme script, and shellui.js. It removes the template's local Bootstrap copy and its <link>, and restyles the template's sample pages if you haven't edited them.

add writes each component and everything it depends on to Components/UI/. It also adds the NuGet packages, stylesheet links, and _Imports.razor usings the components need.

Commands

Command Purpose
init Set up ShellUI and Tailwind in the current project
add <names...> Install components and their dependencies (add all for the whole library)
list List the 98 components and blocks, with --installed or --available filters
remove <names...> Delete installed component files
update [names...] Rewrite installed components from the current templates (all of them when no names are given)
doctor Check the project's ShellUI setup and say how to fix each problem
migrate [names...] Rewrite your pages for template API changes, showing a diff and asking first
theme init <url-or-id> Run init, then apply a tweakcn theme
theme apply <url-or-id> Apply a tweakcn theme to wwwroot/input.css, or write an override file with --emit-override <path>
theme update Re-apply the theme recorded in shellui.theme.lock

init options:

  • --tailwind standalone|npm selects how Tailwind is installed. standalone needs no Node.js. npm mode runs npm through cmd, so it only works on Windows.
  • --yes runs without prompts; Tailwind defaults to standalone.
  • --force re-initializes a project that already has shellui.json.
  • --dashboard 02|01|none sets up a dashboard layout (sticky or scrolling header) and makes it the default layout. Without the option, init asks; --yes alone means none.
  • --replace-layout switches to the dashboard even when the app has a custom layout.
  • --style is recorded in shellui.json. All styles currently install the same templates.

add accepts names separated by spaces or commas, and --force overwrites existing files. add all installs every component except the layout blocks (dashboard-*, auth-*), and --except <names...> leaves out components and everything that needs them. update skips files you have changed since the CLI wrote them; update --force and add --force overwrite your copies, so commit customized components first. After update, migrate rewrites your own pages for template API changes (--dry-run to only show them, --yes to skip the prompt). add dashboard-01 or add dashboard-02 also makes the dashboard the default layout and builds its sidebar links from your pages. remove deletes a layout block's file from Components/Layout/ and lists the files that still use it, such as Routes.razor.

Generated files

Path Purpose
Components/UI/ Installed components
Components/Layout/ Dashboard layouts, when installed
wwwroot/input.css Tailwind input and theme variables
wwwroot/app.css Compiled CSS
wwwroot/shellui.js JavaScript used by some components
Build/ShellUI.targets Tailwind build step
shellui.json ShellUI settings and installed components
shellui.theme.lock Theme source, when a theme is applied

Documentation

License

MIT