diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 6257afb..015acb0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,6 +30,39 @@ jobs:
     - name: Restore dependencies
       run: dotnet restore ShellUI.slnx
 
+    # Generates src/ShellUI.Components/wwwroot/shellui-all.css fresh on every run.
+    # File is gitignored — the Windows + Linux Tailwind CLI binaries produce
+    # byte-different output, so drift-checking a committed file failed spuriously.
+    # Instead we regenerate and validate content properties.
+    - name: Build precompiled CSS bundle
+      # Invoke via `bash` (not `./script.sh`) so we don't rely on the file's
+      # executable bit. Windows contributors can edit and commit without
+      # remembering `git update-index --chmod=+x`.
+      run: |
+        set -euxo pipefail
+        bash scripts/rebuild-precompiled-css.sh
+        BUNDLE=src/ShellUI.Components/wwwroot/shellui-all.css
+        test -f "$BUNDLE" || (echo "ERROR: bundle was not produced"; exit 1)
+
+        # Content assertions using grep -F (fixed-string, no regex escaping headaches).
+        # These catch classes of bugs we've actually shipped before — worth the paranoia.
+        grep -Fq -- '--background' "$BUNDLE" || (echo "ERROR: theme vars not in bundle"; exit 1)
+        grep -Fq '.bg-background' "$BUNDLE" || (echo "ERROR: core utility rule missing"; exit 1)
+        grep -Fq 'hover\:bg-accent' "$BUNDLE" || (echo "ERROR: hover: modifier rules missing"; exit 1)
+        grep -Fq 'state=open' "$BUNDLE" || (echo "ERROR: data-[state=open] arbitrary value not compiled"; exit 1)
+        grep -Fq 'px-2\.5' "$BUNDLE" || (echo "ERROR: Badge padding class px-2.5 missing (variant .cs helpers not scanned?)"; exit 1)
+        grep -Fq 'border-transparent' "$BUNDLE" || (echo "ERROR: border-transparent missing (variant .cs helpers not scanned?)"; exit 1)
+
+        # Size guard — well above the ~77KB current 68 components emit, tight
+        # enough to catch a runaway (someone disabling minify, dumping the whole
+        # tailwind base without tree-shake, etc.).
+        size=$(wc -c < "$BUNDLE")
+        echo "precompiled bundle size: ${size} bytes"
+        if [ "$size" -gt 150000 ]; then
+          echo "ERROR: bundle exceeded 150KB — investigate before shipping."
+          exit 1
+        fi
+
     - name: Build
       run: dotnet build ShellUI.slnx --no-restore --configuration Release
 
