Soenneker.Quark.Suite

Blazor component library for .NET — Bootstrap 5, full theming, and type-safe CSS utilities.

Highlights

• 🎯 Type-safe CSS: Strong enums for colors, spacing, layout, typography
• 🎨 Theming: Bootstrap CSS variable overrides + runtime theme switching
• 🧩 60+ components: Buttons, forms, tables, modals, navs, data grid, more
• 📦 Single package: All components in one NuGet, no extras
• 🚀 Optimized: Built for performance and low overhead

Install

dotnet add package Soenneker.Quark.Suite

Setup

builder.Services.AddQuarkSuiteAsScoped();

var host = builder.Build();

await host.Services.LoadQuarkResources(); // Optional if you want to load resources via html

Examples

Type-safe styling

<Button Color="@Color.Primary" Size="@Size.Large">Click</Button>

<Div Margin="Margin.Is3.FromTop" Padding="Padding.Is4.OnX">
    <Text Color="@TextColor.Success" Weight="@FontWeight.Bold">
        Success message
    </Text>
</Div>

Data table with server-side paging

<Table TItem="Employee" Data="employees" PageSize="10"
            ServerSide="true" OnRequestData="LoadEmployees">
    <TableColumns>
        <Th Field="@nameof(Employee.Name)" Sortable />
        <Th Field="@nameof(Employee.Email)" />
        <Th Field="@nameof(Employee.Department)" Sortable />
    </TableColumns>
</Table>