NTComponents.Extensions 2.0.0-preview.5

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher.
This is a prerelease version of NTComponents.Extensions.
There is a newer prerelease version of this package available.
See the version list below for details. 
dotnet add package NTComponents.Extensions --version 2.0.0-preview.5
                    


                    

                
NuGet\Install-Package NTComponents.Extensions -Version 2.0.0-preview.5
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="NTComponents.Extensions" Version="2.0.0-preview.5" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="NTComponents.Extensions" Version="2.0.0-preview.5" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="NTComponents.Extensions" />
                    


                            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 NTComponents.Extensions --version 2.0.0-preview.5
                    


                    

                
#r "nuget: NTComponents.Extensions, 2.0.0-preview.5"
#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 NTComponents.Extensions@2.0.0-preview.5
#: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=NTComponents.Extensions&version=2.0.0-preview.5&prerelease
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=NTComponents.Extensions&version=2.0.0-preview.5&prerelease
                    


                            Install as a Cake Tool

NTComponents

PR Build AOT Compatibility

NTComponents is a Material 3 inspired Blazor component library for .NET 9 and .NET 10 applications. The current component model is NT* first, with source-generated documentation metadata, render-compatibility guidance, static web assets, scoped CSS, optional JavaScript enhancement, and analyzer coverage for component usage rules.

The package is designed for Blazor Web Apps, Blazor WebAssembly, interactive render modes, and static SSR scenarios where components can render useful HTML before browser enhancement.

Quick Getting Started

1. Install

dotnet add package NTComponents

2. Add the namespace

Add the component namespace to your app's _Imports.razor:

@using NTComponents

3. Register services

Register the library services in Program.cs:

builder.Services.AddNTServices();

AddNTServices() registers the NT snackbar, toast, dialog, local storage, session storage, and default option services used by the component library. The legacy AddTnTServices() extension remains available as an obsolete compatibility shim.

4. Add head dependencies

Place NTHeadDependencies in the document head and include the package scoped CSS:

<head>
    <NTHeadDependencies />
</head>

NTHeadDependencies emits theme bootstrap scripts, first-paint theme links, measurement tokens, ripple styles, Roboto, Material Symbols fonts, and the anchor-positioning polyfill hook.

5. Add app-level hosts

Add app-level hosts once near the route or layout level when you use these services:

<NTToast />
<NTSnackbar />

NTToast and NTSnackbar register browser bridges so both interactive Blazor code and static markup can trigger feedback. NTThemeToggle works with the theme runtime and the theme CSS files under /Themes by default.

6. Use components

<NTCard>
    <h2>Account</h2>
    <p>Review the account settings before saving.</p>
    <NTButton Label="Save" Variant="NTButtonVariant.Filled" OnClickCallback="@(async _ => await SaveAsync())" />
</NTCard>

@code {
    private Task SaveAsync()
    {
        return Task.CompletedTask;
    }
}

Component Model

NTComponents uses the NT* API surface for new component work. Some legacy TnT* components and services remain for compatibility, but new code should prefer NTButton, NTCard, NTDialog, NTToast, NTSnackbar, NTThemeToggle, NTNavigationRail, NTProgress, NTLoader, NTCarousel, and the NTInput* form components.

The library's component model is built around:

  • Material 3 structure, spacing, state, and token alignment.
  • Co-located component files: .razor, .razor.cs, .razor.scss, and .razor.ts when browser behavior is needed.
  • Scoped CSS plus shared static assets under _content/NTComponents.
  • Progressive enhancement where possible: useful static markup first, richer behavior after browser JavaScript or Blazor interactivity is available.
  • Render compatibility metadata through NTDocumentationAttribute.
  • Analyzer-backed guidance for required parameters, invalid combinations, and accessibility-sensitive component usage.

Component Families

The library includes components for:

  • Actions: NTButton, NTIconButton, NTFabButton, NTFabMenu, NTSplitButton, NTButtonGroup.
  • Layout: NTLayout, NTHeader, NTBody, NTFooter, NTContainerView, NTListDetailView, NTSupportingPaneView, NTMultiPaneView, NTFeedView.
  • Navigation: NTNavLink, NTNavigationRail, NTNavigationRailItem, NTNavigationRailGroup.
  • Surfaces and content: NTCard, NTDivider, NTTag, NTChip, NTSkeleton, NTShape, NTTooltip.
  • Feedback: NTToast, NTSnackbar, NTProgress, NTLoader.
  • Forms: NTForm, NTInputText, NTTextArea, NTInputCheckbox, NTInputSwitch, NTInputRadioGroup, NTInputSelect, NTSelect, NTCombobox, NTAutocomplete, NTTypeahead, NTInputSlider, NTInputRangeSlider, NTInputDateTime, NTFileUpload.
  • Overlays and menus: NTDialog, NTMenu, NTContextMenu.
  • Rich components: NTDataGrid, NTCarousel, NTCarouselItem, NTTabView, NTTab, NTWizard, NTRichTextEditor, NTVirtualize.