@@ -97,6 +130,13 @@ jobs:
         test -d "$LOCAL_FEED" || (echo "local feed not found at $LOCAL_FEED — did the pack step run?"; exit 1)
         ls "$LOCAL_FEED"/*.nupkg | head -3
 
+        # DIAGNOSTIC: dump what's actually inside the fresh nupkg. The precompiled
+        # bundle must ship as a static web asset for consumers to `<link>` it.
+        echo "---nupkg contents (looking for shellui-all.css):---"
+        unzip -l "$LOCAL_FEED"/ShellUI.Components*.nupkg | grep -E 'shellui-all|staticwebassets/' | head -10 || echo "  (no matches — bundle not in nupkg!)"
+        echo "---source wwwroot check:---"
+        ls -la "$GITHUB_WORKSPACE/src/ShellUI.Components/wwwroot/" | head -10
+
         TMPDIR=$(mktemp -d)
         mkdir -p "$TMPDIR/app" && cd "$TMPDIR/app"
         dotnet new blazor -o NuGetSmoke --no-restore
@@ -114,6 +154,14 @@ jobs:
         </configuration>
         EOF
 
+        # Evict every cached ShellUI.Components from ~/.nuget/packages before restore.
+        # The runner-level cache is restored from actions/cache and may contain a
+        # stale copy of the current version from an earlier CI run (before we added
+        # the precompiled bundle, .cs scan, etc.). NuGet prefers cached over local
+        # feeds when version matches, so a stale cache silently masks the fresh
+        # nupkg. Wildcard covers any version — future-proof.
+        rm -rf ~/.nuget/packages/shellui.components
+
         dotnet add package ShellUI.Components --prerelease
 
         # The safelist gets copied into wwwroot/ during the consumer's build by
@@ -133,6 +181,31 @@ jobs:
         grep -q 'bg-background' "$SAFELIST" || (echo "safelist appears malformed — missing core Tailwind class 'bg-background'"; exit 1)
         wc -l "$SAFELIST"
 
+        # In .NET 10, MapStaticAssets() doesn't physically copy static web assets
+        # from referenced packages into the consumer's bin/ during `dotnet build`
+        # — it uses a manifest and reads from the extracted NuGet cache at runtime.
+        # So the correct assertion is "does the file exist in the extracted package
+        # cache after restore", which proves it'll be served at
+        # `_content/ShellUI.Components/shellui-all.css` in the running app.
+        BUNDLE="$(find ~/.nuget/packages/shellui.components -name 'shellui-all.css' -type f | head -1)"
+        if [ -z "$BUNDLE" ]; then
+          echo "ERROR: shellui-all.css not in consumer's extracted NuGet cache — the pure-NuGet install path is broken."
+          echo "---consumer's extracted NuGet cache tree:---"
+          find ~/.nuget/packages/shellui.components -type f 2>/dev/null | head -30
+          exit 1
+        fi
+        echo "found bundle at: $BUNDLE"
+        BUNDLE_SIZE=$(wc -c < "$BUNDLE")
+        echo "bundle size: $BUNDLE_SIZE bytes"
+
+        # Spot-check a handful of representative rules using fixed-string grep
+        # (no regex escaping headaches). These catch classes of bugs we've hit.
+        grep -Fq -- '--background' "$BUNDLE" || (echo "ERROR: bundle missing --background theme var"; exit 1)
+        grep -Fq '.bg-background' "$BUNDLE" || (echo "ERROR: bundle missing .bg-background utility"; exit 1)
+        grep -Fq 'hover\:bg-accent' "$BUNDLE" || (echo "ERROR: bundle missing hover:bg-accent modifier rule"; exit 1)
+        grep -Fq 'state=open' "$BUNDLE" || (echo "ERROR: bundle missing data-[state=open] arbitrary-value modifier"; exit 1)
+        grep -Fq 'px-2\.5' "$BUNDLE" || (echo "ERROR: bundle missing Badge padding — .cs variant scan regression?"; exit 1)
+
     - name: Upload build artifacts
       uses: actions/upload-artifact@v4
       with:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 7325da4..823d79b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -36,6 +36,19 @@ jobs:
     - name: Restore dependencies
       run: dotnet restore ShellUI.slnx
 
+    # Generate the precompiled CSS bundle before build so releases always ship
+    # a fresh one. File is gitignored — regenerated on every CI/release run.
+    - name: Build precompiled CSS bundle
+      run: |
+        set -euxo pipefail
+        bash scripts/rebuild-precompiled-css.sh
+        BUNDLE=src/ShellUI.Components/wwwroot/shellui-all.css
+        test -f "$BUNDLE" || (echo "ERROR: bundle was not produced"; exit 1)
+        # Content sanity — same assertions ci.yml runs.
+        grep -q -- '--background:' "$BUNDLE" || (echo "ERROR: theme vars missing"; exit 1)
+        grep -q '\.bg-background' "$BUNDLE" || (echo "ERROR: utilities missing"; exit 1)
+        echo "release bundle size: $(wc -c < "$BUNDLE") bytes"
+
     - name: Build
       run: dotnet build ShellUI.slnx --no-restore --configuration Release
 
diff --git a/.gitignore b/.gitignore
index e3bf44c..db285ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -365,4 +365,9 @@ FodyWeavers.xsd
 shellui-installation-tests/
 
 # Preview publish output (testing artifacts)
-preview-publish/
\ No newline at end of file
+preview-publish/
+# Generated Tailwind bundle — regenerated in CI, not committed.
+# Windows and Linux Tailwind CLI produce byte-different output; committing
+# would cause spurious drift-check failures. Local devs: run
+# `bash scripts/rebuild-precompiled-css.sh` before running Path A tests.
+src/ShellUI.Components/wwwroot/shellui-all.css
diff --git a/README.md b/README.md
index d24c395..ec29254 100644
--- a/README.md
+++ b/README.md
@@ -315,46 +315,185 @@ ShellUI ships two NuGet packages — the CLI is the primary install path; the ru
 
 ## Installation
 
-Two paths — pick based on whether you already have Tailwind set up.
+**Four install paths.** Pick one — they cover every "shape" of Blazor / static project.
 
-### Path A — NuGet + your existing Tailwind setup (new in 0.4.x)
+### 🚦 Quick decision matrix
 
-If your project already builds Tailwind, install the runtime DLL via NuGet and add one line to your `input.css`:
+| I want to… | Use |
+|---|---|
+| Ship the fastest — one `<link>` tag, no build config | **Path A** — NuGet + precompiled bundle |
+| Tree-shaken CSS, I already run Tailwind for my own utilities | **Path B** — NuGet + safelist |
+| Own the component source code, restyle by editing `.razor` files | **Path C** — CLI |
+| Prototype in a static HTML page or JSFiddle without NuGet at all | **Path D** — CDN |
+
+The four paths coexist cleanly. You can even mix them (use CLI for a few customized components and NuGet for the rest).
+
+---
+
+### Path A — NuGet + precompiled CSS bundle (simplest, new in 0.4.x)
+
+**Who it's for:** you want components on screen with minimum ceremony. No Tailwind config, no npm, no CLI. Just NuGet and a `<link>` tag.
+
+**Setup (2 lines of code):**
+
+```bash
+dotnet add package ShellUI.Components
+```
+
+```razor
+@* App.razor <head> *@
+<link href="_content/ShellUI.Components/shellui-all.css" rel="stylesheet" />
+
+@* _Imports.razor *@
+@using ShellUI.Components
+```
+
+Done. `<Button>`, `<Card>`, `<Dialog>` etc. all render fully styled.
+
+**Benefits:**
+- ✅ **Fastest to set up** — 30 seconds from `dotnet new blazor` to styled components
+- ✅ **Zero build step for CSS** — the package ships a pre-compiled ~77KB bundle
+- ✅ **No downloads at build time** — no Tailwind binary, no npm install
+- ✅ **Deterministic** — the exact CSS you see locally is the exact CSS that ships
+- ✅ **Works offline** — no network dep, ever
+- ✅ **All 68 components styled** — regardless of which ones you use
+
+**Trade-offs:**
+- ❌ **No tree-shaking** — you pay ~77KB even if you only use 3 components (negligible for most sites)
+- ❌ **Theming via override only** — theme vars are baked into the bundle. You customize by *overriding* CSS variables in a later `<style>` block, not by editing an `input.css`. Works fine for color tweaks; less flexible for structural theme changes.
+
+**Best for:** new projects, prototypes, teams that don't already run Tailwind, "just get me components" scenarios.
+
+---
+
+### Path B — NuGet + your existing Tailwind setup (tree-shaken, new in 0.4.x)
+
+**Who it's for:** your project already runs Tailwind for your own utility classes, and you want ShellUI's classes tree-shaken into the same compiled output.
+
+**Setup:**
 
 ```bash
 dotnet add package ShellUI.Components
 ```
 
-The package ships a `shellui-classes.txt` safelist at `wwwroot/shellui-classes.txt` in your project. Wire Tailwind to scan it:
+The package copies `shellui-classes.txt` (auto-generated safelist of every Tailwind class ShellUI uses) into your `wwwroot/`. Point Tailwind at it:
 
 ```css
 /* wwwroot/input.css */
 @import "tailwindcss";
 @source "./shellui-classes.txt";
+
+/* Your own theme variables — full source of truth, paste tweakcn output here */
+:root {
+    --background: oklch(0.99 0 0);
+    --foreground: oklch(0 0 0);
+    /* ... */
+}
+```
+
+```razor
+@* _Imports.razor *@
+@using ShellUI.Components
 ```
 
-`@using ShellUI.Components` in your `_Imports.razor` and you're done. Tailwind tree-shakes — only classes that actually appear in your code (yours + ShellUI's) end up in the compiled CSS.
+**Benefits:**
+- ✅ **Tree-shaken CSS** — only classes your compiled app *actually uses* are emitted (~30-50KB for a typical site)
+- ✅ **Single Tailwind build** — ShellUI's classes and your own classes compile in one pass
+- ✅ **Your `input.css` is the theme source of truth** — paste tweakcn output directly; no cascade tricks
+- ✅ **Composable** — add your own utilities, `@apply`, custom `@theme` blocks freely
 
-### Path B — CLI tool (full source control, no Tailwind setup required)
+**Trade-offs:**
+- ❌ Requires you to already have (or set up) a Tailwind build pipeline
+- ❌ Slightly more setup than Path A
 
-If you want zero Tailwind config of your own, or want to edit component source directly, use the CLI:
+**Best for:** existing Blazor projects that already run Tailwind, teams that want CSS efficiency, projects with heavy custom styling on top of ShellUI.
+
+---
+
+### Path C — CLI (source ownership, shadcn-style)
+
+**Who it's for:** you want to *own* the component source code. Edit any `.razor` file directly to change behavior or styling. This is the shadcn philosophy — you don't import components, you copy them.
+
+**Setup:**
 
 ```bash
 dotnet tool install -g ShellUI.CLI
