Tempo.Blazor

Comprehensive Blazor component library with 100+ components for building modern web applications. Supports WebAssembly, Server, and InteractiveAuto render modes and multi-targets .NET 8, 9, and 10.

Key features:

Full-featured form controls, data tables, pickers, charts, scheduler, kanban, and workflow designer
FluentValidation integration via Tempo.Blazor.FluentValidation
Built-in localization (English / Czech) with override support
CSS design system based on custom properties with dark mode
Injectable ToastService and ThemeService registered automatically
Lightweight abstractions package (Tempo.Blazor.Abstractions) for use in API/service projects without UI dependencies

Installation

dotnet add package Tempo.Blazor

Optional packages:

dotnet add package Tempo.Blazor.Abstractions      # Interfaces only (for API/service projects)
dotnet add package Tempo.Blazor.FluentValidation   # FluentValidation integration for EditForm

Quick Start

1. Register Services

// Program.cs
builder.Services.AddTempoBlazor();

2. Add CSS

<!-- index.html or App.razor -->
<link href="_content/Tempo.Blazor/css/tempo-blazor.bundled.css" rel="stylesheet" />

3. Add Toast Container to Layout

<!-- MainLayout.razor -->
@inherits LayoutComponentBase
@implements IDisposable
@inject ThemeService ThemeService

<div data-theme="@ThemeService.ThemeName">
    @Body
    <TmToastContainer />
</div>

@code {
    protected override void OnInitialized() => ThemeService.OnChanged += StateHasChanged;
    public void Dispose() => ThemeService.OnChanged -= StateHasChanged;
}

4. Add Imports

<!-- _Imports.razor -->
@using Tempo.Blazor.Components.Avatars
@using Tempo.Blazor.Components.Buttons
@using Tempo.Blazor.Components.DataDisplay
@using Tempo.Blazor.Components.DataTable
@using Tempo.Blazor.Components.Dropdowns
@using Tempo.Blazor.Components.Feedback
@using Tempo.Blazor.Components.Files
@using Tempo.Blazor.Components.Forms
@using Tempo.Blazor.Components.Icons
@using Tempo.Blazor.Components.Inputs
@using Tempo.Blazor.Components.Layout
@using Tempo.Blazor.Components.Navigation
@using Tempo.Blazor.Components.Notifications
@using Tempo.Blazor.Components.Pickers
@using Tempo.Blazor.Components.Scheduler
@using Tempo.Blazor.Components.Timeline
@using Tempo.Blazor.Components.Toolbar
@using Tempo.Blazor.Components.TreeView
@using Tempo.Blazor.Components.Workflow
@using Tempo.Blazor.Interfaces
@using Tempo.Blazor.Models
@using Tempo.Blazor.Services

5. Use Components

<TmButton Variant="ButtonVariant.Primary" OnClick="HandleClick">
    Click me
</TmButton>

<TmFormField Label="Name">
    <TmTextInput @bind-Value="name" Placeholder="Enter your name" />
</TmFormField>

<TmDatePicker Label="Date of birth" @bind-Value="dateOfBirth" />

<TmDataTable TItem="Person" Items="people">
    <TmDataTableColumn TItem="Person" Title="Name" Field="p => p.Name" Sortable />
    <TmDataTableColumn TItem="Person" Title="Email" Field="p => p.Email" />
</TmDataTable>

Toast Notifications

// Inject ToastService anywhere in your components
[Inject] ToastService Toast { get; set; } = default!;

// Show notifications
Toast.ShowSuccess("Saved successfully");
Toast.ShowError("Something went wrong");
Toast.ShowWarning("Check your input");
Toast.ShowInfo("Record updated");

Components

Form Controls

Component	Description
`TmButton`	Button with variants (Primary, Secondary, Danger, Ghost, Link), sizes, loading state
`TmSplitButton`	Button with dropdown menu
`TmCopyButton`	Copy-to-clipboard button
`TmTextInput`	Text input with label, error, help text, prefix/suffix
`TmTextArea`	Multi-line text input with auto-resize
`TmNumberInput`	Numeric input with +/- buttons, min/max, prefix/suffix
`TmCurrencyInput`	Currency input with locale-aware formatting
`TmSelect`	Select dropdown with options
`TmMultiSelect`	Multi-value select dropdown
`TmCascadingSelect`	Hierarchical cascading select
`TmCheckbox`	Checkbox with label
`TmToggle`	Toggle switch (`role="switch"`)
`TmRadioGroup`	Radio button group
`TmSearchInput`	Search input with debounce
`TmPasswordStrengthIndicator`	Password strength meter
`TmEntityPicker`	Async search-and-select picker for entities
`TmTagPicker`	Tag/keyword picker with suggestions
`TmExpressionEditor`	Expression editor with variable insertion

Date & Time Pickers

Component	Description
`TmDatePicker`	Calendar popup date picker
`TmTimePicker`	Time picker (hours, minutes, optional seconds)
`TmTimeInput`	Inline time input field
`TmDateTimePicker`	Combined date + time picker
`TmDateRangePicker`	Dual-calendar range picker with presets
`TmTimeRangePicker`	Time range with duration display
`TmDateTimeRangePicker`	Combined date-time range picker

