# Lumeo

> A modern, accessible Blazor component library — 164 production-ready components on Tailwind CSS v4, with AI primitives, motion, DataGrid, charts, and RTL/i18n support. MIT-licensed, .NET 10, 889 KB total package.

## Key pages

- [Introduction](https://lumeo.nativ.sh/docs/introduction): What Lumeo is and how it compares to MudBlazor/Radzen/AntBlazor
- [Getting Started](https://lumeo.nativ.sh/docs/templates): `dotnet new` templates and setup
- [CLI](https://lumeo.nativ.sh/docs/cli): `lumeo add` / `lumeo init` commands
- [Registry](https://lumeo.nativ.sh/docs/registry): Component registry for tooling
- [MCP server](https://lumeo.nativ.sh/docs/mcp): Model Context Protocol integration for AI agents
- [Accessibility](https://lumeo.nativ.sh/docs/accessibility): WCAG AA compliance notes
- [Theming](https://lumeo.nativ.sh/themes): Live theme customizer
- [Changelog](https://lumeo.nativ.sh/docs/changelog)

## Components

- [Accordion](https://lumeo.nativ.sh/components/accordion): A vertically stacked set of interactive headings that each reveal a section of content.
- [Affix](https://lumeo.nativ.sh/components/affix): Pins content to a fixed position when scrolling past a threshold.
- [Agent Message List](https://lumeo.nativ.sh/components/agent-message-list): Auto-scrolling chat-style message list for AI agent conversations. Distinguishes user, assistant, and tool turns.
- [Ai](https://lumeo.nativ.sh/components/ai): Streaming-ready building blocks for LLM-powered chat interfaces. Render tokens as they arrive, show tool calls, surface reasoning, and let users send prompts — all over Blazor Server's SignalR pipe.
- [Alert](https://lumeo.nativ.sh/components/alert): Displays a callout for important messages and feedback.
- [Alert Dialog](https://lumeo.nativ.sh/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response.
- [Animated Beam](https://lumeo.nativ.sh/components/animated-beam): SVG beam that traces an animated gradient path between two DOM elements.
- [App Bar](https://lumeo.nativ.sh/components/app-bar): A top application bar with start, center, and end content slots — sticky by default, with optional border and elevation.
- [Aspect Ratio](https://lumeo.nativ.sh/components/aspect-ratio): Displays content within a desired ratio.
- [Audio Player](https://lumeo.nativ.sh/components/audio-player): A themed audio player with play/pause, scrub bar, time display, volume, optional cover art, and download.
- [Avatar](https://lumeo.nativ.sh/components/avatar): An image element with a fallback for representing the user.
- [Back To Top](https://lumeo.nativ.sh/components/back-to-top): A floating button that appears when the user scrolls down and smoothly scrolls back to the top.
- [Badge](https://lumeo.nativ.sh/components/badge): Displays a small status indicator or label.
- [Barcode](https://lumeo.nativ.sh/components/barcode): Renders a 1D Code 128B barcode as inline SVG. Suitable for product labels, order numbers, and any ASCII printable data.
- [Bento](https://lumeo.nativ.sh/components/bento): CSS-grid dashboard layout with shorthand tiles for composing analytics and overview pages.
- [Blur Fade](https://lumeo.nativ.sh/components/blur-fade): Progressively unveils content with a blur-out + fade-in animation when it enters the viewport. Stagger sections by passing a delay.
- [Border Beam](https://lumeo.nativ.sh/components/border-beam): A short bright gradient beam that orbits around the border — always-on, high-visibility. See ShineBorder for a subtler sweep, or HoverBorderGradient for a cursor-driven angle effect.
- [Bottom Nav](https://lumeo.nativ.sh/components/bottom-nav): Mobile-first bottom tab bar with icons, labels, badges, safe-area padding, and an optional floating action button. Pair with Sidebar for responsive app layouts.
- [Breadcrumb](https://lumeo.nativ.sh/components/breadcrumb): Displays the path to the current resource using a hierarchy of links.
- [Button](https://lumeo.nativ.sh/components/button): Versatile button with variants, sizes, icons, and loading states.
- [Button Group](https://lumeo.nativ.sh/components/button-group): Joins multiple Buttons into a segmented bar with shared/collapsed borders and rounded first/last edges.
- [Calendar](https://lumeo.nativ.sh/components/calendar): A date picker calendar component for selecting dates.
- [Card](https://lumeo.nativ.sh/components/card): Displays a card with header, content, and footer.
- [Carousel](https://lumeo.nativ.sh/components/carousel): A carousel with motion and swipe built using scroll snapping.
- [Cascader](https://lumeo.nativ.sh/components/cascader): A multi-level dropdown for selecting hierarchical data like categories or locations.
- [Center](https://lumeo.nativ.sh/components/center): A utility component that centers its children both horizontally and vertically.
- [Chart](https://lumeo.nativ.sh/components/chart): Beautiful charts built on Apache ECharts. Lumeo includes 30 chart components for every visualization need, from basic bar charts to advanced geographic maps and word clouds.
- [Charts/area](https://lumeo.nativ.sh/components/charts/area): Emphasize the magnitude of change over time. The filled area makes it easy to visualize volume or cumulative data.
- [Charts/bar](https://lumeo.nativ.sh/components/charts/bar): Compare discrete categories side-by-side. Ideal for monthly comparisons, ranking, or showing multiple series over the same categories.
- [Charts/boxplot](https://lumeo.nativ.sh/components/charts/boxplot): Show statistical distribution of data through quartiles. Displays the minimum, first quartile, median, third quartile, and maximum values.
- [Charts/calendar Heatmap](https://lumeo.nativ.sh/components/charts/calendar-heatmap): Display data density across a calendar year, similar to GitHub contribution graphs. Each cell represents a day, with color intensity showing the value.
- [Charts/candlestick](https://lumeo.nativ.sh/components/charts/candlestick): Display financial OHLC (Open, High, Low, Close) data. Essential for stock market analysis and price movement visualization.
- [Charts/donut](https://lumeo.nativ.sh/components/charts/donut): A variant of the pie chart with a center cutout, which can display a summary value or label in the middle.
- [Charts/effect Scatter](https://lumeo.nativ.sh/components/charts/effect-scatter): A scatter chart with animated ripple effects on data points. Use it to draw attention to key data points, such as high-traffic locations or anomalies.
- [Charts/funnel](https://lumeo.nativ.sh/components/charts/funnel): Visualize sequential stages in a process and the drop-off between each stage. Perfect for conversion funnels, sales pipelines, and user journeys.
- [Charts/gauge](https://lumeo.nativ.sh/components/charts/gauge): Display a speedometer-style gauge with a pointer. Supports custom ranges with color zones for thresholds like warning and danger levels.
- [Charts/geo Map](https://lumeo.nativ.sh/components/charts/geo-map): Display data on a geographic map with color-coded regions. Supports pan, zoom, tooltips, and custom color scales.
- [Charts/graph](https://lumeo.nativ.sh/components/charts/graph): Visualize networks and relationships between entities. Nodes represent entities and links show connections. Supports force-directed and circular layouts.
- [Charts/heatmap](https://lumeo.nativ.sh/components/charts/heatmap): Display density or intensity across two dimensions using color gradients. Useful for activity patterns, correlation matrices, and time-based analysis.
- [Charts/line](https://lumeo.nativ.sh/components/charts/line): Show trends over time. Use when continuity between data points matters, such as revenue tracking or performance monitoring.
- [Charts/liquid Fill](https://lumeo.nativ.sh/components/charts/liquid-fill): Display a percentage value as an animated liquid fill inside a shape. Great for showing completion rates, capacity levels, or KPI progress with a visual wave animation.
- [Charts/mixed](https://lumeo.nativ.sh/components/charts/mixed): Combine multiple chart types (bar, line) in a single view. Useful for overlaying a trend line on top of bar data, such as actual vs. target comparisons.
- [Charts/nightingale](https://lumeo.nativ.sh/components/charts/nightingale): A rose-type pie chart where each slice's radius varies by value. Useful when you want to emphasize differences between categories more than a standard pie chart.
- [Charts/parallel](https://lumeo.nativ.sh/components/charts/parallel): Compare multi-dimensional data by plotting each data point as a polyline across parallel axes. Useful for exploring correlations across many variables simultaneously.
- [Charts/pictorial Bar](https://lumeo.nativ.sh/components/charts/pictorial-bar): A bar chart that uses symbols instead of rectangular bars. Each symbol represents a data point, making the visualization more expressive and engaging.
- [Charts/pie](https://lumeo.nativ.sh/components/charts/pie): Show proportional distribution across categories. Best used with 5 or fewer slices to keep it readable.
- [Charts/polar Bar](https://lumeo.nativ.sh/components/charts/polar-bar): Display bar data in a polar coordinate system, where each bar extends radially. Great for cyclical data like days of the week or hours of the day.
- [Charts/radar](https://lumeo.nativ.sh/components/charts/radar): Compare multiple variables on a common scale. Useful for performance profiles, skill assessments, or comparing entities across dimensions.
- [Charts/radial](https://lumeo.nativ.sh/components/charts/radial): Display a single metric against a scale as a gauge arc. Perfect for KPIs, system health indicators, or progress toward a goal.
- [Charts/sankey](https://lumeo.nativ.sh/components/charts/sankey): Visualize flow and relationships between nodes. The width of each link is proportional to the flow quantity, making it ideal for energy flows, budget allocations, and process mapping.
- [Charts/scatter](https://lumeo.nativ.sh/components/charts/scatter): Reveal correlations and distributions between two continuous variables. Ideal for data exploration and identifying clusters or outliers.
- [Charts/sunburst](https://lumeo.nativ.sh/components/charts/sunburst): Visualize hierarchical data in concentric rings. Each ring represents a level in the hierarchy, radiating outward from the center.
- [Charts/theme River](https://lumeo.nativ.sh/components/charts/theme-river): Visualize thematic changes over time as a flowing river. Each stream represents a category, and its width changes with the data value at each time point.
- [Charts/tree](https://lumeo.nativ.sh/components/charts/tree): Display hierarchical relationships as a tree structure. Supports horizontal (LR) and vertical (TB) orientations for org charts, file trees, and decision trees.
- [Charts/treemap](https://lumeo.nativ.sh/components/charts/treemap): Visualize hierarchical data as nested rectangles. The area of each rectangle is proportional to its value, making it easy to spot the largest categories.
- [Charts/waterfall](https://lumeo.nativ.sh/components/charts/waterfall): Show how an initial value is affected by successive positive and negative changes. Commonly used for financial statements, budget analysis, and variance breakdowns.
- [Charts/word Cloud](https://lumeo.nativ.sh/components/charts/word-cloud): Display text data where each word's size corresponds to its weight or frequency. Requires the echarts-wordcloud extension which is loaded automatically.
- [Checkbox](https://lumeo.nativ.sh/components/checkbox): A control that allows the user to toggle between checked and not checked.
- [Chip](https://lumeo.nativ.sh/components/chip): A compact element representing an input, attribute, or action — used for tags, filters, status labels, and selected items in multi-select fields.
- [Code](https://lumeo.nativ.sh/components/code): Inline or block monospace code snippet with optional copy button.
- [Code Editor](https://lumeo.nativ.sh/components/code-editor): A lightweight source-code editor built on CodeMirror 6 — much smaller download than Monaco (≈150KB core + on-demand language packs vs. Monaco's 5MB WASM bundle), with the same essentials: syntax highlighting, line numbers, bracket matching, autocomplete, history, and search.
- [Collapsible](https://lumeo.nativ.sh/components/collapsible): An interactive component that expands and collapses content.
- [Color Picker](https://lumeo.nativ.sh/components/color-picker): A color selection dropdown with swatch grid, hue/lightness sliders, hex input, and optional presets.
- [Combobox](https://lumeo.nativ.sh/components/combobox): An autocomplete input with a filterable dropdown list.
- [Command](https://lumeo.nativ.sh/components/command): A command palette for searching and executing actions.
- [Confetti](https://lumeo.nativ.sh/components/confetti): Burst of colored particles emitted on demand via an imperative Fire() method. Perfect for celebrations and success states.
- [Confirm Button](https://lumeo.nativ.sh/components/confirm-button): A Button that opens an AlertDialog for confirmation before firing OnConfirm — replaces the boilerplate of wiring a Button and AlertDialog by hand.
- [Consent Banner](https://lumeo.nativ.sh/components/consent-banner): GDPR-ready cookie / tracking consent primitive. Persists per-category choices in localStorage and exposes them via ConsentService for gating third-party scripts.
- [Container](https://lumeo.nativ.sh/components/container): A responsive container that constrains content width and centers it on the page.
- [Context Menu](https://lumeo.nativ.sh/components/context-menu): Displays a menu triggered by right-clicking an element.
- [Cta Section](https://lumeo.nativ.sh/components/cta-section): A tinted, centered call-to-action band with a title, optional subtitle, and an Actions slot for primary and secondary buttons. Part of the Splash Kit.
- [Dashboard Tiles](https://lumeo.nativ.sh/components/dashboard-tiles): KpiCard, SparkCard, and Delta — compact building blocks for analytics dashboards.
- [Data Grid](https://lumeo.nativ.sh/components/data-grid): A powerful data grid with sorting, filtering, pagination, selection, inline editing, column pinning, resizable columns, row editing, layout persistence, context menus, and CSV/Excel/JSON export.
- [Data Table](https://lumeo.nativ.sh/components/data-table): A powerful table component with templated headers, rows, loading states, and empty states.
- [Datagrid/playground](https://lumeo.nativ.sh/components/datagrid/playground): Blazor component
- [Date Picker](https://lumeo.nativ.sh/components/date-picker): A popover-based date picker built on top of Calendar.
- [Date Range Picker](https://lumeo.nativ.sh/components/date-range-picker): Select a continuous range of dates — built on top of DatePicker in range mode, with two-calendar display and optional preset shortcuts.
- [Date Time Picker](https://lumeo.nativ.sh/components/date-time-picker): A combined date and time picker with calendar and time columns.
- [Delta](https://lumeo.nativ.sh/components/delta): Trend indicator showing delta value with up/down arrow and color.
- [Density Scope](https://lumeo.nativ.sh/components/density-scope): A cascading wrapper that sets the Lumeo.Density token for every density-aware descendant. It renders no DOM element of its own — just the cascading value around its content.
- [Descriptions](https://lumeo.nativ.sh/components/descriptions): A key-value pair list for displaying structured metadata.
- [Dialog](https://lumeo.nativ.sh/components/dialog): A modal dialog that overlays the main content and requires user interaction.
- [Direction Provider](https://lumeo.nativ.sh/components/direction-provider): Sets the layout direction (LTR / RTL) for everything inside it.
- [Dock](https://lumeo.nativ.sh/components/dock): macOS-style icon dock with mouse-proximity magnification. Items scale up as the cursor approaches them.
- [Drawer](https://lumeo.nativ.sh/components/drawer): A panel that slides up from the bottom of the screen on mobile devices.
- [Dropdown Button](https://lumeo.nativ.sh/components/dropdown-button): A button whose click opens a dropdown menu of secondary actions, indicated by a chevron.
- [Dropdown Menu](https://lumeo.nativ.sh/components/dropdown-menu): Displays a menu of actions or options triggered by a button.
- [Dynamic Icon](https://lumeo.nativ.sh/components/dynamic-icon): A docs utility component that renders icons by name and automatically adapts to the active icon library selected in the Customizer.
- [Empty State](https://lumeo.nativ.sh/components/empty-state): A placeholder component for when there is no data to display.
- [Feature Grid](https://lumeo.nativ.sh/components/feature-grid): A responsive 1/2/3/4-column grid for landing-page feature callouts. Pair FeatureGrid with FeatureItem children, or pass raw content for full control. Part of the Splash Kit.
- [Feature Item](https://lumeo.nativ.sh/components/feature-item): A single feature callout — an optional leading icon badge, a title, and a short description. The building block of FeatureGrid, and usable standalone in any card or column. Part of the Splash Kit.
- [Field](https://lumeo.nativ.sh/components/field): Label, control, description and error as one spaced unit. shadcn's form-layout primitive, the one every login and signup block is built from.
- [File Manager](https://lumeo.nativ.sh/components/file-manager): A headless file and folder explorer with a folder tree, breadcrumb navigation, list and grid views, lazy loading, inline rename, and context-menu operations. The consumer provides the data and handles all filesystem operations.
- [File Upload](https://lumeo.nativ.sh/components/file-upload): A drag-and-drop file upload area with per-file progress tracking, validation, cancel, and retry.
- [File Viewer](https://lumeo.nativ.sh/components/file-viewer): Universal preview surface — detects the file type from MIME / extension and renders inline: PDF, images, video, audio, Markdown, source code, JSON, CSV, and plain text. Unknown types fall back to a download CTA. One component replaces a stack of bespoke per-type renderers.
- [Filter](https://lumeo.nativ.sh/components/filter): Composable filter pills and bar for building advanced data filtering interfaces.
- [Filters](https://lumeo.nativ.sh/components/filters): A filter builder: add a filter, pick the attribute, the condition and the value inside the chip, with an editor per value kind. ReUI's Filters, ported: the same operator catalogue, the same query tree, the same chip anatomy.
- [Flex](https://lumeo.nativ.sh/components/flex): A low-level flexbox container with full control over direction, alignment, and wrapping.
- [Form](https://lumeo.nativ.sh/components/form): Structured form layout with labels, descriptions, and validation messages.
- [Form Field](https://lumeo.nativ.sh/components/form-field): A composite form field that wraps an input with a label, help text, and error messaging.
- [Gantt](https://lumeo.nativ.sh/components/gantt): A project timeline with draggable task bars, dependencies, milestones, hierarchy, and a real commit gate. Renders with a Razor-first engine — no third-party charting library.
- [Gantt Legacy](https://lumeo.nativ.sh/components/gantt-legacy): The original SVG-based Gantt engine. Kept for backward compatibility — new projects should use GanttChart.
- [Gauge](https://lumeo.nativ.sh/components/gauge): Displays a single metric value within a defined range using radial, arc, or linear visual styles.
- [Grid](https://lumeo.nativ.sh/components/grid): A CSS grid layout component for creating multi-column layouts with consistent spacing.
- [Heading](https://lumeo.nativ.sh/components/heading): A semantic heading component that renders h1-h6 elements with sensible default sizes and weights.
- [Hero](https://lumeo.nativ.sh/components/hero): A landing-page hero band with a centered, max-width content rail: optional eyebrow, title, subtitle, actions, and a side media slot. Part of the Splash Kit.
- [Highlighter](https://lumeo.nativ.sh/components/highlighter): Wraps occurrences of one or more search terms within text with a highlight mark.
- [Hover Card](https://lumeo.nativ.sh/components/hover-card): A card that appears when hovering over an element, showing additional information.
- [Icon](https://lumeo.nativ.sh/components/icon): Icon wrapper — renders the built-in LumeoIcons set (Lucide-derived) or any IconSource natively.
- [Image](https://lumeo.nativ.sh/components/image): An enhanced image component with lazy loading, fallback, preview lightbox, and gallery support.
- [Image Compare](https://lumeo.nativ.sh/components/image-compare): An interactive before/after image slider — drag the divider to reveal the difference between two images. Great for photo editing demos and product comparisons.
- [Inplace Editor](https://lumeo.nativ.sh/components/inplace-editor): Edit text directly inline — click to switch between display and edit mode without navigating to a separate form.
- [Input](https://lumeo.nativ.sh/components/input): Displays a form input field.
- [Input Mask](https://lumeo.nativ.sh/components/input-mask): A masked input that enforces a specific format pattern — ideal for phone numbers, dates, credit cards, and other structured data entry.
- [Kanban](https://lumeo.nativ.sh/components/kanban): A drag-and-drop kanban board for visualizing workflow stages. Organize cards into columns representing different states like To Do, In Progress, and Done.
- [Kbd](https://lumeo.nativ.sh/components/kbd): Display keyboard shortcuts and register global hotkeys.
- [Kpi Card](https://lumeo.nativ.sh/components/kpi-card): Dashboard KPI tile showing value, label, and trend.
- [Label](https://lumeo.nativ.sh/components/label): A text label for form controls.
- [Link](https://lumeo.nativ.sh/components/link): A styled anchor component with variant support and external link handling.
- [List](https://lumeo.nativ.sh/components/list): A vertical list of items with support for icons, meta text, leading/trailing content, and hover states — the building block for menus, contacts, settings, and feeds.
- [Map](https://lumeo.nativ.sh/components/map): Interactive geographic map with declarative markers. Powered by MapLibre GL — open-source, no API key required. Ships with named tile presets including Auto, which follows the site theme automatically, and accepts raw style.json URLs.
- [Map Heatmap](https://lumeo.nativ.sh/components/map-heatmap): Density visualisation layer for the Map component. Renders a smooth colour-gradient heatmap from a collection of weighted lat/lon points using MapLibre GL's native heatmap layer.
- [Map Legend](https://lumeo.nativ.sh/components/map-legend): A small overlay panel that explains the symbols and colours used on a map. Place MapLegend inside the Map Overlay slot; nest MapLegendItem children to define rows.
- [Map Popup](https://lumeo.nativ.sh/components/map-popup): A standalone popup anchored to a geographic coordinate, independent of any marker. Toggle visibility programmatically via IsOpen and bind to IsOpenChanged to react when the user closes it.
- [Marquee](https://lumeo.nativ.sh/components/marquee): Infinitely scrolling horizontal band of children.
- [Mega Menu](https://lumeo.nativ.sh/components/mega-menu): A navigation bar with expandable mega panel dropdowns — supports multi-column layouts, grouped links, and horizontal or vertical orientations.
- [Mention](https://lumeo.nativ.sh/components/mention): A textarea with mention support that shows a dropdown when a trigger character is typed.
- [Menubar](https://lumeo.nativ.sh/components/menubar): A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
- [Motion](https://lumeo.nativ.sh/components/motion): A set of motion primitives — Marquee, NumberTicker, TextReveal, BlurFade, BorderBeam, ShimmerButton, Sparkles — for building high-energy, Aceternity / Magic UI style interfaces.
- [Navigation Menu](https://lumeo.nativ.sh/components/navigation-menu): A collection of links for navigating websites, with support for flyout content panels.
- [Number Input](https://lumeo.nativ.sh/components/number-input): A numeric input with increment/decrement buttons.
- [Number Ticker](https://lumeo.nativ.sh/components/number-ticker): Animated count-up from zero to target number. Supports prefix, suffix, decimals, and thousands separator — the canonical numeric animation component in Lumeo.
- [Otp Input](https://lumeo.nativ.sh/components/otp-input): A one-time password input with auto-focus and auto-advance between fields.
- [Overlay](https://lumeo.nativ.sh/components/overlay): Low-level backdrop primitive for custom popovers and modals.
- [Overlay Form](https://lumeo.nativ.sh/components/overlay-form): An opinionated EditForm wrapper for service-driven overlays. It bakes in the flex-column, scrolling-body, sticky-footer shape that an EditForm inside a Sheet or Dialog otherwise loses.
- [Overlay Service](https://lumeo.nativ.sh/components/overlay-service): A programmatic service for opening dialogs, sheets, drawers, and alert dialogs imperatively from code.
- [Pagination](https://lumeo.nativ.sh/components/pagination): Navigation controls for paging through content.
- [Password Input](https://lumeo.nativ.sh/components/password-input): A password field with built-in visibility toggle and optional strength meter — provides clear feedback as users create secure passwords.
- [Pdf Viewer](https://lumeo.nativ.sh/components/pdf-viewer): Inline PDF document viewer powered by Mozilla pdf.js. Renders multi-page documents on a canvas with page navigation, zoom controls, optional text search, and a one-click download shortcut. No npm build step or API key required.
- [Pick List](https://lumeo.nativ.sh/components/pick-list): Dual-list picker for moving items between an available pool and a selected set. Supports strongly-typed items, custom row templates, and search.
- [Pivot Grid](https://lumeo.nativ.sh/components/pivot-grid): A cross-tab grid that pivots flat data into a row hierarchy × columns × aggregated measures — like an Excel PivotTable.
- [Pop Confirm](https://lumeo.nativ.sh/components/pop-confirm): A lightweight confirmation popover that appears inline — prompts users before executing irreversible actions without interrupting the full page flow.
- [Popover](https://lumeo.nativ.sh/components/popover): Displays rich content in a portal, triggered by a button.
- [Progress](https://lumeo.nativ.sh/components/progress): Displays a progress bar indicating completion status.
- [Prompt Input](https://lumeo.nativ.sh/components/prompt-input): Multiline AI prompt textarea with submit and keyboard shortcuts.
- [Pull To Refresh](https://lumeo.nativ.sh/components/pull-to-refresh): An iOS/Android-style pull-down-to-refresh wrapper that fires a callback when the user drags past a configurable threshold.
- [Qr Code](https://lumeo.nativ.sh/components/qr-code): Generate QR codes from any string value — URLs, contact info, authentication tokens, Wi-Fi credentials, and more. Rendered entirely in SVG with no external dependencies.
- [Query Builder](https://lumeo.nativ.sh/components/query-builder): A visual AND/OR predicate-tree builder — compose nested conditions over a set of fields and serialize them to JSON or a LINQ predicate.
- [Radio Group](https://lumeo.nativ.sh/components/radio-group): A set of mutually exclusive radio buttons for single-option selection.
- [Rating](https://lumeo.nativ.sh/components/rating): A star rating input for collecting feedback.
- [Reasoning Display](https://lumeo.nativ.sh/components/reasoning-display): Collapsible chain-of-thought block for AI reasoning traces.
- [Resizable](https://lumeo.nativ.sh/components/resizable): Accessible resizable panel groups and layouts with drag-to-resize handles.
- [Result](https://lumeo.nativ.sh/components/result): Displays the outcome of an operation with status icon, title, description, and action buttons.
- [Rich Text Editor](https://lumeo.nativ.sh/components/rich-text-editor): A fully-featured WYSIWYG editor built on TipTap/ProseMirror. Supports mentions, slash commands, tables, code blocks, task lists, AI actions, image upload, and Word import — all wired through Blazor parameters.
- [Ring Progress](https://lumeo.nativ.sh/components/ring-progress): A circular progress ring for displaying determinate completion percentage.
- [Safe Area](https://lumeo.nativ.sh/components/safe-area): Applies CSS env() safe-area insets so content stays clear of device notches, home indicators, and rounded display corners.
- [Scheduler](https://lumeo.nativ.sh/components/scheduler): A calendar & event scheduler with month, week, day, and agenda views. Drag events to reschedule, resize to change duration, or drag across the grid to create new ones.
- [Scroll Area](https://lumeo.nativ.sh/components/scroll-area): A scrollable container with styled scrollbar.
- [Scrollspy](https://lumeo.nativ.sh/components/scrollspy): Monitors scroll position within a container and highlights the corresponding navigation link.
- [Segmented](https://lumeo.nativ.sh/components/segmented): An iOS-style segmented control for switching between options.
- [Select](https://lumeo.nativ.sh/components/select): Displays a dropdown list of options for the user to pick from.
- [Separator](https://lumeo.nativ.sh/components/separator): Visually or semantically separates content.
- [Sheet](https://lumeo.nativ.sh/components/sheet): A panel that slides in from the edge of the screen, typically used for navigation or forms.
- [Shimmer Button](https://lumeo.nativ.sh/components/shimmer-button): Button with animated shimmer border beam.
- [Sidebar](https://lumeo.nativ.sh/components/sidebar): A collapsible sidebar layout with groups, menus, header, and footer. Supports Push, Overlay, and Icon variants.
- [Signature Pad](https://lumeo.nativ.sh/components/signature-pad): A canvas-backed component for capturing handwritten signatures via mouse, touch, or stylus.
- [Skeleton](https://lumeo.nativ.sh/components/skeleton): Displays a placeholder loading animation while content is being fetched.
- [Slider](https://lumeo.nativ.sh/components/slider): An input where the user selects a value from within a given range.
- [Sortable](https://lumeo.nativ.sh/components/sortable): Drag-to-reorder list with keyboard support and animation. Persistable via two-way bound Items.
- [Sortable List](https://lumeo.nativ.sh/components/sortable-list): A drag-and-drop sortable list — reorder items by dragging. Works with any item type via a generic template.
- [Spacer](https://lumeo.nativ.sh/components/spacer): A flexible spacer that expands to fill available space or renders at a fixed size.
- [Spark Card](https://lumeo.nativ.sh/components/spark-card): Small dashboard card with an inline sparkline chart.
- [Sparkles](https://lumeo.nativ.sh/components/sparkles): Decorative sparkle particle animation.
- [Sparkline](https://lumeo.nativ.sh/components/sparkline): Compact inline SVG trend chart — drop anywhere: table cells, KPI strips, notification badges.
- [Speed Dial](https://lumeo.nativ.sh/components/speed-dial): A floating action button that expands into a set of related actions — ideal for mobile-first UIs and dashboard quick-access menus.
- [Spinner](https://lumeo.nativ.sh/components/spinner): A loading spinner indicator with multiple sizes.
- [Split Button](https://lumeo.nativ.sh/components/split-button): A button split into a main action half and a chevron half that opens a dropdown menu of secondary actions.
- [Splitter](https://lumeo.nativ.sh/components/splitter): Multi-pane resizable layout for dashboards, editors, and IDE-style UIs. Supports horizontal, vertical, and nested arrangements.
- [Stack](https://lumeo.nativ.sh/components/stack): A flex-based layout component for stacking elements vertically or horizontally with consistent spacing.
- [Statistic](https://lumeo.nativ.sh/components/statistic): Displays a metric value with optional title, prefix, suffix, and trend indicator.
- [Stepper](https://lumeo.nativ.sh/components/stepper): A stateful multi-step wizard with navigation, per-step validation gating, and accessible step indicators.
- [Steps](https://lumeo.nativ.sh/components/steps): A step tracker for multi-step workflows and wizards.
- [Streaming Text](https://lumeo.nativ.sh/components/streaming-text): Token-by-token streaming text renderer for AI responses.
- [Swipe Actions](https://lumeo.nativ.sh/components/swipe-actions): An iOS Mail-style swipe row that reveals contextual action buttons on the leading or trailing edge when the user swipes horizontally.
- [Switch](https://lumeo.nativ.sh/components/switch): A control that allows the user to toggle between two states.
- [Table](https://lumeo.nativ.sh/components/table): A responsive table component for displaying tabular data.
- [Tabs](https://lumeo.nativ.sh/components/tabs): A set of layered sections of content, known as tab panels, that are displayed one at a time.
- [Tag Input](https://lumeo.nativ.sh/components/tag-input): An input field for creating and managing tags with optional suggestions and limits.
- [Text](https://lumeo.nativ.sh/components/text): A polymorphic text component with control over size, weight, color, and semantic HTML element.
- [Text Reveal](https://lumeo.nativ.sh/components/text-reveal): Word-by-word reveal animation on scroll.
- [Textarea](https://lumeo.nativ.sh/components/textarea): Displays a form textarea for multi-line text input.
- [Theme Switcher](https://lumeo.nativ.sh/components/theme-switcher): A complete theme control with color scheme swatches and light/dark/system mode toggle.
- [Theme Toggle](https://lumeo.nativ.sh/components/theme-toggle): A simple button to toggle between light and dark mode.
- [Time Picker](https://lumeo.nativ.sh/components/time-picker): A time selection input with hour, minute, and optional second columns.
- [Timeline](https://lumeo.nativ.sh/components/timeline): Displays a list of events in chronological order.
- [Toast](https://lumeo.nativ.sh/components/toast): Displays a temporary notification popup message.
- [Toggle](https://lumeo.nativ.sh/components/toggle): A two-state button that can be either on or off.
- [Toggle Group](https://lumeo.nativ.sh/components/toggle-group): A set of two-state buttons that can be toggled on or off.
- [Tool Call Card](https://lumeo.nativ.sh/components/tool-call-card): AI tool-invocation card showing call and result.
- [Toolbar](https://lumeo.nativ.sh/components/toolbar): A horizontal container for toolbar items — buttons, separators, spacers, and groups — with full accessibility.
- [Tooltip](https://lumeo.nativ.sh/components/tooltip): A popup that displays information related to an element when the element receives hover focus.
- [Touch Ripple](https://lumeo.nativ.sh/components/touch-ripple): A Material Design-style radial ripple that emanates from the exact pointer-down position to give tactile feedback on any tappable element.
- [Tour](https://lumeo.nativ.sh/components/tour): A guided product tour that highlights elements with a spotlight overlay and step-by-step tooltip popups — great for onboarding and feature introductions.
- [Transfer](https://lumeo.nativ.sh/components/transfer): A dual-panel list for moving items between source and target collections.
- [Tree Select](https://lumeo.nativ.sh/components/tree-select): A dropdown selector with a hierarchical tree structure — ideal for selecting categories, org chart nodes, or nested data.
- [Tree View](https://lumeo.nativ.sh/components/tree-view): A hierarchical tree structure with expand/collapse, checkboxes, and search.
- [Upload Trigger](https://lumeo.nativ.sh/components/upload-trigger): A Button-styled InputFile trigger for file-pick-only flows — the look and feel of a Lumeo Button that opens the native file picker, without FileUpload's progress and file-list UI.
- [Watermark](https://lumeo.nativ.sh/components/watermark): Adds a repeating text watermark overlay to content.
- [Window](https://lumeo.nativ.sh/components/window): A non-modal draggable and resizable floating panel — like a desktop application window.

## Blocks (copy-paste UI)

- [Analytics](https://lumeo.nativ.sh/blocks/analytics): A KPI analytics dashboard with metric overview cards, traffic source breakdown, page views trend, top pages table, device split bars, and geographic distribution.
- [Authentication](https://lumeo.nativ.sh/blocks/authentication): shadcn's Authentication example, ported one to one: a split page with a tinted brand panel and a testimonial on the left, and a create-account form on the right: an email field and a submit button inside a FieldGroup, an 'Or continue with' FieldSeparator, a GitHub button, and the terms line as a FieldDescription. Submitting shows the three-second loading state.
- [Calendar](https://lumeo.nativ.sh/blocks/calendar): A full-featured calendar view with event chips, category filters, a mini-calendar sidebar, upcoming list, and an inline event composer.
- [Chat](https://lumeo.nativ.sh/blocks/chat): A full messaging interface with contact list, conversation view, time-grouped messages, and message input bar.
- [Dashboard](https://lumeo.nativ.sh/blocks/dashboard): shadcn's dashboard-01, ported one to one: the app sidebar with quick-create, documents and a user menu, a site header, four stat cards with trend badges, the interactive visitors chart with a time-range toggle, and the sections table with tabs, column visibility, selection, drag-to-reorder, pagination and a detail drawer.
- [Ecommerce](https://lumeo.nativ.sh/blocks/ecommerce): An e-commerce admin dashboard with KPI cards, revenue chart, recent orders, top products, inventory alerts, and customer segment breakdown.
- [File Manager](https://lumeo.nativ.sh/blocks/file-manager): A Dropbox-inspired file manager with workspace navigation, pinned folders, recent files grid, full file table, and contextual hover actions.
- [Filters](https://lumeo.nativ.sh/blocks/filters): A full faceted-search product browser with a sticky filter sidebar, live category/brand/rating/price/date/stock filters, active chips, and a responsive product grid with favorites.
- [Form Wizard](https://lumeo.nativ.sh/blocks/form-wizard): A polished four-step onboarding wizard with progress steps, real field inputs, preferences, and a review summary before submission.
- [Hero](https://lumeo.nativ.sh/blocks/hero): Marketing hero with a large headline, subtext, two CTAs, and a social-proof logo row — animated with BlurFade.
- [Kanban](https://lumeo.nativ.sh/blocks/kanban): A sprint board with polished task cards and native HTML5 drag-and-drop between columns.
- [Mail](https://lumeo.nativ.sh/blocks/mail): shadcn's Mail example, ported one to one: three resizable panes with an account switcher and a folder nav that collapses into an icon rail with tooltips, an inbox list with All and Unread tabs and a search field, and a reading pane with archive, junk, trash, snooze (with a calendar), reply and forward actions and a reply composer. shadcn's 17 sample mails.
- [Music](https://lumeo.nativ.sh/blocks/music): shadcn's Music example, ported one to one: a five-menu Menubar with sub-menus, checkbox and radio items, a library sidebar with a scrolling playlist list, Music and Podcasts tabs, album rows whose covers open a ContextMenu with an Add-to-Playlist sub-menu, and an empty-state placeholder that opens an Add Podcast dialog.
- [Notifications](https://lumeo.nativ.sh/blocks/notifications): A full notification center with tabbed inbox (All / Mentions / Activity / Followers / Security), time-grouped items with unread indicators, preference toggles, and live toast demos.
- [Otp Verify](https://lumeo.nativ.sh/blocks/otp-verify): Email / SMS verification block with a 6-digit OTP input, resend countdown, and helper links.
- [Playground](https://lumeo.nativ.sh/blocks/playground): shadcn's Playground example, ported one to one: the OpenAI-playground layout with a preset combobox, save and share, a view-code dialog and a preset actions menu with its content-filter dialog and delete confirmation; three editing modes as tabs; and a settings column with a model combobox that previews the highlighted model, plus temperature, maximum length and top-p sliders, each explained by a HoverCard.
- [Pricing](https://lumeo.nativ.sh/blocks/pricing): Three-tier pricing section with a monthly / annual toggle, highlighted popular tier, and feature bullets.
- [Reset Password](https://lumeo.nativ.sh/blocks/reset-password): Two-step password reset flow: request a reset email, then show a confirmation screen with a resend link.
- [Settings](https://lumeo.nativ.sh/blocks/settings): A full settings layout with sidebar navigation, profile, account security, billing, notifications, team management, and danger zone.
- [Settings Page](https://lumeo.nativ.sh/blocks/settings-page): Tabbed settings layout with Profile, Account, Appearance, Notifications, and Billing panels — each a card with form fields and a save bar.
- [Sidebar](https://lumeo.nativ.sh/blocks/sidebar): shadcn's sidebar-07, ported one to one: a collapsible icon rail with a team switcher, nested navigation, per-project actions, a user menu, and the inset page beside it. Click the rail on the sidebar's edge or the trigger in the header to collapse it.
- [Sign In](https://lumeo.nativ.sh/blocks/sign-in): shadcn's five login blocks, ported one to one: a card, a split page with an image, a card with providers, a split card, and a bare form. Built from Card, Field and Button.
- [Sign Up](https://lumeo.nativ.sh/blocks/sign-up): shadcn's five signup blocks, ported one to one. The same shapes as the login blocks with name, password and confirmation fields.
- [Social Feed](https://lumeo.nativ.sh/blocks/social-feed): A three-column social media layout with navigation rail, timeline feed with posts and interactions, and a right sidebar with trending topics and follow suggestions.
- [Tasks](https://lumeo.nativ.sh/blocks/tasks): shadcn's Tasks example, ported one to one: a task and issue tracker with a text filter, faceted status and priority filters with counts, sortable and hideable columns, row selection, per-row actions with a label sub-menu, and pagination with a page-size select. Table, Popover, Command and DropdownMenu, on shadcn's 100 sample tasks.