-shellui init                          # one-time setup — installs Tailwind, theme CSS, patches App.razor
+shellui init                          # one-time setup
 shellui add button card dialog        # any time you want more components
 ```
 
-The CLI copies the `.razor` files into your project. You own them — edit them however you like.
+`shellui init` automatically:
+- Downloads Tailwind standalone CLI (no Node.js needed) — or uses your npm install if you prefer
+- Writes the full default theme to `wwwroot/input.css` (`:root`, `.dark`, `@theme inline`)
+- Patches `App.razor` with `@rendermode="InteractiveServer"`, theme bootstrap script, `shellui.js` script tag
+- Sets up MSBuild integration — Tailwind rebuilds on every `dotnet build`
 
-### Which one?
+`shellui add <component>` copies the `.razor` source into `Components/UI/` in your project. Edit freely.
 
-| You want… | Use |
-|---|---|
-| Full source control over every component | CLI |
-| Restyle by editing the component source | CLI |
-| Minimal install, you already use Tailwind | NuGet |
-| Mix — NuGet for most, CLI for ones you customize | both (no conflict; NuGet's classes are tree-shaken via the safelist, CLI-copied components Tailwind scans directly)
+**Benefits:**
+- ✅ **Source-level ownership** — every component is your code, editable, versionable, forkable
+- ✅ **Best theming experience** — you own `wwwroot/input.css`, edit directly, tweakcn pastes straight in
+- ✅ **Zero external runtime deps** — Tailwind rebuilds on `dotnet build`; no network per build
+- ✅ **Automatic host wiring** — `shellui init` patches App.razor for you
+- ✅ **Composable with NuGet** — mix CLI-installed components with NuGet-provided ones
+
+**Trade-offs:**
+- ❌ First `shellui init` downloads ~25MB Tailwind binary (cached in `.shellui/bin/`)
+- ❌ Component updates are manual — you own the source, so you also merge upstream changes
+
+**Best for:** custom design systems, projects that heavily restyle ShellUI, teams that want everything in their own repo, anyone following the shadcn workflow.
+
+---
+
+### Path D — CDN (no NuGet, static HTML)
+
+**Who it's for:** prototypes, blog embeds, JSFiddle/CodePen/CodeSandbox demos, static marketing pages, or any scenario where NuGet is overkill.
+
+**Setup (one line):**
+
+```html
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/shellui-dev/shellui@v0.4.0/dist/shellui-all.css" />
+```
+
+jsdelivr auto-serves any file from a tagged GitHub release. Free, global edge cache, no account needed.
+
+Now write raw HTML with ShellUI's Tailwind classes:
+
+```html
+<button class="inline-flex items-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+    Click me
+</button>
+```
+
+**Benefits:**
+- ✅ **Zero installation** — no `dotnet add`, no CLI, no npm
+- ✅ **Zero build step** — one `<link>` tag and you're done
+- ✅ **Global edge cache** — jsdelivr serves from the nearest datacenter
+- ✅ **Works in any HTML context** — static sites, WordPress, MDX docs, any framework
+- ✅ **Same bundle as Path A** — theming, size, features are identical
+
+**Trade-offs:**
+- ❌ **Runtime dep on jsdelivr** — extremely reliable but not zero-risk
+- ❌ **No components** — this ships CSS only. For Blazor with components use Path A instead.
+- ❌ **Needs network** — no good for airgapped deployments
+
+**Best for:** landing pages, demos, "look at this cool ShellUI component" tweets, non-Blazor contexts.
+
+---
+
+### Theming across paths
+
+All four paths use the same CSS variable system, so theming works uniformly — just with different edit surfaces:
+
+| Path | Where the theme lives | How you edit it |
+|---|---|---|
+| A | Baked in `shellui-all.css` | Override CSS vars in a `<style>` block *after* the link |
+| B | Your `wwwroot/input.css` | Edit directly, paste tweakcn output over `:root`/`.dark` blocks |
+| C | `wwwroot/input.css` created by `shellui init` | Edit directly — Tailwind auto-rebuilds on `dotnet build` |
+| D | Baked in the CDN-served CSS | Override in a `<style>` tag |
+
+Change one CSS variable (e.g. `--primary`) and every component updates immediately. See each install-path README under `shellui-installation-tests/` for concrete theming examples.
 
 ### Configure Tailwind CSS manually (advanced)
 Create/update `wwwroot/tailwind.config.js`:
diff --git a/ShellUI.Tests/SafelistDriftTests.cs b/ShellUI.Tests/SafelistDriftTests.cs
index c4c0c61..f50503b 100644
--- a/ShellUI.Tests/SafelistDriftTests.cs
+++ b/ShellUI.Tests/SafelistDriftTests.cs
@@ -20,7 +20,7 @@ public class SafelistDriftTests
         + "src/ShellUI.Components/build/ShellUI.Components.targets";
 
     [Fact]
-    public void Safelist_MatchesGeneratedFromCurrentRazorSources()
+    public void Safelist_MatchesGeneratedFromCurrentSources()
     {
         var componentsDir = ResolveComponentsDir();
         var safelistPath = ResolveSafelistPath();
@@ -28,8 +28,10 @@ public void Safelist_MatchesGeneratedFromCurrentRazorSources()
         Assert.True(Directory.Exists(componentsDir), $"components dir not found: {componentsDir}");
         Assert.True(File.Exists(safelistPath), $"safelist not found at {safelistPath}. Run: {RegenerateCommand}");
 
-        var razorFiles = Directory.GetFiles(componentsDir, "*.razor", SearchOption.AllDirectories);
-        var freshlyGenerated = Program.GenerateSafelist(razorFiles);
+        // Use the same source enumeration the CLI uses (dual .razor + .cs, minus
+        // bin/obj). Diverging file lists would produce false-positive drifts.
+        var (razorFiles, csFiles) = Program.EnumerateSources(componentsDir);
+        var freshlyGenerated = Program.GenerateSafelist(razorFiles.Concat(csFiles));
         var committed = File.ReadAllLines(safelistPath)
             .Where(line => !string.IsNullOrWhiteSpace(line))
             .ToHashSet();
diff --git a/scripts/rebuild-precompiled-css.sh b/scripts/rebuild-precompiled-css.sh
new file mode 100755
index 0000000..04660a7
--- /dev/null
+++ b/scripts/rebuild-precompiled-css.sh
@@ -0,0 +1,81 @@
+#!/usr/bin/env bash
+# Regenerates src/ShellUI.Components/wwwroot/shellui-all.css — the pre-compiled
+# Tailwind bundle NuGet consumers link to when they don't want a Tailwind build
+# of their own. Downloads the Tailwind standalone CLI on first run and caches it
+# at ~/.shellui/bin/. CI runs this via `.github/workflows/*.yml` and validates no
+# drift with `git diff --exit-code`.
+#
+# Usage: ./scripts/rebuild-precompiled-css.sh
+set -euo pipefail
+
+# Version comes from TailwindConstants.cs — single source of truth. Portable awk
+# instead of grep -P because Perl regex isn't universally available on CI runners.
+TAILWIND_VERSION="$(awk -F'"' '/public const string Version/ {print $2; exit}' src/ShellUI.Core/TailwindConstants.cs)"
+if [[ -z "$TAILWIND_VERSION" ]]; then
+  echo "Could not extract Tailwind version from src/ShellUI.Core/TailwindConstants.cs" >&2
+  exit 1
+fi
+echo "Using Tailwind CSS v$TAILWIND_VERSION"
+
+# Detect platform for the standalone binary name.
+case "$(uname -sm)" in
+  "Linux x86_64")   PLATFORM="linux-x64" ;;
+  "Linux aarch64")  PLATFORM="linux-arm64" ;;
+  "Darwin x86_64")  PLATFORM="macos-x64" ;;
+  "Darwin arm64")   PLATFORM="macos-arm64" ;;
+  MINGW*|CYGWIN*|MSYS*) PLATFORM="windows-x64.exe" ;;
+  *) echo "Unsupported platform: $(uname -sm)" >&2; exit 1 ;;
+esac
+
+# Cache in ~/.shellui/bin so this doesn't re-download per project or per CI run.
+CACHE_DIR="${SHELLUI_CACHE_DIR:-$HOME/.shellui/bin}"
+BINARY_NAME="tailwindcss-$TAILWIND_VERSION-$PLATFORM"
+BINARY_PATH="$CACHE_DIR/$BINARY_NAME"
+
+if [[ ! -f "$BINARY_PATH" ]]; then
+  mkdir -p "$CACHE_DIR"
+  URL="https://github.com/tailwindlabs/tailwindcss/releases/download/v$TAILWIND_VERSION/tailwindcss-$PLATFORM"
+  echo "Downloading $URL"
+  curl -fsSL "$URL" -o "$BINARY_PATH"
+  chmod +x "$BINARY_PATH"
+fi
+
+# Portable mktemp: --suffix is GNU-only, breaks on macOS/BSD. Template form works everywhere.
+INPUT_CSS="$(mktemp "${TMPDIR:-/tmp}/shellui-input.XXXXXX")"
+mv "$INPUT_CSS" "$INPUT_CSS.css"
+INPUT_CSS="$INPUT_CSS.css"
+COMPONENTS_ROOT="src/ShellUI.Components"
+
+# Compose the input fixture: theme block + inline safelist.
+# We use `@source inline("…")` instead of `@source "file.txt"` because Tailwind's
+# default file extractor fails to pick up classes with `[state=…]` arbitrary
+# values from plain text files. Inline is explicit — each entry becomes a rule
+# regardless of shape.
+cat "$COMPONENTS_ROOT/wwwroot/shellui-theme.css" > "$INPUT_CSS"
+echo "" >> "$INPUT_CSS"
+
+# Feed classes space-separated inside a single @source inline("…") call. Split
+# into ~500-char chunks so we don't hit any parser limits on very long strings.
+awk '
+  BEGIN { line=""; }
+  {
+    if (length(line) + length($0) + 1 > 500) {
+      printf "@source inline(\"%s\");\n", line;
+      line=$0;
+    } else if (line=="") {
+      line=$0;
+    } else {
+      line=line " " $0;
+    }
+  }
+  END { if (line != "") printf "@source inline(\"%s\");\n", line; }
+' "$COMPONENTS_ROOT/wwwroot/shellui-classes.txt" >> "$INPUT_CSS"
+
+OUTPUT_CSS="$COMPONENTS_ROOT/wwwroot/shellui-all.css"
+
+echo "Compiling → $OUTPUT_CSS"
+"$BINARY_PATH" -i "$INPUT_CSS" -o "$OUTPUT_CSS" --minify
+
+SIZE=$(wc -c < "$OUTPUT_CSS")
+echo "Wrote $(printf '%s' "$SIZE") bytes"
+rm -f "$INPUT_CSS"
diff --git a/src/ShellUI.CLI/README.md b/src/ShellUI.CLI/README.md
index 90f791a..d791246 100644
--- a/src/ShellUI.CLI/README.md
+++ b/src/ShellUI.CLI/README.md
@@ -1,6 +1,21 @@
 # ShellUI CLI
 
-Command-line tool for managing ShellUI Blazor components. Install components individually with a simple command.
+Command-line tool for managing ShellUI Blazor components. Install components as `.razor` source files you own, styled with Tailwind CSS.
+
+## Is this what I want?
+
+This is the **CLI install path (Path C)** — best for **owning your component source and editing freely**. If that's not you, there are three other paths worth considering:
+
+- **[Path A — Precompiled bundle](https://www.nuget.org/packages/ShellUI.Components)** — one `<link>` tag, zero Tailwind setup. Best for quick starts.
+- **[Path B — Safelist](https://www.nuget.org/packages/ShellUI.Components)** — for projects that already run Tailwind. Tree-shaken CSS.
+- **[Path D — CDN](https://github.com/shellui-dev/shellui#path-d--cdn-no-nuget-static-html)** — one `<link>` tag from jsdelivr. Best for static HTML and prototypes.
+
+**Use this CLI (Path C) when you want:**
+- ✅ Source-level ownership of every component
+- ✅ To restyle by editing `.razor` files directly
+- ✅ Automatic host wiring (`shellui init` patches App.razor)
+- ✅ tweakcn output to paste straight into your `wwwroot/input.css`
+- ✅ Zero runtime CSS dependency on any package or CDN
 
 ## Installation
 
diff --git a/src/ShellUI.Components/README.md b/src/ShellUI.Components/README.md
index dd69470..40199b5 100644
--- a/src/ShellUI.Components/README.md
+++ b/src/ShellUI.Components/README.md
@@ -11,49 +11,140 @@ Beautiful, accessible Blazor components inspired by shadcn/ui. A CLI-first compo
 - 📱 **Responsive design** - Mobile-first approach
 - 🔧 **Fully customizable** - Copy components to your project for full control
 
-## Two install paths
+## Three install paths for this package
 
-Pick one based on whether you have Tailwind set up in your project.
+This NuGet package supports three install patterns. Pick the one that fits your project.
 
-### Path A — NuGet + your existing Tailwind setup (new in 0.4.x)
+_(A fourth path — CDN via jsdelivr — is available for non-NuGet use cases like static pages and JSFiddle. See the main [ShellUI README](https://github.com/shellui-dev/shellui#path-d--cdn-no-nuget-static-html).)_
 
-If your project already uses Tailwind, install the NuGet package and add one `@source` directive to your input.css. The package ships a `shellui-classes.txt` safelist that Tailwind scans at build time so utility classes used inside ShellUI components end up in your compiled CSS — tree-shaken, only what's used:
+### 🚦 Quick decision matrix
+
+| I want to… | Use |
+|---|---|
+| Ship the fastest — one `<link>` tag, no build config | **Path A** — precompiled bundle |
+| Tree-shaken CSS, I already run Tailwind | **Path B** — safelist |
+| Own the component source, restyle by editing `.razor` files | **Path C** — CLI |
+
+---
+
+### Path A — Precompiled CSS bundle (simplest)
+
+**Who it's for:** you want components on screen with minimum ceremony. No Tailwind, no npm, no CLI.
+
+**Setup:**
 
 ```bash
 dotnet add package ShellUI.Components
 ```
 
-After restore, the safelist appears at `wwwroot/shellui-classes.txt` in your project. In your `wwwroot/input.css`:
+```razor
+@* App.razor <head> *@
+<link href="_content/ShellUI.Components/shellui-all.css" rel="stylesheet" />
+
+@* _Imports.razor *@
+@using ShellUI.Components
+```
+
+Done. `<Button>`, `<Card>`, `<Dialog>` all render styled.
+
+**Benefits:**
+- ✅ Fastest to set up — 30 seconds from `dotnet new blazor` to styled components
+- ✅ Zero build step for CSS — the package ships a pre-compiled ~77KB bundle
+- ✅ No downloads at build time — no Tailwind binary, no npm install
+- ✅ Deterministic — exact CSS shipped == exact CSS you see locally
+- ✅ Works offline forever
+
+**Trade-offs:**
+- ❌ No tree-shaking — you pay ~77KB even if you use 3 components (negligible for most sites)
+- ❌ Theme customization is via override only — theme vars are baked in. You add a `<style>` block *after* the link:
+  ```html
+  <link href="_content/ShellUI.Components/shellui-all.css" rel="stylesheet" />
+  <style>
+      :root { --primary: oklch(0.55 0.15 250); }  /* your color */
+  </style>
+  ```
+
+**Best for:** new projects, prototypes, teams without existing Tailwind, "just get me components" scenarios.
+
+---
+
+### Path B — Safelist + your existing Tailwind (tree-shaken)
+
+**Who it's for:** your project already runs Tailwind for your own utilities. You want ShellUI's classes compiled into the same output, tree-shaken.
+
+**Setup:**
+
+```bash
+dotnet add package ShellUI.Components
+```
+
+The package copies `shellui-classes.txt` (auto-generated safelist of every Tailwind class ShellUI uses) into your `wwwroot/`. Point Tailwind at it:
 
 ```css
