Moka.Red — A lightweight, performance-focused Blazor UI component library

Moka.Red is a modular Razor Class Library (RCL) suite delivering 120+ production-ready components for Blazor applications. Designed with a dense, compact aesthetic and zero-compromise performance, it targets .NET 9 and .NET 10 and works across all Blazor hosting models.

Key Features

• 120+ components across 13 focused packages
• Dense/compact design — 13 px base font, tight spacing, high information density
• Zero memory leaks — IAsyncDisposable throughout, idempotent disposal, safe JS interop
• Multi-target — net9.0 and net10.0 in every package
• All hosting models — WebAssembly, Server, and Auto render modes
• Theming engine — CSS custom properties with light/dark support and full customisation
• No JavaScript dependencies — collocated .razor.js modules loaded lazily, no bundler required
• Accessibility — ARIA attributes and keyboard navigation built in
• Tree-shaking friendly — install only the packages you need

Quick Install

Install the full meta-package to get every component in one step:

dotnet add package Moka.Red

Or add individual packages as needed — see the Package Overview table below.

Package Overview

Minimal Example

@* App.razor *@
<MokaThemeProvider>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
    </Router>
</MokaThemeProvider>

@* A page using Moka.Red components *@
@page "/demo"

<MokaCard>
    <MokaTextField Label="Name" @bind-Value="_name" />
    <MokaButton Color="MokaColor.Primary" OnClick="Submit">Submit</MokaButton>
</MokaCard>

@code {
    private string _name = string.Empty;

    private void Submit() { /* ... */ }
}

Getting Started

Ready to get going?

1. Installation — add packages and register services
2. Quick Start — a working app in minutes
3. Theming — customise colours, typography and spacing