Forms

Component	Description
`TmFormField`	Form field wrapper with label, validation, and help text
`TmFormRow`	Horizontal form row layout
`TmFormSection`	Grouped form section with heading
`TmInlineEdit`	Click-to-edit inline field
`TmValidatedField`	Field wrapper with FluentValidation integration
`TmValidationSummary`	Summary of all validation errors
`TmFormValidationMessage`	Per-field validation message
`TmDynamicFormRenderer`	Render forms from field definitions

Data Display

Component	Description
`TmBadge`	Status badges (Soft, Filled, Outlined)
`TmCard`	Content card with header, body, footer
`TmStatCard`	KPI statistic card with trend
`TmEmptyState`	Placeholder for empty lists
`TmAvatar` / `TmAvatarGroup`	User avatars with initials fallback
`TmAccordion` / `TmAccordionItem`	Collapsible content sections
`TmChip` / `TmChipGroup`	Removable chip tags
`TmChangeDiff`	Side-by-side or inline diff view
`TmMultiViewList`	Table / Card / List view switcher
`TmKanbanBoard`	Kanban board with drag & drop

Data Table

Component	Description
`TmDataTable`	Full-featured data table with sorting, filtering, grouping, pagination, selection, and column picker
`TmDataTableColumn`	Column definition with sort, filter, custom cell template, grouping, and aggregates
`TmPagination`	Standalone pagination
`TmColumnFilter`	Column filter UI
`TmColumnPicker`	Column visibility manager
`TmViewManager`	Save/load named table views
`TmBulkActionBar`	Floating bulk action toolbar

Layout

Component	Description
`TmSidebar`	Collapsible sidebar navigation
`TmTopBar`	Top navigation bar
`TmBreadcrumbs`	Breadcrumb navigation
`TmSection`	Content section with optional heading and padding
`TmToggleSection`	Collapsible section with toggle header
`TmCommandPalette`	Ctrl+K command palette
`TmKeyboardShortcutsHelp`	Keyboard shortcuts reference overlay
`TmDrawer`	Slide-in side panel

Navigation

Component	Description
`TmTabs` / `TmTabPanel`	Tab navigation (Line, Pill, Enclosed)
`TmContextMenu` / `TmContextMenuItem`	Right-click context menu

Toolbar

Component	Description
`TmToolbar`	Action toolbar container
`TmToolbarButton`	Button for use inside `TmToolbar`
`TmToolbarDivider`	Visual separator inside `TmToolbar`

Dropdowns

Component	Description
`TmDropdown` / `TmDropdownItem`	Generic dropdown menu
`TmFilterableDropdown`	Dropdown with search/filter input

Feedback

Component	Description
`TmSpinner`	Loading spinner
`TmSkeleton`	Content skeleton placeholder
`TmAlert`	Alert banner (Info, Success, Warning, Error)
`TmDialog`	Alert / Confirm / Prompt dialog
`TmModal`	Modal overlay (5 sizes)
`TmToastContainer`	Toast notifications renderer — place once in layout
`TmProgressBar`	Progress bar (determinate, indeterminate, segmented)
`TmTooltip`	Hover tooltip
`TmPopover`	Click-triggered popover
`TmAutoSaveIndicator`	Auto-save status indicator

Notifications

Component	Description
`TmNotificationBell`	Notification bell with dropdown list

Files & Gallery

Component	Description
`TmFileDropZone`	Drag & drop file upload zone
`TmAttachmentManager`	Attachment list with upload/download/delete
`TmImageGallery`	Image gallery with grid/gallery views
`TmLightbox`	Full-screen image lightbox with keyboard nav

Filters

Component	Description
`TmFilterChip`	Removable filter chip for active filter display
`TmFilterBuilder`	Dynamic query filter builder

Activity & Collaboration

Component	Description
`TmActivityLog`	Tabbed activity view (Timeline / Comments / Attachments)
`TmActivityTimeline`	Reverse-chronological activity feed
`TmActivityComments`	Comment list with edit/delete + rich text editor
`TmActivityAttachments`	Attachment list with chunked upload
`TmRichEditorFull`	Full rich text editor (bold, italic, lists, tables, links, images, mentions)
`TmRichEditorSimple`	Simplified rich text editor

Timeline

Component	Description
`TmTimeline`	Standalone vertical timeline component

Scheduler

Component	Description
`TmScheduler`	Full calendar/scheduler with multiple views
`TmSchedulerDayView`	Day view for the scheduler
`TmSchedulerWeekView`	Week view for the scheduler
`TmSchedulerMonthView`	Month view for the scheduler
`TmSchedulerAgendaView`	Agenda/list view for the scheduler
`TmSchedulerTimelineView`	Horizontal timeline view for the scheduler

Import & Export

Component	Description
`TmImportWizard` / `TmImportWizardStep`	Step-by-step data import wizard
`TmImportPreview`	Preview imported data before confirming
`TmExportOptions`	Export format and options dialog