+/* wwwroot/input.css */
 @import "tailwindcss";
 @source "./shellui-classes.txt";
 
-/* ... your theme variables, custom layers, etc. ... */
+/* Your theme — full source of truth, paste tweakcn output directly */
+:root {
+    --background: oklch(0.99 0 0);
+    --foreground: oklch(0 0 0);
+    /* ... */
+}
 ```
 
-Then in your `App.razor` or `_Host.cshtml`:
-```html
+```razor
+@* _Imports.razor *@
 @using ShellUI.Components
 ```
 
-That's it. `<Button>`, `<Card>`, `<Dialog>` etc. work with full styling — Tailwind has seen every utility class ShellUI emits.
+**Benefits:**
+- ✅ Tree-shaken CSS — only classes your compiled app actually uses (~30-50KB typical)
+- ✅ Single Tailwind build — ShellUI's classes + yours compile in one pass
+- ✅ Your `input.css` is the theme source of truth — no cascade tricks
+- ✅ Composable — mix with `@apply`, custom `@theme` blocks, your own utilities
+
+**Trade-offs:**
+- ❌ Requires an existing Tailwind pipeline
+- ❌ Marginally more setup than Path A
 
-### Path B — CLI tool (best DX, full source control)
+**Best for:** existing Blazor projects that already run Tailwind, teams that care about CSS efficiency, projects with heavy custom styling.
 
