Lumeo.CodeEditor 4.0.4

Lumeo

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

164 components · 4,983 tests · 14 locales · mobile-first · MIT · .NET 10

Lumeo 4.0.0 is on NuGet — a Radix / Base UI / shadcn parity audit + a 164-component battle-test (~355 bugs fixed, 4,983 tests), and the CLI can now vendor 100% NuGet-free (lumeo eject / lumeo init --standalone). dotnet add package Lumeo. See MIGRATION.md — 4.0 is a major release; upgrading from 3.x is a recompile-and-run upgrade with a few documented behaviour changes.

What's new in 4.0

4.0 pairs a Radix / Base UI / shadcn parity audit with a library-wide correctness hardening pass. There are no API-signature breaks — see MIGRATION.md for the handful of behaviour changes.

• NuGet-free standalone eject — lumeo eject (or lumeo init --standalone) vendors components plus the whole runtime as source, so a project compiles and runs with zero Lumeo / satellite PackageReference. Proven across all 164 components.
• Battle-test campaign — an adversarial sweep of all 164 components fixed ~355 confirmed bugs (UI state surviving data refreshes, keyboard / ARIA, edge data, lifecycle teardown, keyed reorder), each with a bUnit regression test (suite 4,983 green).
• OKLCH theme palette — base + all 8 themes (878 tokens) migrated HSL → OKLCH, exact 1:1 (brand identity unchanged), matching Tailwind v4 / current shadcn.
• RTL — new DirectionProvider + a logical-utility migration (ml-→ms-, left-→start-, …); identical in LTR, mirrored in RTL.
• tweakcn / shadcn native compatibility — a bare shadcn --primary (or a pasted tweakcn export) drives Lumeo's tokens 1:1 with zero setup.
• Accessibility & composition — aria-describedby across every form control, aria-current, reduced-motion entry gating; Card CardTitle / CardDescription, Avatar StatusLabel, Chart AriaLabel, AsChild on AlertDialog / Drawer triggers, public Lumeo.Cx, DataTable ItemKey.
• LumeoFormGenerator — TimeOnly / TimeSpan / List<string> / Phone / Url mappings, [Range] / [StringLength] validation, [Display(Order)] ordering.
• MCP — type-bound enum validation + a new lumeo_get_a11y tool (roles, keyboard keys, focus).

Feature overview

• 164 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
• Mobile-first — touch gestures (swipe, pinch, long-press, pull-to-refresh, swipe-actions), 44×44 px hit targets per WCAG 2.5.5, iOS-style wheel pickers, haptic feedback service, safe-area helpers — try it at /docs/mobile
• 4,983 bUnit tests — CI-enforced on every PR

Component Categories

Installation

Lumeo follows the DevExpress / Telerik / Microsoft.Extensions model: a small core package plus opt-in satellites for heavy components — you only pay for what you use. Live, per-package brotli sizes are tracked at lumeo.nativ.sh/docs/bundle-facts.

# Core — always required (the bulk of the component set)
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
dotnet add package Lumeo.Motion      # 30 motion primitives
dotnet add package Lumeo.Maps        # Map
dotnet add package Lumeo.PdfViewer   # PdfViewer
dotnet add package Lumeo.FileViewer  # FileViewer
dotnet add package Lumeo.CodeEditor  # CodeEditor

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

<ItemGroup>
  <PackageReference Include="Lumeo"            Version="4.0.0" />
  
  <PackageReference Include="Lumeo.Charts"    Version="4.0.0" />
  <PackageReference Include="Lumeo.DataGrid"  Version="4.0.0" />
  <PackageReference Include="Lumeo.Editor"    Version="4.0.0" />
  <PackageReference Include="Lumeo.Scheduler" Version="4.0.0" />
  <PackageReference Include="Lumeo.Gantt"     Version="4.0.0" />
  <PackageReference Include="Lumeo.Motion"    Version="4.0.0" />
  <PackageReference Include="Lumeo.PdfViewer" Version="4.0.0" />
  <PackageReference Include="Lumeo.Maps"      Version="4.0.0" />
  <PackageReference Include="Lumeo.CodeEditor" Version="4.0.0" />
  <PackageReference Include="Lumeo.FileViewer" Version="4.0.0" />
</ItemGroup>

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

Companion packages

Lumeo 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.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 eject               # go 100% NuGet-free (vendor the runtime too)

lumeo eject (or lumeo init --standalone) vendors the components and the runtime they need, so the project builds with no Lumeo package reference at all — proven across all 164 components.

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. 13 tools: lumeo_list_components, lumeo_search, lumeo_get_component (full per-parameter schema), lumeo_get_example, lumeo_get_install, lumeo_validate_markup (pre-flight check Razor for hallucinated APIs / bad enums / bad nesting), lumeo_get_a11y (roles / keyboard / focus), lumeo_get_theme_tokens, lumeo_list_services / lumeo_get_service, lumeo_list_patterns / lumeo_get_pattern, lumeo_changelog.

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

Lumeo Agent Skill — skills/lumeo/

A portable agent skill that teaches Claude Code, Cursor, Codex, Gemini CLI, OpenCode and 50+ other AI agents the Lumeo conventions and how to drive the lumeo-mcp server.

npx skills add github.com/Brain2k-0005/Lumeo/skills/lumeo

Installs to .agents/skills/lumeo/ in your current project with symlinks for every supported agent. Use the Vercel-Labs skills CLI — discoverable at skills.sh. The skill auto-activates whenever you mention a Lumeo component.

Other install methods (manual copy, per-project, global) are documented in skills/lumeo/README.md.

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):

<link rel="stylesheet" href="_content/Lumeo/css/lumeo.css" />


<link rel="stylesheet" href="_content/Lumeo/css/lumeo-utilities.css" />


<script src="_content/Lumeo/js/theme.js"></script>


<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

<ThemeToggle />


@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 — 3.x → 4.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