Lumeo

130+ accessible Blazor components, AI-ready, motion-integrated, shadcn-inspired.

130+ components · 1,727 tests · 14 locales · MIT · .NET 10

v2.0 is currently 2.0.0-rc.10. The API is stable; we're gathering field feedback for a short window before tagging 2.0.0 final. See MIGRATION.md for upgrade notes from 1.x.

What's new in 2.0

• AI primitives — PromptInput, StreamingText, AgentMessageList, ToolCallCard, ReasoningDisplay. SignalR-native token streaming, sticky auto-scroll, collapsible chain-of-thought.
• Motion primitives — Marquee, NumberTicker, TextReveal, BlurFade, BorderBeam, ShimmerButton, Sparkles. Opt-in Animated props on Steps, Timeline, Progress, Tabs, Switch, Checkbox, Badge, BottomNav.
• Scheduler + Gantt + RichTextEditor — FullCalendar v6, Frappe Gantt, and TipTap v2 wrappers. Lazy-loaded JS so you pay only for what you use.
• Dashboard tiles + Bento — Bento, BentoTile, KpiCard, SparkCard, Delta, and a standalone Sparkline primitive.
• Real Excel export — IDataGridExportService emits real .xlsx via ClosedXML, PDF via QuestPDF, or CSV — with a browser download helper.
• 14 locales + RTL — ILumeoLocalizer ships EN, DE, ES, FR, IT, PT, NL, PL, JA, ZH-CN, KO, AR, RU, TR. IThemeService.SetDirectionAsync() flips the whole library to RTL.
• [LumeoForm] source generator — annotate a POCO and get a compile-time RenderForm(model, onSubmit) method that emits a fully-bound, validated Lumeo Form.
• DataGrid upgrades — expandable fullscreen, header drag-to-reorder, layout JSON round-trip, ShowSearch / ShowColumnChooser / ShowExport toggles, Culture parameter, SetHtmlClass for fullscreen navbar hiding.
• Companion packages — see Companion packages below.

Feature overview

• 130+ components — accessible UI primitives, Blazor WASM & Server
• AI primitives — PromptInput, StreamingText, AgentMessageList, ToolCallCard, ReasoningDisplay
• Motion primitives — Marquee, NumberTicker, TextReveal, BlurFade, BorderBeam, ShimmerButton, Sparkles, Sparkline
• Dashboard tiles — KpiCard, SparkCard, Delta, Bento, BentoTile, PickList<T>
• Scheduler + Gantt + RichTextEditor — FullCalendar + Frappe Gantt + TipTap wrappers, lazy-loaded
• 14 locales + RTL — EN/DE/ES/FR/IT/PT/NL/PL/JA/ZH-CN/KO/AR/RU/TR via ILumeoLocalizer; IThemeService.SetDirectionAsync() for RTL
• Excel / PDF / CSV export — IDataGridExportService (ClosedXML + QuestPDF)
• [LumeoForm] source generator — annotate a POCO, get a fully-bound Form for free
• Culture-aware — Culture on DataGrid, DatePicker, DateTimePicker, NumberInput, Slider, Statistic
• BottomNav + Splitter — mobile tab bar (safe-area, optional FAB) and resizable multi-pane layouts
• Block templates — SignIn, SignUp, ResetPassword, OtpVerify, Pricing, Hero, Dashboard, Settings
• 8 color themes + dark mode — Zinc, Blue, Green, Rose, Orange, Violet, Amber, Teal; class-based dark mode
• Tailwind CSS v4 — CSS variable architecture, zero hardcoded colors
• Programmatic OverlayService — open dialogs, sheets, drawers, toasts from code
• 30+ chart types — ECharts-backed; BarChart LabelStrategy="Smart" auto-rotates dense labels
• DataGrid — sort, filter, inline edit, column pin, row group, drag-to-reorder, fullscreen, layout JSON, Excel/PDF/CSV export
• Form validation — DataAnnotations + custom validators with styled error states
• Accessible — ARIA roles, keyboard navigation, focus trapping, screen-reader support
• 1,727 bUnit tests — CI-enforced on every PR

Component Categories

Installation