-If you don't already use Tailwind, or want full source-level control over every component, use the CLI:
+---
+
+### Path C — CLI (source ownership)
+
+**Who it's for:** you want to **own the component source**. Copy `.razor` files into your project, edit freely, version them yourself. This is the shadcn philosophy.
+
+**Setup:**
 
 ```bash
 dotnet tool install -g ShellUI.CLI
-shellui init                          # sets up Tailwind, theme CSS, patches App.razor
-shellui add button card dialog        # copies component source so Tailwind can scan it
+shellui init                          # one-time
+shellui add button card dialog        # any time you want more components
 ```
 
-The CLI copies the `.razor` files into your project, where Tailwind picks up the classes. You can edit any component freely — it's your code.
+`shellui init` automatically:
+- Downloads Tailwind standalone CLI (no Node.js needed) or uses your npm install
+- Writes the full default theme to `wwwroot/input.css`
+- Patches `App.razor` with render mode, theme bootstrap script, `shellui.js` tag
+- Sets up MSBuild — Tailwind rebuilds on every `dotnet build`
+
+`shellui add <name>` copies `.razor` files into `Components/UI/`. Edit them however you like.
+
+**Benefits:**
+- ✅ Source-level ownership — every component is your code
+- ✅ Best theming experience — you own `wwwroot/input.css`, tweakcn pastes directly
+- ✅ Zero external runtime deps — Tailwind rebuilds locally on `dotnet build`
+- ✅ Automatic host wiring — `shellui init` patches App.razor for you
+- ✅ Composable — mix with NuGet-installed components
+
+**Trade-offs:**
+- ❌ First `shellui init` downloads ~25MB Tailwind binary (cached in `.shellui/bin/`)
+- ❌ Component updates are manual — you own the source, so you also merge upstream changes
 
-`shellui add` copies the `.razor` files into your project, where Tailwind picks up the classes. From then on, components render styled.
+**Best for:** custom design systems, projects heavily restyling ShellUI, teams that want everything in-repo, shadcn workflow followers.
 
-A future release will ship a pre-compiled stylesheet (`shellui-all.css`) for users who don't want Tailwind set up at all — `<link>` tag, no build step. Tracked under the v0.5 milestone.
 
 ## When is this NuGet package useful on its own?
 
diff --git a/src/ShellUI.Components/build/ShellUI.Components.targets b/src/ShellUI.Components/build/ShellUI.Components.targets
index 78e1385..b0ab1a7 100644
--- a/src/ShellUI.Components/build/ShellUI.Components.targets
+++ b/src/ShellUI.Components/build/ShellUI.Components.targets
@@ -17,12 +17,16 @@
     <ShellUISafelistEntry Include="aspect-square" />
     <ShellUISafelistEntry Include="backdrop-blur-md" />
     <ShellUISafelistEntry Include="backdrop-blur-sm" />
+    <ShellUISafelistEntry Include="bg-accent" />
     <ShellUISafelistEntry Include="bg-background" />
     <ShellUISafelistEntry Include="bg-background/80" />
     <ShellUISafelistEntry Include="bg-background/95" />
     <ShellUISafelistEntry Include="bg-black/80" />
+    <ShellUISafelistEntry Include="bg-blue-500" />
     <ShellUISafelistEntry Include="bg-border" />
     <ShellUISafelistEntry Include="bg-card" />
+    <ShellUISafelistEntry Include="bg-destructive" />
+    <ShellUISafelistEntry Include="bg-green-500" />
     <ShellUISafelistEntry Include="bg-muted" />
     <ShellUISafelistEntry Include="bg-muted/30" />
     <ShellUISafelistEntry Include="bg-popover" />
@@ -31,23 +35,39 @@
     <ShellUISafelistEntry Include="bg-sidebar" />
     <ShellUISafelistEntry Include="bg-sidebar-primary" />
     <ShellUISafelistEntry Include="bg-transparent" />
+    <ShellUISafelistEntry Include="bg-yellow-500" />
     <ShellUISafelistEntry Include="border-0" />
     <ShellUISafelistEntry Include="border-2" />
     <ShellUISafelistEntry Include="border-b" />
     <ShellUISafelistEntry Include="border-border" />
+    <ShellUISafelistEntry Include="border-border/40" />
+    <ShellUISafelistEntry Include="border-destructive" />
     <ShellUISafelistEntry Include="border-input" />
+    <ShellUISafelistEntry Include="border-l" />
     <ShellUISafelistEntry Include="border-primary/20" />