Render Modes And SSR

Many components render useful HTML in static SSR and enhance later. Components that depend on browser APIs, JS interop, callbacks, or measurement are marked as progressively enhanced or interactive required in their generated documentation metadata.

Use these rules when choosing render modes:

  • Native HTML behavior and pass-through attributes can work in static SSR.
  • Blazor callbacks such as EventCallback require an interactive render mode.
  • Browser-enhanced components need their package scripts and static assets available.
  • App-level feedback hosts such as NTToast and NTSnackbar should be rendered once near the layout or route shell.

Static markup can use guarded browser bridge calls after the host script is available:

<button onclick="window.NTToast?.queueToast({ title: 'Saved', message: 'Changes stored.', variant: 'success' })">
    Save
</button>

Interactive Blazor code can use the registered services:

@inject INTToastService ToastService
@inject INTSnackbarService SnackbarService

<NTButton Label="Show toast" OnClickCallback="ShowToastAsync" />
<NTButton Label="Show snackbar" Variant="NTButtonVariant.Outlined" OnClickCallback="ShowSnackbarAsync" />

@code {
    private Task ShowToastAsync()
    {
        return ToastService.ShowSuccessAsync("Saved", "Changes stored.");
    }

    private Task ShowSnackbarAsync()
    {
        return SnackbarService.ShowAsync("Message sent");
    }
}

Theming

NTHeadDependencies and NTThemeToggle use the NT theme runtime. The default theme root is /Themes, with these expected file names:

  • light.css, light-mc.css, light-hc.css
  • dark.css, dark-mc.css, dark-hc.css

You can override the theme root and file names on both NTHeadDependencies and NTThemeToggle:

<NTHeadDependencies ThemesRoot="/brand-themes" LightDefaultCss="light.css" DarkDefaultCss="dark.css" />
<NTThemeToggle ThemesRoot="/brand-themes" DefaultTheme="NTTheme.System" DefaultContrast="NTThemeContrast.Default" />

The runtime persists the selected theme in local storage using NTComponentsStoredThemeKey and supports light, dark, and system preferences with default, medium, and high contrast variants.

Packages

The repository produces:

  • NTComponents: the core Blazor component library.
  • NTComponents.AspNetCore: ASP.NET Core support package.
  • NTComponents.Extensions: supporting extensions package.

The component package includes analyzer projects during build so component rules stay close to the public API.

Development

Restore, build, and test from the repository root:

dotnet restore
dotnet build NTComponents.slnx -c Release
dotnet test NTComponents.Tests/NTComponents.Tests.csproj -c Release --no-build
npm ci
npm test

Run AOT compatibility validation when changing trimming, JavaScript interop, static assets, or component public APIs:

pwsh ./test-aot-compatibility.ps1

Design And Documentation

Component design work follows the Material 3 source file and repo-local Material 3 reference notes. Public components use XML documentation and NTDocumentationAttribute metadata so documentation pages can show summaries, API members, render compatibility, and related enum or constant references directly from source.

The sample and documentation hosts in this repository are development aids for validating the package surface. Consumer setup should start with the quick setup guide above.

License

NTComponents is licensed under the MIT License. See LICENSE.txt for details.

Product Compatible and additional computed target framework versions.
.NET net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  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.

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
2.0.0-preview.18 0 6/18/2026
2.0.0-preview.17 0 6/18/2026
2.0.0-preview.16 0 6/18/2026
2.0.0-preview.15 40 6/17/2026
2.0.0-preview.14 186 6/12/2026
2.0.0-preview.13 44 6/12/2026
2.0.0-preview.12 49 6/11/2026
2.0.0-preview.11 48 6/11/2026
2.0.0-preview.10 45 6/11/2026
2.0.0-preview.9 42 6/11/2026
2.0.0-preview.8 49 6/10/2026
2.0.0-preview.7 41 6/10/2026
2.0.0-preview.6 47 6/10/2026
2.0.0-preview.5 45 6/10/2026
2.0.0-preview.4 44 6/9/2026
2.0.0-preview.3 49 6/9/2026
2.0.0-preview.2 46 6/9/2026
2.0.0-preview.1 46 6/5/2026
1.48.0 217 4/15/2026
1.47.0 483 4/15/2026
Loading failed