Lumeo 2.0 follows the DevExpress / Telerik / Microsoft.Extensions model: a small core package plus opt-in satellites for heavy components. The split keeps the core lean (~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 the components 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 in your .csproj. All packages share one version (lockstep) — always upgrade them together:

<ItemGroup>
  <PackageReference Include="Lumeo"            Version="2.0.0-rc.15" />
  <!-- add only the satellites you need: -->
  <PackageReference Include="Lumeo.Charts"    Version="2.0.0-rc.15" />
  <PackageReference Include="Lumeo.DataGrid"  Version="2.0.0-rc.15" />
  <PackageReference Include="Lumeo.Editor"    Version="2.0.0-rc.15" />
  <PackageReference Include="Lumeo.Scheduler" Version="2.0.0-rc.15" />
  <PackageReference Include="Lumeo.Gantt"     Version="2.0.0-rc.15" />
</ItemGroup>

@using Lumeo covers all satellite components — no extra @using directives needed.

Companion packages

Lumeo 2.0 ships with three optional companion packages that extend the core library.

Lumeo.Cli — shadcn-style vendoring

Copy component source into your own repo so you can fork and customize it — like shadcn/ui on the JS side.

dotnet tool install -g Lumeo.Cli
lumeo init                # one-time — writes lumeo.config.json
lumeo add button dialog   # copy components into your repo
lumeo list                # list all registry entries
lumeo diff button         # diff vendored copy vs registry

Lumeo.Templates — dotnet new scaffolders

dotnet new install Lumeo.Templates
dotnet new lumeo-page       -n SettingsPage
dotnet new lumeo-form       -n RegisterForm
dotnet new lumeo-component  -n FancyCard

@lumeo-ui/mcp-server — MCP server for LLM codegen

Give Claude, ChatGPT, Copilot, or Cursor the schemas + examples they need to write correct Lumeo markup.

npm install -g @lumeo-ui/mcp-server
# then wire into Claude Desktop / Cursor / your MCP client config

Setup

1. Register services

// Program.cs
using Lumeo;

builder.Services.AddLumeo();

2. Add imports

@* _Imports.razor *@
@using Lumeo
@using Lumeo.Services

3. Include scripts and styles

Add to your index.html (WASM) or _Host.cshtml (Server):

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

<!-- Pre-compiled Tailwind utilities Lumeo's components need (no local Tailwind build required) -->
<link rel="stylesheet" href="_content/Lumeo/css/lumeo-utilities.css" />

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

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

That's enough to make every Lumeo component render correctly. You don't need Tailwind installed in your app.

4. (Optional) Use Tailwind in your own markup

If you want to write Tailwind classes yourself (in your pages / your own components), install Tailwind CSS v4 in your app and import Lumeo's tokens so utilities like bg-primary resolve against Lumeo's theme:

@import "tailwindcss";

/* Import Lumeo theme variables */
@import "./_content/Lumeo/css/lumeo.css" layer(base);

/* Dark mode variant */
@variant dark (&:where(.dark, .dark *));

/* Map Lumeo CSS variables to Tailwind theme */
@theme {
  --color-background: var(--color-background);
  --color-foreground: var(--color-foreground);
  --color-primary: var(--color-primary);
  --color-primary-foreground: var(--color-primary-foreground);
  /* ... see lumeo.css for full variable list */
}

In this setup you can drop lumeo-utilities.css from step 3 — your own Tailwind build will emit every utility Lumeo uses, plus anything you use in your app.

For alternate color themes, import additional theme files:

@import "./_content/Lumeo/css/themes/_blue.css" layer(base);
@import "./_content/Lumeo/css/themes/_green.css" layer(base);
@import "./_content/Lumeo/css/themes/_rose.css" layer(base);
@import "./_content/Lumeo/css/themes/_orange.css" layer(base);
@import "./_content/Lumeo/css/themes/_violet.css" layer(base);
@import "./_content/Lumeo/css/themes/_amber.css" layer(base);
@import "./_content/Lumeo/css/themes/_teal.css" layer(base);

Usage

@using Lumeo

<Card>
    <CardHeader>
        <Heading Level="3">Hello Lumeo</Heading>
        <Text Size="sm" Color="muted">A beautiful component library.</Text>
    </CardHeader>
    <CardContent>
        <Button OnClick="@(() => count++)">
            Clicked @count times
        </Button>
    </CardContent>
</Card>

@code {
    private int count;
}

Dialogs

<Dialog @bind-IsOpen="dialogOpen">
    <DialogTrigger>
        <Button Variant="Button.ButtonVariant.Outline">Open Dialog</Button>
    </DialogTrigger>
    <DialogContent Size="DialogContent.DialogSize.Lg">
        <DialogHeader>
            <DialogTitle>Are you sure?</DialogTitle>
            <DialogDescription>This action cannot be undone.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
            <Button Variant="Button.ButtonVariant.Secondary" OnClick="@(() => dialogOpen = false)">Cancel</Button>
            <Button OnClick="Confirm">Confirm</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

Toasts

@inject ToastService Toast

<Button OnClick="@(() => Toast.Success("Saved!", "Your changes have been saved."))">
    Save
</Button>

Form Validation

<Form Model="model" OnValidSubmit="HandleSubmit">
    <FormField Label="Email" HelpText="We'll never share your email." Required>
        <Input @bind-Value="model.Email" type="email" />
    </FormField>
    <FormField Label="Password" Required>
        <PasswordInput @bind-Value="model.Password" ShowStrength />
    </FormField>
    <Button type="submit">Sign Up</Button>
</Form>

Theming

Switch color schemes at runtime

<ThemeSwitcher />

Or programmatically via ThemeService:

@inject ThemeService Theme

<Button OnClick="@(() => Theme.SetSchemeAsync("blue"))">
    Switch to Blue
</Button>

Available themes

Dark mode

<!-- Toggle button -->
<ThemeToggle />

<!-- Or programmatically -->
@inject ThemeService Theme

await Theme.SetModeAsync(ThemeMode.Dark);   // Force dark
await Theme.SetModeAsync(ThemeMode.Light);  // Force light
await Theme.SetModeAsync(ThemeMode.System); // Follow OS preference
await Theme.ToggleModeAsync();              // Toggle current

Documentation

• Live Docs — Full component demos and API reference
• Form Validation Guide — DataAnnotations, custom validators, examples
• Accessibility Guide — ARIA roles, keyboard patterns, focus management
• Contributing Guide — Setup, component creation, testing, code style
• Changelog — Full release history
• Migration Guide — 1.x → 2.0 upgrade notes

Tech Stack

• .NET 10 / Blazor
• Tailwind CSS v4
• ECharts for charts, FullCalendar for Scheduler, Frappe Gantt for Gantt, TipTap for RichTextEditor
• ClosedXML + QuestPDF for DataGrid export
• Blazicons.Lucide for icons

License

MIT