+    <ShellUISafelistEntry Include="border-r" />
+    <ShellUISafelistEntry Include="border-t" />
+    <ShellUISafelistEntry Include="border-transparent" />
+    <ShellUISafelistEntry Include="bottom-0" />
     <ShellUISafelistEntry Include="bottom-4" />
     <ShellUISafelistEntry Include="bottom-full" />
     <ShellUISafelistEntry Include="caption-bottom" />
     <ShellUISafelistEntry Include="cursor-default" />
     <ShellUISafelistEntry Include="cursor-pointer" />
+    <ShellUISafelistEntry Include="custom-tooltip" />
+    <ShellUISafelistEntry Include="custom-tooltip-item" />
+    <ShellUISafelistEntry Include="custom-tooltip-label" />
+    <ShellUISafelistEntry Include="custom-tooltip-marker" />
+    <ShellUISafelistEntry Include="custom-tooltip-title" />
+    <ShellUISafelistEntry Include="custom-tooltip-value" />
     <ShellUISafelistEntry Include="data-[selected]:bg-accent" />
     <ShellUISafelistEntry Include="data-[selected]:text-accent-foreground" />
     <ShellUISafelistEntry Include="data-[state=closed]:animate-out" />
+    <ShellUISafelistEntry Include="data-[state=closed]:duration-300" />
     <ShellUISafelistEntry Include="data-[state=closed]:fade-out-0" />
     <ShellUISafelistEntry Include="data-[state=open]:animate-in" />
     <ShellUISafelistEntry Include="data-[state=open]:bg-accent" />
+    <ShellUISafelistEntry Include="data-[state=open]:duration-500" />
     <ShellUISafelistEntry Include="data-[state=open]:fade-in-0" />
     <ShellUISafelistEntry Include="data-[state=open]:grid-rows-[1fr]" />
     <ShellUISafelistEntry Include="data-[state=open]:text-muted-foreground" />
@@ -78,6 +98,7 @@
     <ShellUISafelistEntry Include="fill-primary-foreground" />
     <ShellUISafelistEntry Include="flex-1" />
     <ShellUISafelistEntry Include="flex-col" />
+    <ShellUISafelistEntry Include="flex-col-reverse" />
     <ShellUISafelistEntry Include="flex-row" />
     <ShellUISafelistEntry Include="flex-shrink-0" />
     <ShellUISafelistEntry Include="focus-visible:[&amp;::-moz-range-thumb]:ring-2" />
@@ -89,6 +110,7 @@
     <ShellUISafelistEntry Include="focus-visible:outline-none" />
     <ShellUISafelistEntry Include="focus-visible:ring-1" />
     <ShellUISafelistEntry Include="focus-visible:ring-2" />
+    <ShellUISafelistEntry Include="focus-visible:ring-destructive" />
     <ShellUISafelistEntry Include="focus-visible:ring-offset-2" />
     <ShellUISafelistEntry Include="focus-visible:ring-ring" />
     <ShellUISafelistEntry Include="focus:bg-accent" />
@@ -125,8 +147,10 @@
     <ShellUISafelistEntry Include="group-data-[variant=floating]:shadow" />
     <ShellUISafelistEntry Include="h-1/2" />
     <ShellUISafelistEntry Include="h-10" />
+    <ShellUISafelistEntry Include="h-11" />
     <ShellUISafelistEntry Include="h-12" />
     <ShellUISafelistEntry Include="h-14" />
+    <ShellUISafelistEntry Include="h-16" />
     <ShellUISafelistEntry Include="h-2" />
     <ShellUISafelistEntry Include="h-2.5" />
     <ShellUISafelistEntry Include="h-24" />
@@ -141,16 +165,26 @@
     <ShellUISafelistEntry Include="h-px" />
     <ShellUISafelistEntry Include="hover:bg-accent" />
     <ShellUISafelistEntry Include="hover:bg-accent/50" />
+    <ShellUISafelistEntry Include="hover:bg-blue-600" />
+    <ShellUISafelistEntry Include="hover:bg-destructive/80" />
+    <ShellUISafelistEntry Include="hover:bg-destructive/90" />
+    <ShellUISafelistEntry Include="hover:bg-green-600" />
+    <ShellUISafelistEntry Include="hover:bg-muted" />
+    <ShellUISafelistEntry Include="hover:bg-primary/80" />
     <ShellUISafelistEntry Include="hover:bg-primary/90" />
+    <ShellUISafelistEntry Include="hover:bg-secondary/80" />
     <ShellUISafelistEntry Include="hover:bg-sidebar-accent" />
+    <ShellUISafelistEntry Include="hover:bg-yellow-600" />
     <ShellUISafelistEntry Include="hover:opacity-100" />
     <ShellUISafelistEntry Include="hover:text-accent-foreground" />
     <ShellUISafelistEntry Include="hover:text-foreground" />
+    <ShellUISafelistEntry Include="hover:text-muted-foreground" />
     <ShellUISafelistEntry Include="hover:text-sidebar-accent-foreground" />
     <ShellUISafelistEntry Include="hover:underline" />
     <ShellUISafelistEntry Include="inline-block" />
     <ShellUISafelistEntry Include="inline-flex" />
     <ShellUISafelistEntry Include="inset-0" />
+    <ShellUISafelistEntry Include="inset-x-0" />
     <ShellUISafelistEntry Include="inset-y-0" />
     <ShellUISafelistEntry Include="items-center" />
     <ShellUISafelistEntry Include="items-end" />
@@ -175,6 +209,7 @@
     <ShellUISafelistEntry Include="md:block" />
     <ShellUISafelistEntry Include="min-h-0" />
     <ShellUISafelistEntry Include="min-h-8" />
+    <ShellUISafelistEntry Include="min-h-[80px]" />
     <ShellUISafelistEntry Include="min-w-0" />
     <ShellUISafelistEntry Include="min-w-8" />
     <ShellUISafelistEntry Include="min-w-[640px]" />
@@ -228,8 +263,12 @@
     <ShellUISafelistEntry Include="px-1" />
     <ShellUISafelistEntry Include="px-1.5" />
     <ShellUISafelistEntry Include="px-2" />
+    <ShellUISafelistEntry Include="px-2.5" />
     <ShellUISafelistEntry Include="px-3" />
     <ShellUISafelistEntry Include="px-4" />
+    <ShellUISafelistEntry Include="px-5" />
+    <ShellUISafelistEntry Include="px-8" />
+    <ShellUISafelistEntry Include="py-0.5" />
     <ShellUISafelistEntry Include="py-1" />
     <ShellUISafelistEntry Include="py-1.5" />
     <ShellUISafelistEntry Include="py-2" />
@@ -256,9 +295,16 @@
     <ShellUISafelistEntry Include="shrink-0" />
     <ShellUISafelistEntry Include="size-4" />
     <ShellUISafelistEntry Include="size-8" />
+    <ShellUISafelistEntry Include="slide-in-from-bottom" />
+    <ShellUISafelistEntry Include="slide-in-from-bottom-2" />
+    <ShellUISafelistEntry Include="slide-in-from-left" />
+    <ShellUISafelistEntry Include="slide-in-from-right" />
+    <ShellUISafelistEntry Include="slide-in-from-top" />
+    <ShellUISafelistEntry Include="slide-in-from-top-2" />
     <ShellUISafelistEntry Include="sm:flex-row" />
     <ShellUISafelistEntry Include="sm:items-center" />
     <ShellUISafelistEntry Include="sm:justify-between" />
