Welcome to Lumeo.

Lumeo is a Blazor component library inspired by shadcn/ui, bringing the same philosophy of beautifully designed, accessible, and composable components to the .NET ecosystem. Built on top of Tailwind CSS v4 and targeting .NET 10, Lumeo gives you a complete set of UI primitives that you own and control — no black-box overrides, no style collisions.

Every component is designed with accessibility and developer experience in mind. Components are fully themeable via CSS variables, work seamlessly in both light and dark mode, and expose a consistent parameter API so you can drop them into any Blazor Server or WebAssembly project.

Lumeo follows shadcn/ui's naming style rather than the prefixed approach you see in MudBlazor (<MudCard>) or Ant Design Blazor (<AntCard>). Components are unprefixed — <Card>, <Dialog>, <Button> — and the library uses C#'s @namespace Lumeo plus a global using to keep markup clean.

This reads like native HTML, matches the shadcn aesthetic the library is inspired by, and keeps your .razor files scannable. If a BCL type collides (e.g. Text, Link) you can always fully qualify with Lumeo.Text — the same pattern you'll see throughout these docs.

Slot naming — the Content suffix

Because names are unprefixed, a RenderFragment slot named Icon would shadow the <Icon> component inside its own body. The convention is simple: when a slot name would collide with a component name, suffix the slot with Content.

Starting in v1.6.0, Icon and Label slots have been renamed to IconContent and LabelContent across ten components: Alert, Badge, EmptyState, Rating, Result, Segmented, SidebarMenuButton, StepsItem, TabsTrigger, and TimelineItem. The old names remain as [Obsolete] aliases — existing code keeps working with a compile-time warning, and the aliases are removed in 2.0.

Lumeo 2.0 follows the DevExpress / Telerik / Microsoft.Extensions model: a small core package plus opt-in satellites for heavy components. The core stays at ~568 KB instead of ~918 KB — you only pay for what you use.

# Core — always required (~110 components)
$ dotnet add package Lumeo

# Add satellites only for what you use:
$ dotnet add package Lumeo.Charts     # Chart and 30+ subtypes
$ dotnet add package Lumeo.DataGrid   # DataGrid, DataTable, Filter
$ dotnet add package Lumeo.Editor     # RichTextEditor
$ dotnet add package Lumeo.Scheduler  # Scheduler
$ dotnet add package Lumeo.Gantt      # Gantt

Or reference them directly in your .csproj. All packages share one version (lockstep) — always upgrade them together:

<ItemGroup>
  <PackageReference Include="Lumeo"            Version="3.12.1" />
  <!-- add only the satellites you need: -->
  <PackageReference Include="Lumeo.Charts"    Version="3.12.1" />
  <PackageReference Include="Lumeo.DataGrid"  Version="3.12.1" />
  <PackageReference Include="Lumeo.Editor"    Version="3.12.1" />
  <PackageReference Include="Lumeo.Scheduler" Version="3.12.1" />
  <PackageReference Include="Lumeo.Gantt"     Version="3.12.1" />
  <PackageReference Include="Lumeo.Motion"    Version="3.12.1" />
  <PackageReference Include="Lumeo.PdfViewer" Version="3.12.1" />
  <PackageReference Include="Lumeo.Maps"      Version="3.12.1" />
  <PackageReference Include="Lumeo.CodeEditor" Version="3.12.1" />
</ItemGroup>

In your Program.cs, register the Lumeo services. This registers ToastService, OverlayService, ThemeService, KeyboardShortcutService, and ComponentInteropService:

builder.Services.AddLumeo();

Add the namespace to your _Imports.razor so components are available everywhere:

@using Lumeo
@using Lumeo.Services

Add <ToastProvider /> and <OverlayProvider /> to your MainLayout.razor so toast notifications and programmatic overlays work:

<div class="min-h-screen">
    @Body
    <ToastProvider />
    <OverlayProvider />
</div>

Add the following to your index.html (WebAssembly) or App.razor/_Host.cshtml (Server). Since v1.3.0 the package ships a pre-compiled Tailwind utility stylesheet, so no local Tailwind build is required:

<!-- Design tokens: CSS variables + keyframes -->
<link rel="stylesheet" href="_content/Lumeo/css/lumeo.css" />

<!-- Pre-compiled Tailwind utilities used by Lumeo components -->
<link rel="stylesheet" href="_content/Lumeo/css/lumeo-utilities.css" />

<!-- Theme bootstrap (prevents flash of unstyled content) -->
<script src="_content/Lumeo/js/theme.js"></script>

<!-- Component interop (loaded on demand) -->
<script src="_content/Lumeo/js/components.js" type="module"></script>

Built-in English and German translations ship in v1.2.0+. Select a culture via the standard ASP.NET request-localization middleware, or override specific strings during AddLumeo:

builder.Services.AddLumeo(opts =>
{
    opts.Add("de", "DataGrid.NoData", "Keine Datensätze");
    opts.AddMany("fr", new Dictionary<string, string>
    {
        ["DataGrid.NoData"]     = "Aucune donnée",
        ["Pagination.Previous"] = "Précédent",
    });
});

Once installed, you can start using components directly in your .razor files. Here is a simple example using the Button component:

<!-- Default button -->
<Button>Click me</Button>

<!-- Variant and size -->
<Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">
    Save changes
</Button>

<!-- With click handler -->
<Button OnClick="HandleClick">Submit</Button>

Lumeo uses CSS custom properties (variables) for all colors and design tokens. There are no hardcoded hex values or raw HSL colors anywhere in the component library. This means:

• Dark mode works automatically via variable swaps — no dark: Tailwind prefixes needed.
• You can swap the entire palette by overriding a handful of CSS variables in your own stylesheet.
• Multiple built-in themes are available out of the box.

Open the customizer panel in the top-right of any docs page (the icon, or press Ctrl + B) to preview every built-in theme against the live page and copy the matching lumeo apply --preset command.