Tablazor 0.9.0

Tablazor

A Blazor component library built on the Tabler UI kit — providing production-ready, themeable UI components for Blazor Server and WebAssembly applications.

Goals

• Provide a comprehensive set of Blazor components that wrap the Tabler design system, so developers can build beautiful dashboards and web apps without writing raw HTML/CSS.
• Support .NET 8.0, 9.0, and 10.0 with a single package.
• Keep JavaScript to an absolute minimum — favour pure Blazor rendering and state management wherever possible.
• Ship accessible components with ARIA attributes and keyboard support out of the box.
• Offer a simple, consistent API across all components via a shared base class and fluent builders.

Features

• Multi-Target Support — .NET 8.0, 9.0, and 10.0
• 50+ Components — Buttons, Badges, Avatars, Cards, Modals, Dialogs, Toasts, Carousels, Dropdowns, Breadcrumbs, Tables, Accordions, Alerts, and more
• 4,000+ Icons — The complete Tabler Icons set included as strongly-typed constants
• Minimal JavaScript — Pure Blazor state management; JS interop only where the DOM API requires it
• Accessible — ARIA roles, labels, and keyboard navigation
• Themeable — Built on Tabler CSS variables for easy colour and style customisation

Installation

1. Install the NuGet package

dotnet add package Tablazor

2. Register services

In your Program.cs, register the Tablazor services:

builder.Services.AddTablazor();

This registers services required by components such as TabToastContainer and TabPageHeader.

3. Add the Tabler stylesheet and script

In your App.razor (or index.html for WASM), add the Tabler CSS and JS references. Note that I'm working hard to completely remove the dependency on the tabler.js file and create everything in pure Blazor.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css">


<script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>

4. Add namespace imports

In your _Imports.razor, add the following namespaces:

@using Tablazor.Components
@using Tablazor.Enums
@using Tablazor.Icons
@using Tablazor.Services

You're ready to go.

Quick Start

@* Badge *@
<TabBadge Color="TabColors.Primary">New</TabBadge>

@* Button *@
<TabButton Color="TabColors.Success" OnClick="HandleClick">Save</TabButton>

@* Avatar *@
<TabAvatar ImageUrl="https://example.com/avatar.jpg" Size="AvatarSize.Large" />

@* Awaitable dialog *@
<TabButton Color="TabColors.Danger" OnClick="ConfirmDelete">Delete</TabButton>
<TabDialog @ref="_dialog"
           Title="Confirm"
           Message="Are you sure you want to delete this item?"
           Buttons="DialogButtons.YesNo"
           Color="TabColors.Danger" />

@code {
    private TabDialog _dialog = null!;

    private async Task ConfirmDelete()
    {
        var result = await _dialog.ShowAsync();
        if (result == DialogResult.Yes)
        {
            // perform delete
        }
    }
}

Components

Accordion

Alert

Avatar

Badge

Breadcrumbs

Button

Card

Carousel

Countup

Dialog

Divider

Dropdown

Dynamic Form

Footer

Icon

Layout

List

Modal

Off-Canvas

Placeholder

Ribbon

Table

Toast

Common Parameters

All components inherit from TabBaseComponent and share these parameters:

All components also support attribute splatting via @attributes for any additional HTML attributes.

Development

Prerequisites

• .NET 10.0 SDK (also builds for .NET 8.0 and 9.0)

Build

dotnet build src/Tablazor.sln

Run Tests

dotnet test src/Tablazor.sln

Run Demo Site

dotnet run --project src/Tablazor.DemoSite

The demo site runs at https://localhost:7170.

Create NuGet Package

dotnet pack src/Tablazor/Tablazor.csproj -c Release -o ./nupkg

License

This project is licensed under the MIT License.