+    <ShellUISafelistEntry Include="sm:max-w-sm" />
     <ShellUISafelistEntry Include="sm:space-x-6" />
     <ShellUISafelistEntry Include="sm:text-left" />
     <ShellUISafelistEntry Include="space-x-1" />
@@ -269,8 +315,10 @@
     <ShellUISafelistEntry Include="text-5xl" />
     <ShellUISafelistEntry Include="text-[10px]" />
     <ShellUISafelistEntry Include="text-[8px]" />
+    <ShellUISafelistEntry Include="text-accent-foreground" />
     <ShellUISafelistEntry Include="text-card-foreground" />
     <ShellUISafelistEntry Include="text-center" />
+    <ShellUISafelistEntry Include="text-destructive-foreground" />
     <ShellUISafelistEntry Include="text-foreground" />
     <ShellUISafelistEntry Include="text-left" />
     <ShellUISafelistEntry Include="text-lg" />
@@ -279,12 +327,15 @@
     <ShellUISafelistEntry Include="text-primary" />
     <ShellUISafelistEntry Include="text-primary-foreground" />
     <ShellUISafelistEntry Include="text-right" />
+    <ShellUISafelistEntry Include="text-secondary-foreground" />
     <ShellUISafelistEntry Include="text-sidebar-foreground" />
     <ShellUISafelistEntry Include="text-sidebar-foreground/70" />
     <ShellUISafelistEntry Include="text-sidebar-primary-foreground" />
     <ShellUISafelistEntry Include="text-sm" />
+    <ShellUISafelistEntry Include="text-white" />
     <ShellUISafelistEntry Include="text-xl" />
     <ShellUISafelistEntry Include="text-xs" />
+    <ShellUISafelistEntry Include="top-0" />
     <ShellUISafelistEntry Include="top-2" />
     <ShellUISafelistEntry Include="top-4" />
     <ShellUISafelistEntry Include="top-8" />
@@ -296,11 +347,15 @@
     <ShellUISafelistEntry Include="transition-colors" />
     <ShellUISafelistEntry Include="transition-opacity" />
     <ShellUISafelistEntry Include="transition-transform" />
+    <ShellUISafelistEntry Include="underline-offset-4" />
     <ShellUISafelistEntry Include="w-1/2" />
+    <ShellUISafelistEntry Include="w-10" />
     <ShellUISafelistEntry Include="w-12" />
+    <ShellUISafelistEntry Include="w-16" />
     <ShellUISafelistEntry Include="w-2.5" />
     <ShellUISafelistEntry Include="w-3" />
     <ShellUISafelistEntry Include="w-3.5" />
+    <ShellUISafelistEntry Include="w-3/4" />
     <ShellUISafelistEntry Include="w-4" />
     <ShellUISafelistEntry Include="w-5" />
     <ShellUISafelistEntry Include="w-56" />
diff --git a/src/ShellUI.Components/wwwroot/shellui-classes.txt b/src/ShellUI.Components/wwwroot/shellui-classes.txt
index e4430a2..13154f7 100644
--- a/src/ShellUI.Components/wwwroot/shellui-classes.txt
+++ b/src/ShellUI.Components/wwwroot/shellui-classes.txt
@@ -6,12 +6,16 @@ appearance-none
 aspect-square
 backdrop-blur-md
 backdrop-blur-sm
+bg-accent
 bg-background
 bg-background/80
 bg-background/95
 bg-black/80
+bg-blue-500
 bg-border
 bg-card
+bg-destructive
+bg-green-500
 bg-muted
 bg-muted/30
 bg-popover
@@ -20,23 +24,39 @@ bg-secondary
 bg-sidebar
 bg-sidebar-primary
 bg-transparent
+bg-yellow-500
 border-0
 border-2
 border-b
 border-border
+border-border/40
+border-destructive
 border-input
+border-l
 border-primary/20
+border-r
+border-t
+border-transparent
+bottom-0
 bottom-4
 bottom-full
 caption-bottom
 cursor-default
 cursor-pointer
+custom-tooltip
+custom-tooltip-item
+custom-tooltip-label
+custom-tooltip-marker
+custom-tooltip-title
+custom-tooltip-value
 data-[selected]:bg-accent
 data-[selected]:text-accent-foreground
 data-[state=closed]:animate-out
+data-[state=closed]:duration-300
 data-[state=closed]:fade-out-0
 data-[state=open]:animate-in
 data-[state=open]:bg-accent
+data-[state=open]:duration-500
 data-[state=open]:fade-in-0
 data-[state=open]:grid-rows-[1fr]
 data-[state=open]:text-muted-foreground
@@ -67,6 +87,7 @@ file:text-sm
 fill-primary-foreground
 flex-1
 flex-col
+flex-col-reverse
 flex-row
 flex-shrink-0
 focus-visible:[&::-moz-range-thumb]:ring-2
@@ -78,6 +99,7 @@ focus-visible:[&::-webkit-slider-thumb]:ring-ring
 focus-visible:outline-none
 focus-visible:ring-1
 focus-visible:ring-2
+focus-visible:ring-destructive
 focus-visible:ring-offset-2
 focus-visible:ring-ring
 focus:bg-accent
@@ -114,8 +136,10 @@ group-data-[variant=floating]:rounded-lg
 group-data-[variant=floating]:shadow
 h-1/2
 h-10
+h-11
 h-12
 h-14
+h-16
 h-2
 h-2.5
 h-24
@@ -130,16 +154,26 @@ h-full
 h-px
 hover:bg-accent
 hover:bg-accent/50
+hover:bg-blue-600
+hover:bg-destructive/80
+hover:bg-destructive/90
+hover:bg-green-600
+hover:bg-muted
+hover:bg-primary/80
 hover:bg-primary/90
+hover:bg-secondary/80
 hover:bg-sidebar-accent
+hover:bg-yellow-600
 hover:opacity-100
 hover:text-accent-foreground
 hover:text-foreground
+hover:text-muted-foreground
 hover:text-sidebar-accent-foreground
 hover:underline
 inline-block
 inline-flex
 inset-0
+inset-x-0
 inset-y-0
 items-center
 items-end
@@ -164,6 +198,7 @@ mb-6
 md:block
 min-h-0
 min-h-8
+min-h-[80px]
 min-w-0
 min-w-8
 min-w-[640px]
@@ -217,8 +252,12 @@ pt-0
 px-1
 px-1.5
 px-2
+px-2.5
 px-3
 px-4
+px-5
+px-8
+py-0.5
 py-1
 py-1.5
 py-2
@@ -245,9 +284,16 @@ shadow-xl
 shrink-0
 size-4
 size-8
+slide-in-from-bottom
+slide-in-from-bottom-2
+slide-in-from-left
+slide-in-from-right
+slide-in-from-top
+slide-in-from-top-2
 sm:flex-row
 sm:items-center
 sm:justify-between
