ScrolsUI 0.2.2

ScrolsUI

ScrolsUI is a Blazor component library (Razor Class Library) that ships:

• Reusable Razor components (buttons, inputs, layout, overlays, etc.)
• CSS tokens/utilities/styles via static web assets
• JS modules used by a few interactive components (loaded via import() at runtime)
• DI services for theme, tooltips, and snackbars

This NuGet package is the library only (not a full Blazor app). A demo app can reference it, but consumers install it like any other library.

Requirements

• .NET net10.0 (this package currently targets net10.0)
• A Blazor host app (WebAssembly or Server) that can consume Razor Class Libraries

Install

dotnet add package ScrolsUI

Quick start

1. Register services

In your host app Program.cs:

builder.Services.AddScrolsUI();

2. Add the CSS (static web assets)

In your host app wwwroot/index.html (WASM) or Pages/_Host.cshtml / App.razor layout (Server):

<link rel="stylesheet" href="_content/ScrolsUI/css/tokens.css" />
<link rel="stylesheet" href="_content/ScrolsUI/css/utilities.css" />
<link rel="stylesheet" href="_content/ScrolsUI/css/app.css" />

3. Use components

@using ScrolsUI.Components
@using ScrolsUI.Enums

<ScrolsButton Color="ScrolsColor.Primary">Hello</ScrolsButton>

Static assets and _content/...

ScrolsUI uses Razor Class Library static web assets. At runtime, files under this package’s wwwroot/ are served from:

_content/ScrolsUI/...

If you change the package PackageId/assembly name, update:

• Your <link rel="stylesheet" href="_content/..."> references
• Any JS module imports that point at _content/ScrolsUI/...

JavaScript modules

Some components/services load JS with dynamic import() (no script tag needed):

• Theme module: _content/ScrolsUI/js/scrols-theme.js
• Interactions module: _content/ScrolsUI/js/scrols-interactions.js
• Code highlighting helpers: _content/ScrolsUI/js/scrols-code.js (used by ScrolsCode when Highlight="true", powered by Shiki)

If you see 404s for these files, it usually means the _content/ScrolsUI/... base path does not match the package id / assembly name you’re using.

Theming

ScrolsThemeService is registered by AddScrolsUI().

Typical usage pattern:

• Call await ThemeService.InitializeAsync() once on app start (for example in App.razor)
• Wrap your app content in ScrolsThemeProvider if you want programmatic theme control

Snackbars and tooltips

• ScrolsSnackbarService and ScrolsTooltipService are registered by AddScrolsUI().
• Add the provider components once near the root of your app:
  • ScrolsSnackbarProvider
  • ScrolsTooltipProvider

Packaging / local testing

Pack the library:

dotnet pack src/ScrolsUI/ScrolsUI.csproj -c Release

Install from a local folder feed (example):

dotnet pack src/ScrolsUI/ScrolsUI.csproj -c Release -o ./nupkgs
dotnet add package ScrolsUI --source ./nupkgs

License (how to include it in the NuGet package)

This project is licensed under the GNU General Public License v3.0 (GPL-3.0-only).

NuGet supports two approaches (this package includes both metadata and the license file):

Option A: License expression (recommended)

Add an SPDX identifier to src/ScrolsUI/ScrolsUI.csproj:

<PackageLicenseExpression>GPL-3.0-only</PackageLicenseExpression>

If you prefer “GPL v3 or later”, use GPL-3.0-or-later instead.

Option B: Include a license file in the package

1. Add this to src/ScrolsUI/ScrolsUI.csproj:

<PackageLicenseFile>LICENSE</PackageLicenseFile>

2. Ensure the file is packed (and place a LICENSE file alongside the .csproj):

<ItemGroup>
  <None Include="LICENSE" Pack="true" PackagePath="" />
</ItemGroup>

Troubleshooting

• Components render without styling: ensure the _content/ScrolsUI/css/... <link> tags are present and ordered (tokens/utilities before app styles).
• JS features not working: check browser devtools network tab for missing _content/ScrolsUI/js/... files.
• You changed PackageId: update _content/<PackageId>/... references accordingly.