https://github.com/brain2k-0005/lumeo
A modern, accessible Blazor component library with 130+ components. Tailwind CSS v4, 8 themes, dark mode, AI chat primitives, full DataGrid, Scheduler, charts, RTL + 14 locales. MIT, .NET 10, 868 KB. Inspired by shadcn/ui.
https://github.com/brain2k-0005/lumeo
accessibility ai blazor blazor-components blazor-server blazor-wasm charts component-library csharp dark-mode datagrid dotnet i18n mcp rtl shadcn source-generator tailwindcss themes ui-components
Last synced: 18 days ago
JSON representation
A modern, accessible Blazor component library with 130+ components. Tailwind CSS v4, 8 themes, dark mode, AI chat primitives, full DataGrid, Scheduler, charts, RTL + 14 locales. MIT, .NET 10, 868 KB. Inspired by shadcn/ui.
- Host: GitHub
- URL: https://github.com/brain2k-0005/lumeo
- Owner: Brain2k-0005
- License: mit
- Created: 2026-02-26T15:30:06.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2026-05-24T21:42:46.000Z (24 days ago)
- Last Synced: 2026-05-24T23:30:18.952Z (23 days ago)
- Topics: accessibility, ai, blazor, blazor-components, blazor-server, blazor-wasm, charts, component-library, csharp, dark-mode, datagrid, dotnet, i18n, mcp, rtl, shadcn, source-generator, tailwindcss, themes, ui-components
- Language: C#
- Homepage: https://lumeo.nativ.sh/
- Size: 44 MB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Lumeo
**149 accessible Blazor components, AI-ready, motion-integrated, shadcn-inspired.**
**149 components · 2,500+ tests** · 14 locales · mobile-first · MIT · .NET 10
[](https://www.nuget.org/packages/Lumeo)
[](https://www.nuget.org/packages/Lumeo)
[](./LICENSE)
[](https://lumeo.nativ.sh)
[](https://skills.sh/Brain2k-0005/Lumeo/lumeo)
[](https://github.com/Brain2k-0005/Lumeo/stargazers)
[](https://github.com/sponsors/Brain2k-0005)
> **Lumeo 3.1.0 is on NuGet — AudioPlayer + SignaturePad + PdfViewer + Maps + CodeEditor satellites**. `dotnet add package Lumeo`. See [`MIGRATION.md`](./MIGRATION.md) for upgrade notes from 2.x (3.0.x and 3.1.x patches require no migration).
## 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`](./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` 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`
- **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
| Category | Components |
|----------|------------|
| **Layout** | Stack, Flex, Grid, Container, Center, Spacer, AspectRatio, Resizable, ScrollArea, Separator, Splitter |
| **Typography** | Text, Heading, Link, Code |
| **Forms** | Input, Select, Combobox, DatePicker, DateRangePicker, DateTimePicker, TimePicker, NumberInput, PasswordInput, InputMask, Checkbox, Switch, RadioGroup, Slider, Toggle, ToggleGroup, FileUpload, OtpInput, TagInput, ColorPicker, Textarea, Form, Mention, Cascader, PickList, RichTextEditor |
| **Data Display** | Table, DataTable, DataGrid, Card, Badge, Chip, Avatar, Calendar, Scheduler, Gantt, Descriptions, Statistic, Timeline, Steps, Rating, Image, ImageCompare, TreeView, QRCode, Watermark, Sparkline |
| **Feedback** | Toast, Alert, Progress, Spinner, Skeleton, EmptyState, Result |
| **Overlay** | Dialog, Sheet, Drawer, AlertDialog, Popover, Tooltip, HoverCard, ContextMenu, DropdownMenu, Command, PopConfirm, Tour |
| **Navigation** | Tabs, Breadcrumb, Pagination, Sidebar, BottomNav, Menubar, NavigationMenu, MegaMenu, Accordion, Collapsible, Scrollspy, BackToTop, Affix, SpeedDial |
| **AI** | PromptInput, StreamingText, AgentMessageList, AgentMessage, ToolCallCard, ReasoningDisplay |
| **Motion** | *via Lumeo.Motion satellite* — BlurFade, BorderBeam, Marquee, NumberTicker, ShimmerButton, Sparkles, TextReveal, AnimatedBeam, Meteors, Globe, Dock, Spotlight, TypingAnimation, Confetti, MagneticButton, AnimatedGradientText, Ripple, OrbitingCircles, and 12 more |
| **Dashboard** | Bento, BentoTile, KpiCard, SparkCard, Delta |
| **Drag & Drop** | Kanban, SortableList, Transfer |
| **Charts** | 30+ ECharts types — Bar (smart labels), Line, Area, Pie, Donut, Radar, Scatter, Heatmap, Treemap, Sankey, Funnel, Gauge, Candlestick, Boxplot, Calendar, Sunburst, Graph, Parallel, ThemeRiver, WordCloud, GeoMap |
## 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](https://lumeo.nativ.sh/docs/bundle-facts).
```bash
# 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:
```xml
```
`@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.
```bash
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
```bash
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`.
```bash
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](https://docs.claude.com/en/docs/agents-and-tools/agent-skills) 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.
```bash
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](https://github.com/vercel-labs/skills) — discoverable at [skills.sh](https://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`](skills/lumeo/README.md).
## Setup
### 1. Register services
```csharp
// Program.cs
using Lumeo;
builder.Services.AddLumeo();
```
### 2. Add imports
```razor
@* _Imports.razor *@
@using Lumeo
@using Lumeo.Services
```
### 3. Include scripts and styles
Add to your `index.html` (WASM) or `_Host.cshtml` (Server):
```html
```
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:
```css
@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:
```css
@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
```razor
@using Lumeo
Hello Lumeo
A beautiful component library.
Clicked @count times
@code {
private int count;
}
```
### Dialogs
```razor
Open Dialog
Are you sure?
This action cannot be undone.
Cancel
Confirm
```
### Toasts
```razor
@inject ToastService Toast
Save
```
### Form Validation
```razor
Sign Up
```
## Theming
### Switch color schemes at runtime
```razor
```
Or programmatically via `ThemeService`:
```razor
@inject ThemeService Theme
Switch to Blue
```
### Available themes
| Theme | Primary Color | Character |
|--------|--------------------------|-------------------|
| Zinc | `hsl(240 5% 26%)` | Clean, neutral |
| Blue | `hsl(221 83% 53%)` | Corporate, trust |
| Green | `hsl(142 71% 45%)` | Growth, eco |
| Rose | `hsl(347 77% 50%)` | Warm, energetic |
| Orange | `hsl(14 70% 50%)` | Warm brand |
| Violet | `hsl(262 83% 58%)` | Bold, creative |
| Amber | `hsl(38 92% 50%)` | Energy, attention |
| Teal | `hsl(173 80% 40%)` | Calm, modern |
### Dark mode
```razor
@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](https://lumeo.nativ.sh)** — Full component demos and API reference
- **[Form Validation Guide](https://lumeo.nativ.sh/docs/form-validation)** — DataAnnotations, custom validators, examples
- **[Accessibility Guide](https://lumeo.nativ.sh/docs/accessibility)** — ARIA roles, keyboard patterns, focus management
- **[Contributing Guide](https://lumeo.nativ.sh/docs/contributing)** — Setup, component creation, testing, code style
- **[Changelog](https://lumeo.nativ.sh/docs/changelog)** — Full release history
- **[Migration Guide](./MIGRATION.md)** — 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](https://github.com/nickvdyck/blazicons) for icons
## License
MIT