Advanced

Component	Description
`TmChart`	SVG charts (Bar, Line, Pie, Donut, HorizontalBar)
`TmDashboard`	Widget dashboard with drag/resize grid
`TmTreeView`	Hierarchical tree with lazy loading
`TmStepper`	Step-by-step wizard/progress stepper
`TmWorkflowDesignerCanvas`	Visual workflow editor (drag nodes, draw transitions, zoom/pan)
`TmIcon`	SVG icon with extensible registry

Localization

Built-in support for English and Czech. Override with your own ITmLocalizer:

builder.Services.AddTempoBlazor();
builder.Services.AddSingleton<ITmLocalizer, MyLocalizer>();

Set culture:

var culture = new CultureInfo("cs");
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;

Theming

Dark Mode

ThemeService is automatically registered by AddTempoBlazor(). Subscribe to OnChanged in your layout to re-render when the theme changes:

@inherits LayoutComponentBase
@implements IDisposable
@inject ThemeService ThemeService

<div data-theme="@ThemeService.ThemeName">
    <button @onclick="ThemeService.Toggle">Toggle theme</button>
    @Body
</div>

@code {
    protected override void OnInitialized() => ThemeService.OnChanged += StateHasChanged;
    public void Dispose() => ThemeService.OnChanged -= StateHasChanged;
}

Custom Tokens

Override CSS custom properties to match your brand:

:root {
    --tm-color-primary: #your-brand-color;
    --tm-color-primary-hover: #your-hover-color;
    --tm-font-sans: 'Inter', sans-serif;
    --tm-radius-md: 8px;
}

FluentValidation

dotnet add package Tempo.Blazor.FluentValidation

// Program.cs — auto-scan assemblies for validators
builder.Services.AddTempoFluentValidation(typeof(MyValidator).Assembly);

@using Tempo.Blazor.FluentValidation

<EditForm Model="model" OnValidSubmit="Submit">
    <FluentValidationValidator />

    <TmFormField Label="Name">
        <TmTextInput @bind-Value="model.Name" />
    </TmFormField>
</EditForm>

FluentValidationValidator is provided by Tempo.Blazor.FluentValidation and wires up all registered IValidator<T> instances to the EditContext.

Data Providers

Reference Tempo.Blazor.Abstractions from your API/service project to implement server-side data:

public class PersonDataProvider : IDataTableDataProvider<Person>
{
    public async Task<PagedResult<Person>> GetDataAsync(DataTableQuery query, CancellationToken ct = default)
    {
        // query.Page, query.PageSize — paging (1-based)
        // query.SortColumn, query.SortDescending — sorting
        // query.Filters — column filter predicates
        // query.SearchText — global search
        // query.GroupByColumns — server-side grouping
    }
}

Available provider interfaces (all in Tempo.Blazor.Interfaces):

IDataTableDataProvider<TItem> — server-side table data with paging, sorting, filtering, grouping
IDropdownDataProvider<TItem> — async dropdown/entity picker search
IImageGalleryDataProvider — gallery images with ticket-based URLs
IFileAttachmentProvider — attachment CRUD with chunked upload
IDataTableViewProvider — saved table views (personal/tenant scoped)
IDashboardProvider — dashboard configuration persistence
IWidgetRegistry — dashboard widget definitions
IScheduleDataProvider — server-side scheduler events by date range
IMentionDataProvider — user mention suggestions in rich editors

Custom Icons

// Register an inline SVG path (content inside <svg> tags)
IconRegistry.Register("my-icon", "<path d='M12 2L2 22h20L12 2z'/>");

// Or implement IIconProvider for batch registration
IconRegistry.RegisterProvider(new MyIconProvider());

<TmIcon Name="my-icon" Size="IconSize.Lg" Color="IconColor.Primary" />

Requirements

.NET 8, 9, or 10
Blazor WebAssembly, Server, or InteractiveAuto

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 75 Commits
.github/workflows		.github/workflows
JsonDocumentation		JsonDocumentation
src		src
tests		tests
.gitignore		.gitignore
AGENTS.md		AGENTS.md
COMPONENTS.md		COMPONENTS.md
LICENSE		LICENSE
README.md		README.md
TempoBlazor.slnx		TempoBlazor.slnx
tempo-blazor-abstractions.json		tempo-blazor-abstractions.json
tempo-blazor-documentation.json		tempo-blazor-documentation.json

Folders and files

Latest commit

History

Repository files navigation

Tempo.Blazor

Installation

Quick Start

1. Register Services

2. Add CSS

3. Add Toast Container to Layout

4. Add Imports

5. Use Components

Toast Notifications

Components

Form Controls

Date & Time Pickers

Forms

Data Display

Data Table

Layout

Navigation

Toolbar

Dropdowns

Feedback

Notifications

Files & Gallery

Filters

Activity & Collaboration

Timeline

Scheduler

Import & Export

Advanced

Localization

Theming

Dark Mode

Custom Tokens

FluentValidation

Data Providers

Custom Icons

Requirements

License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages