Lumeo.Motion 3.0.1

Lumeo

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

149 components · 2,500+ tests · 14 locales · mobile-first · MIT · .NET 10

Lumeo 3.0 is stable and on NuGet. dotnet add package Lumeo. See MIGRATION.md for upgrade notes from 2.x.

What's new in 3.0

• BREAKING — unified enums. 39 per-component Size / Side / Align / Orientation enums collapsed into Lumeo.Size, Lumeo.Side, Lumeo.Align, Lumeo.Orientation. See MIGRATION.md.
• Overlay dismiss gate — OnBeforeClose + DismissEventArgs on Dialog / Sheet / Drawer / AlertDialog, with auto-cancelling reasons (escape / outside / swipe / close / action / cancel).
• Nested overlay z-stacking — Dialog-in-Dialog and Sheet-in-Dialog now layer correctly via monotonic z-index allocation.
• DatePicker keyboard input — type a date in the configured Format; auto-parses on Enter/blur with an OnParseError callback.
• DateTimePicker time zone — bind a DateTimeOffset while displaying in a specific TimeZoneInfo (DST-aware).
• Async field validators — FormField.AsyncValidator with debounce, in-flight cancellation, and a pending spinner. FormContext.IsAnyFieldValidating aggregator.
• Menu submenus — DropdownMenuSub / ContextMenuSub / MenubarSub triplets with recursive nesting, hover-open with intent delay, ArrowRight/ArrowLeft keyboard.
• Tabs drag-to-reorder — opt-in TabsList.Reorderable with OnReorder callback (consumer mutates the collection).
• Form.ResetValues() — restore model from initial JSON snapshot; pairs with the existing Reset() (which only clears errors).
• Toast pause + variant-aware ARIA — toasts pause auto-dismiss on hover/focus; Destructive toasts render role="alert" + aria-live="assertive", others role="status" + polite.
• Tooltip collision flip — fixed-position with auto-flip away from viewport edges (no API change).
• ARIA live error regions — form-control error text now announces to screen readers.
• Internal helpers — LumeoIds, Cx, DebouncedValue<T> for consistent IDs, class composition, and debounce across the library. All components now inject IComponentInteropService (the interface) so test projects can swap a mock.

Feature overview

• 149 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
• 2,500+ 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

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

<ItemGroup>
  <PackageReference Include="Lumeo"            Version="3.0.0" />
  
  <PackageReference Include="Lumeo.Charts"    Version="3.0.0" />
  <PackageReference Include="Lumeo.DataGrid"  Version="3.0.0" />
  <PackageReference Include="Lumeo.Editor"    Version="3.0.0" />
  <PackageReference Include="Lumeo.Scheduler" Version="3.0.0" />
  <PackageReference Include="Lumeo.Gantt"     Version="3.0.0" />
  <PackageReference Include="Lumeo.Motion"    Version="3.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.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. Nine 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_theme_tokens, 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 — 2.x → 3.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