+sm:max-w-sm
 sm:space-x-6
 sm:text-left
 space-x-1
@@ -258,8 +304,10 @@ sr-only
 text-5xl
 text-[10px]
 text-[8px]
+text-accent-foreground
 text-card-foreground
 text-center
+text-destructive-foreground
 text-foreground
 text-left
 text-lg
@@ -268,12 +316,15 @@ text-popover-foreground
 text-primary
 text-primary-foreground
 text-right
+text-secondary-foreground
 text-sidebar-foreground
 text-sidebar-foreground/70
 text-sidebar-primary-foreground
 text-sm
+text-white
 text-xl
 text-xs
+top-0
 top-2
 top-4
 top-8
@@ -285,11 +336,15 @@ transition-all
 transition-colors
 transition-opacity
 transition-transform
+underline-offset-4
 w-1/2
+w-10
 w-12
+w-16
 w-2.5
 w-3
 w-3.5
+w-3/4
 w-4
 w-5
 w-56
diff --git a/tools/ShellUI.SafelistGenerator/Program.cs b/tools/ShellUI.SafelistGenerator/Program.cs
index 99efc00..824618e 100644
--- a/tools/ShellUI.SafelistGenerator/Program.cs
+++ b/tools/ShellUI.SafelistGenerator/Program.cs
@@ -35,8 +35,8 @@ public static int Main(string[] args)
             return 2;
         }
 
-        var razorFiles = Directory.GetFiles(razorDir, "*.razor", SearchOption.AllDirectories);
-        var classes = GenerateSafelist(razorFiles);
+        var (razorFiles, csFiles) = EnumerateSources(razorDir);
+        var classes = GenerateSafelist(razorFiles.Concat(csFiles));
 
         Directory.CreateDirectory(Path.GetDirectoryName(txtOut)!);
         File.WriteAllLines(txtOut, classes);
@@ -44,23 +44,96 @@ public static int Main(string[] args)
         Directory.CreateDirectory(Path.GetDirectoryName(targetsOut)!);
         File.WriteAllText(targetsOut, BuildTargetsFileContent(classes));
 
-        Console.WriteLine($"wrote {classes.Count} classes from {razorFiles.Length} razor files");
+        Console.WriteLine($"wrote {classes.Count} classes from {razorFiles.Length} razor + {csFiles.Length} cs files");
         Console.WriteLine($"  txt:     {txtOut}");
         Console.WriteLine($"  targets: {targetsOut}");
         return 0;
     }
 
+    /// Public — enumerates the source files the generator scans. Reused by tests
+    /// so the drift check compares against the same file list the CLI would use.
+    /// Both .razor components and .cs helpers get scanned (Variants, Services);
+    /// bin/ and obj/ are excluded so contributors' build outputs don't taint output.
+    public static (string[] razorFiles, string[] csFiles) EnumerateSources(string razorDir)
+    {
+        var razorFiles = Directory.GetFiles(razorDir, "*.razor", SearchOption.AllDirectories);
+        var componentsRoot = Path.GetDirectoryName(razorDir.TrimEnd(Path.DirectorySeparatorChar, Path.AltDirectorySeparatorChar))
+            ?? razorDir;
+        var csFiles = Directory.GetFiles(componentsRoot, "*.cs", SearchOption.AllDirectories)
+            .Where(p => !p.Contains($"{Path.DirectorySeparatorChar}bin{Path.DirectorySeparatorChar}")
+                     && !p.Contains($"{Path.DirectorySeparatorChar}obj{Path.DirectorySeparatorChar}"))
+            .ToArray();
+        return (razorFiles, csFiles);
+    }
+
     /// Public for in-process testing — runs the same extraction the CLI invocation does.
-    public static SortedSet<string> GenerateSafelist(IEnumerable<string> razorFilePaths)
+    public static SortedSet<string> GenerateSafelist(IEnumerable<string> sourceFilePaths)
     {
         var classes = new SortedSet<string>(StringComparer.Ordinal);
-        foreach (var file in razorFilePaths)
+        foreach (var file in sourceFilePaths)
         {
-            ExtractClasses(File.ReadAllText(file), classes);
+            var text = File.ReadAllText(file);
+            if (file.EndsWith(".razor", StringComparison.OrdinalIgnoreCase))
+            {
+                ExtractClasses(text, classes);
+            }
+            else if (file.EndsWith(".cs", StringComparison.OrdinalIgnoreCase))
+            {
+                ExtractFromCSharp(text, classes);
+            }
         }
         return classes;
     }
 
+    // For .cs files (Variants, Services), pull tokens out of every string literal
+    // — but only from literals that LOOK like a class-list string. Filters out
+    // JS/HTML fragments, URLs, CSS property strings, error messages, and other
+    // non-Tailwind literals that would otherwise pollute the safelist with tokens
+    // like `background-color:`, `series[idx]`, `shadcn/ui.`, etc.
+    private static void ExtractFromCSharp(string content, SortedSet<string> sink)
+    {
+        foreach (Match lit in StringLiteralRegex.Matches(content))
+        {
+            var value = lit.Groups["lit"].Value;
+            if (!LooksLikeClassList(value)) continue;
+            HarvestTokens(value, sink);
+        }
+    }
+
+    // Heuristic: a class-list string is space-separated tokens, each looking like
+    // a Tailwind utility. Reject literals that contain characters/patterns that
+    // never appear in a real class list.
+    private static bool LooksLikeClassList(string s)
+    {
+        if (s.Length == 0 || s.Length > 500) return false;
+        // URLs, HTML/XML tags, JS fragments, C# format placeholders, CSS property syntax
+        if (s.Contains("://") || s.Contains('<') || s.Contains('>') || s.Contains('{')
+            || s.Contains(';') || s.Contains('=') && !s.Contains('[')  // `=` outside `[…]` = probably not a class
+            || s.Contains('\n')) return false;
+        // Must contain at least one token that looks Tailwindy: contains `-` or `:` or `[`
+        // AND is composed of tokens that all satisfy the "utility class" shape.
+        var tokens = s.Split(new[] { ' ', '\t' }, StringSplitOptions.RemoveEmptyEntries);
+        if (tokens.Length == 0) return false;
+        var anyUtility = false;
+        foreach (var tok in tokens)
+        {
+            if (tok.Length < 2) return false;
+            var t = tok.TrimEnd(',', ';', ')', '"');
+            if (t.Length < 2) return false;
+            if (!char.IsLower(t[0]) && t[0] != '[' && t[0] != '!') return false;
+            // Reject tokens with characters that never appear in a class name
+            foreach (var c in t)
+            {
+                if (!(char.IsLetterOrDigit(c) || c is '-' or '_' or ':' or '/' or '.' or '[' or ']'
+                    or '(' or ')' or '=' or '&' or ',' or '!' or '%' or '#' or '@' or '*'))
+                    return false;
+            }
+            if (t.Contains('-') || t.Contains(':') || t.Contains('[') || t.Contains('/'))
+                anyUtility = true;
+        }
+        return anyUtility;
+    }
+
     /// Public for in-process testing — produces the same .targets content the CLI writes.
     public static string BuildTargetsFileContent(IEnumerable<string> classes)
     {