CarbonBlazor 0.1.0-ci.4

This is a prerelease version of CarbonBlazor.

dotnet add package CarbonBlazor --version 0.1.0-ci.4

NuGet\Install-Package CarbonBlazor -Version 0.1.0-ci.4

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="CarbonBlazor" Version="0.1.0-ci.4" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="CarbonBlazor" Version="0.1.0-ci.4" />
                    

                            Directory.Packages.props

<PackageReference Include="CarbonBlazor" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add CarbonBlazor --version 0.1.0-ci.4

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: CarbonBlazor, 0.1.0-ci.4"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package CarbonBlazor@0.1.0-ci.4

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=CarbonBlazor&version=0.1.0-ci.4&prerelease
                    

                            Install as a Cake Addin

#tool nuget:?package=CarbonBlazor&version=0.1.0-ci.4&prerelease
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Fork Notice

I forked this from the good dev here: https://github.com/portalbh/CarbonBlazor He built a fantastic foundation and its a great start! Im just building on his awesome work as I needed a faster turnaround for my projects that im actively developing.

Carbon Blazor - AI Skills

CarbonBlazor is a Blazor WebAssembly template and Razor Class Library inspired by the Carbon Design System. It provides reusable Blazor components, runtime CSS-variable themes, accessibility-focused interaction behavior, and a documentation/demo app.

This project is not affiliated with, sponsored by, or endorsed by IBM. Carbon Design System and IBM names belong to their respective owners.

Published Demo

https://carbonblazor.dale.workers.dev/

Projects

CarbonBlazor: reusable Razor Class Library with components, tokens, CSS, and JS interop helpers.
CarbonBlazor.Demo: Blazor WebAssembly documentation and component demo app.
CarbonBlazor.Tests: bUnit/xUnit tests for rendering, accessibility attributes, state changes, and interactions.

Run

dotnet restore
dotnet build CarbonBlazor.slnx
dotnet test CarbonBlazor.slnx
dotnet run --project CarbonBlazor.Demo

The demo app loads the component stylesheet from:

<link rel="stylesheet" href="_content/CarbonBlazor/carbon-blazor.css" />

Install

dotnet add package CarbonBlazor

Basic Usage

builder.Services.AddCarbonBlazor();

Inject the component stylesheet (and IBM Plex Sans font). Add <CarbonBlazorStyles /> once, near the root of the app (App.razor, MainLayout.razor, or Routes.razor). This renders into <head> via HeadOutlet, which the default Blazor templates already register:

@using CarbonBlazor

<CarbonBlazorStyles />

Parameters:

IncludeFont (default true) - also emit the IBM Plex Sans <link> tags.
PathPrefix (default empty) - prefix for apps hosted under a sub-path, e.g. "/myapp/".

Alternatively, add the <link> manually in index.html / App.razor:

<link rel="stylesheet" href="_content/CarbonBlazor/carbon-blazor.css" />

As a last-resort fallback, the first component that uses JS interop through the registered CarbonBlazorJsModule service injects the stylesheet at runtime if it is missing. The static <CarbonBlazorStyles /> path is preferred (no flash of unstyled content).

The JS interop helpers are imported lazily from _content/CarbonBlazor/carbon-blazor.js by the components that need them - no script tag required.

Wrap the app in a theme provider:

<CbThemeProvider Theme="CbTheme.G100">
    <CbButton>Save</CbButton>
</CbThemeProvider>

Use bindable form components:

<CbTextInput Label="Name" @bind-Value="name" />
<CbToggle Label="Enable feature" @bind-Value="enabled" />

Use data components:

<CbDataTable TItem="ReleaseTask"
             Title="Release tasks"
             Items="tasks"
             Columns="columns"
             Selectable="true" />

AI Quickstart

Use these files as the first context for AI coding agents (Cursor, Claude, GitHub Copilot):

.cursorrules: repository-level coding and generation rules.
.ai/components.md: component API reference (parameters, required fields, slots).
.ai/tokens.md: CarbonBlazor token and theme mapping (White, G10, G90, G100, Teal).
.ai/best-practices.md: page-generation patterns for CarbonBlazor.Demo.

Recommended prompt pattern for agents:

Read .cursorrules and .ai/best-practices.md first.
Look up component signatures in .ai/components.md.
Use .ai/tokens.md for any custom styling decisions.
Generate code using CarbonBlazor components and CbThemeProvider, not raw HTML control replacements.

Included Components

The v0.1.0 catalog includes shell/navigation, buttons, menus, form controls, notifications, loading states, progress, tags, tiles, lists, code snippets, modal, popover, tooltip, toggletip, accordion, tabs, structured list, data table, pagination, and tree view.

Theming

Themes are runtime CSS custom properties. Supported themes are:

White
G10
G90
G100

Token groups include background, layer, field, text, icon, border, focus, interactive, support, overlay, spacing, and motion values.

Accessibility

Components use native HTML controls where possible and add ARIA semantics for richer widgets. Covered behavior includes visible focus, aria-expanded, aria-selected, role=dialog, aria-modal, notification live regions, sortable table headers, labeled row selection, keyboard tab behavior, Escape-to-close modal behavior, and responsive pagination.

Versioning and Publishing

The local release tag is v0.1.0. GitHub publishing is intentionally deferred until a public remote exists:

git remote add origin https://github.com/<owner>/<repo>.git
git push -u origin master
git push origin v0.1.0

Publishing to NuGet

The CarbonBlazor project is packable. Static web assets (carbon-blazor.css, carbon-blazor.js, icons.svg) are bundled automatically and served to consumers from _content/CarbonBlazor/. Source Link + a symbol package (.snupkg) are produced.

Publishing runs from GitHub Actions (.github/workflows/publish.yml) using nuget.org trusted publishing (OIDC) - no long-lived API key.

One-time setup

Create a nuget.org account (sign in with a Microsoft account, pick a username, verify email).
Add a repo secret NUGET_USER = your nuget.org username (profile name, not email).
On nuget.org: username menu → Trusted Publishing → Add:
- Repository Owner: DaleCam
- Repository: CarbonBlazor
- Workflow File: publish.yml
- Environment: empty
- Scopes: Push new packages and package versions, glob CarbonBlazor
A private-repo policy is "pending activation" for 7 days; the first successful publish in that window locks it permanently.

Each release

Bump <Version> in CarbonBlazor/CarbonBlazor.csproj, commit.

Tag and push:

git tag v<version> && git push origin v<version>

The workflow tests, packs, exchanges the OIDC token for a short-lived key, and pushes the .nupkg + .snupkg to nuget.org.

Local pack (verify only)

dotnet pack CarbonBlazor/CarbonBlazor.csproj -c Release -o ./artifacts
dotnet nuget add source "$(pwd)/artifacts" --name carbonblazor-local

Cloudflare Workers

This repo includes wrangler.jsonc for Workers static assets. Use these build settings:

Build command: npm run build:cloudflare
Deploy command: npx wrangler deploy
Root directory: /

Research References

Carbon component catalog: https://carbondesignsystem.com/components/overview/components/
Carbon React framework docs: https://carbondesignsystem.com/developing/frameworks/react/
Carbon themes and tokens: https://carbondesignsystem.com/elements/themes/overview/
Carbon source repository: https://github.com/carbon-design-system/carbon

Product	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.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net10.0
- Microsoft.AspNetCore.Components.Web (>= 10.0.7)

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
0.1.0-ci.4	1	9/2/2026