# Components Source: https://lumeo.nativ.sh/components # Components Browse all 163 components across 13 categories. All NavigationAIFeedbackOverlayMotionLayoutUtilityData DisplayDashboardFormsTypographyMarketingDrag & Drop Filter ## Navigation (19) [ ![Accordion preview](/preview-cards/accordion.webp) ### Accordion Vertically stacked collapsible sections that expand to reveal content. ](components/accordion)[ ![Affix preview](/preview-cards/affix.webp) ### Affix Pins an element to the viewport edge as the user scrolls. ](components/affix)[ ![AppBar preview](/preview-cards/app-bar.webp) ### AppBar Top application bar with start, center, and end slots; sticky and elevated variants. ](components/app-bar)[ ![BackToTop preview](/preview-cards/back-to-top.webp) ### BackToTop Floating button that scrolls the page back to the top. ](components/back-to-top)[ ![BottomNav preview](/preview-cards/bottom-nav.webp) ### BottomNav Mobile-first bottom navigation bar with icon items. ](components/bottom-nav)[ ![Breadcrumb preview](/preview-cards/breadcrumb.webp) ### Breadcrumb Hierarchical page path with separator characters. ](components/breadcrumb)[ ![Carousel preview](/preview-cards/carousel.webp) ### Carousel Slide-based content rotator with autoplay and keyboard nav. ](components/carousel)[ ![Collapsible preview](/preview-cards/collapsible.webp) ### Collapsible Single expandable region with animated height transition. ](components/collapsible)[ ![MegaMenu preview](/preview-cards/mega-menu.webp) ### MegaMenu Full-width dropdown for site-wide navigation with columns. ](components/mega-menu)[ ![Menubar preview](/preview-cards/menubar.webp) ### Menubar Horizontal menubar with File/Edit-style dropdowns. ](components/menubar)[ ![NavigationMenu preview](/preview-cards/navigation-menu.webp) ### NavigationMenu Top-level site nav with animated dropdown panels. ](components/navigation-menu)[ ![Pagination preview](/preview-cards/pagination.webp) ### Pagination Page number bar with prev/next and configurable ranges. ](components/pagination)[ ![Scrollspy preview](/preview-cards/scrollspy.webp) ### Scrollspy Highlights the nav item matching the current scroll section. ](components/scrollspy)[ ![Sidebar preview](/preview-cards/sidebar.webp) ### Sidebar Collapsible app sidebar with groups, menu, and trigger. ](components/sidebar)[ ![SpeedDial preview](/preview-cards/speed-dial.webp) ### SpeedDial Floating action button that fans out sub-actions. ](components/speed-dial)[ ![Splitter preview](/preview-cards/splitter.webp) ### Splitter Resizable split pane for horizontal/vertical layouts. ](components/splitter)[ ![Stepper preview](/preview-cards/stepper.webp) ### Stepper Stateful multi-step wizard with navigation, validation gating, and header indicators. ](components/stepper)[ ![Tabs preview](/preview-cards/tabs.webp) ### Tabs Tabbed content with keyboard nav and animated active indicator. ](components/tabs)[ ![Toolbar preview](/preview-cards/toolbar.webp) ### Toolbar Horizontal toolbar container with separator, spacer, and group sub-components. ](components/toolbar) [ Accordion Vertically stacked collapsible sections that expand to reveal content. ](components/accordion)[ Affix Pins an element to the viewport edge as the user scrolls. ](components/affix)[ AppBar Top application bar with start, center, and end slots; sticky and elevated variants. ](components/app-bar)[ BackToTop Floating button that scrolls the page back to the top. ](components/back-to-top)[ BottomNav Mobile-first bottom navigation bar with icon items. ](components/bottom-nav)[ Breadcrumb Hierarchical page path with separator characters. ](components/breadcrumb)[ Carousel Slide-based content rotator with autoplay and keyboard nav. ](components/carousel)[ Collapsible Single expandable region with animated height transition. ](components/collapsible)[ MegaMenu Full-width dropdown for site-wide navigation with columns. ](components/mega-menu)[ Menubar Horizontal menubar with File/Edit-style dropdowns. ](components/menubar)[ NavigationMenu Top-level site nav with animated dropdown panels. ](components/navigation-menu)[ Pagination Page number bar with prev/next and configurable ranges. ](components/pagination)[ Scrollspy Highlights the nav item matching the current scroll section. ](components/scrollspy)[ Sidebar Collapsible app sidebar with groups, menu, and trigger. ](components/sidebar)[ SpeedDial Floating action button that fans out sub-actions. ](components/speed-dial)[ Splitter Resizable split pane for horizontal/vertical layouts. ](components/splitter)[ Stepper Stateful multi-step wizard with navigation, validation gating, and header indicators. ](components/stepper)[ Tabs Tabbed content with keyboard nav and animated active indicator. ](components/tabs)[ Toolbar Horizontal toolbar container with separator, spacer, and group sub-components. ](components/toolbar) ## AI (5) [ ![AgentMessageList preview](/preview-cards/agent-message-list.webp) ### AgentMessageList Chat message stream for AI agents with role-based styling. ](components/agent-message-list)[ ![PromptInput preview](/preview-cards/prompt-input.webp) ### PromptInput Multiline AI prompt textarea with submit + keyboard shortcuts. ](components/prompt-input)[ ![ReasoningDisplay preview](/preview-cards/reasoning-display.webp) ### ReasoningDisplay Collapsible chain-of-thought block for AI reasoning traces. ](components/reasoning-display)[ ![StreamingText preview](/preview-cards/streaming-text.webp) ### StreamingText Token-by-token streaming text renderer for AI responses. ](components/streaming-text)[ ![ToolCallCard preview](/preview-cards/tool-call-card.webp) ### ToolCallCard AI tool-invocation card showing call + result. ](components/tool-call-card) [ AgentMessageList Chat message stream for AI agents with role-based styling. ](components/agent-message-list)[ PromptInput Multiline AI prompt textarea with submit + keyboard shortcuts. ](components/prompt-input)[ ReasoningDisplay Collapsible chain-of-thought block for AI reasoning traces. ](components/reasoning-display)[ StreamingText Token-by-token streaming text renderer for AI responses. ](components/streaming-text)[ ToolCallCard AI tool-invocation card showing call + result. ](components/tool-call-card) ## Feedback (8) [ ![Alert preview](/preview-cards/alert.webp) ### Alert Inline callout for status, warning, or informational messages. ](components/alert)[ ![EmptyState preview](/preview-cards/empty-state.webp) ### EmptyState Illustrated placeholder for empty lists with call-to-action. ](components/empty-state)[ ![Progress preview](/preview-cards/progress.webp) ### Progress Linear progress bar with determinate + indeterminate modes. ](components/progress)[ ![Result preview](/preview-cards/result.webp) ### Result Full-page success/error/info status screen with actions. ](components/result)[ ![RingProgress preview](/preview-cards/ring-progress.webp) ### RingProgress Circular determinate progress ring with optional centre label or custom content. ](components/ring-progress)[ ![Skeleton preview](/preview-cards/skeleton.webp) ### Skeleton Pulsing placeholder block for loading states. ](components/skeleton)[ ![Spinner preview](/preview-cards/spinner.webp) ### Spinner Indeterminate loading spinner with size variants. ](components/spinner)[ ![Toast preview](/preview-cards/toast.webp) ### Toast Notification toast — renders from ToastService queue. ](components/toast) [ Alert Inline callout for status, warning, or informational messages. ](components/alert)[ EmptyState Illustrated placeholder for empty lists with call-to-action. ](components/empty-state)[ Progress Linear progress bar with determinate + indeterminate modes. ](components/progress)[ Result Full-page success/error/info status screen with actions. ](components/result)[ RingProgress Circular determinate progress ring with optional centre label or custom content. ](components/ring-progress)[ Skeleton Pulsing placeholder block for loading states. ](components/skeleton)[ Spinner Indeterminate loading spinner with size variants. ](components/spinner)[ Toast Notification toast — renders from ToastService queue. ](components/toast) ## Overlay (14) [ ![AlertDialog preview](/preview-cards/alert-dialog.webp) ### AlertDialog Modal confirmation dialog that interrupts the user for destructive actions. ](components/alert-dialog)[ ![Command preview](/preview-cards/command.webp) ### Command Command palette — keyboard-driven finder for actions. ](components/command)[ ![ContextMenu preview](/preview-cards/context-menu.webp) ### ContextMenu Right-click menu tied to a container element. ](components/context-menu)[ ![Dialog preview](/preview-cards/dialog.webp) ### Dialog Modal dialog with header, content, footer, and focus trap. ](components/dialog)[ ![Drawer preview](/preview-cards/drawer.webp) ### Drawer Slide-up sheet for mobile-first contextual content. ](components/drawer)[ ![DropdownMenu preview](/preview-cards/dropdown-menu.webp) ### DropdownMenu Menu button with items, separators, submenus, and checkboxes. ](components/dropdown-menu)[ ![HoverCard preview](/preview-cards/hover-card.webp) ### HoverCard Popover that opens on hover for rich previews. ](components/hover-card)[ ![Overlay preview](/preview-cards/overlay.webp) ### Overlay Low-level backdrop primitive for custom popovers and modals. ](components/overlay)[ ![PopConfirm preview](/preview-cards/pop-confirm.webp) ### PopConfirm Inline 'are you sure?' popover attached to a trigger. ](components/pop-confirm)[ ![Popover preview](/preview-cards/popover.webp) ### Popover Positionable floating panel with anchor and arrow. ](components/popover)[ ![Sheet preview](/preview-cards/sheet.webp) ### Sheet Slide-in side panel from left/right/top/bottom. ](components/sheet)[ ![Tooltip preview](/preview-cards/tooltip.webp) ### Tooltip Hover/focus tooltip with arrow and configurable placement. ](components/tooltip)[ ![Tour preview](/preview-cards/tour.webp) ### Tour Multi-step spotlight onboarding tour. ](components/tour)[ ![Window preview](/preview-cards/window.webp) ### Window Non-modal draggable and resizable floating panel with minimize and maximize support. ](components/window) [ AlertDialog Modal confirmation dialog that interrupts the user for destructive actions. ](components/alert-dialog)[ Command Command palette — keyboard-driven finder for actions. ](components/command)[ ContextMenu Right-click menu tied to a container element. ](components/context-menu)[ Dialog Modal dialog with header, content, footer, and focus trap. ](components/dialog)[ Drawer Slide-up sheet for mobile-first contextual content. ](components/drawer)[ DropdownMenu Menu button with items, separators, submenus, and checkboxes. ](components/dropdown-menu)[ HoverCard Popover that opens on hover for rich previews. ](components/hover-card)[ Overlay Low-level backdrop primitive for custom popovers and modals. ](components/overlay)[ PopConfirm Inline 'are you sure?' popover attached to a trigger. ](components/pop-confirm)[ Popover Positionable floating panel with anchor and arrow. ](components/popover)[ Sheet Slide-in side panel from left/right/top/bottom. ](components/sheet)[ Tooltip Hover/focus tooltip with arrow and configurable placement. ](components/tooltip)[ Tour Multi-step spotlight onboarding tour. ](components/tour)[ Window Non-modal draggable and resizable floating panel with minimize and maximize support. ](components/window) ## Motion (10) [ ![AnimatedBeam preview](/preview-cards/animated-beam.webp) Lumeo.Motion ### AnimatedBeam SVG beam that traces an animated gradient path between two DOM elements. ](components/animated-beam)[ ![BlurFade preview](/preview-cards/blur-fade.webp) Lumeo.Motion ### BlurFade Motion primitive: blur + fade-in on mount or when in view. ](components/blur-fade)[ ![BorderBeam preview](/preview-cards/border-beam.webp) Lumeo.Motion ### BorderBeam Animated gradient border beam effect for hero elements. ](components/border-beam)[ ![Confetti preview](/preview-cards/confetti.webp) Lumeo.Motion ### Confetti Burst of colored particles on demand via imperative Fire() method. ](components/confetti)[ ![Dock preview](/preview-cards/dock.webp) Lumeo.Motion ### Dock macOS-style icon dock with cursor-proximity magnification. ](components/dock)[ ![Marquee preview](/preview-cards/marquee.webp) Lumeo.Motion ### Marquee Infinitely scrolling horizontal band of children. ](components/marquee)[ ![NumberTicker preview](/preview-cards/number-ticker.webp) Lumeo.Motion ### NumberTicker Animated count-up from zero to target number. ](components/number-ticker)[ ![ShimmerButton preview](/preview-cards/shimmer-button.webp) Lumeo.Motion ### ShimmerButton Button with animated shimmer border beam. ](components/shimmer-button)[ ![Sparkles preview](/preview-cards/sparkles.webp) Lumeo.Motion ### Sparkles Decorative sparkle particle animation. ](components/sparkles)[ ![TextReveal preview](/preview-cards/text-reveal.webp) Lumeo.Motion ### TextReveal Word-by-word reveal animation on scroll. ](components/text-reveal) [ AnimatedBeam SVG beam that traces an animated gradient path between two DOM elements. ](components/animated-beam)[ BlurFade Motion primitive: blur + fade-in on mount or when in view. ](components/blur-fade)[ BorderBeam Animated gradient border beam effect for hero elements. ](components/border-beam)[ Confetti Burst of colored particles on demand via imperative Fire() method. ](components/confetti)[ Dock macOS-style icon dock with cursor-proximity magnification. ](components/dock)[ Marquee Infinitely scrolling horizontal band of children. ](components/marquee)[ NumberTicker Animated count-up from zero to target number. ](components/number-ticker)[ ShimmerButton Button with animated shimmer border beam. ](components/shimmer-button)[ Sparkles Decorative sparkle particle animation. ](components/sparkles)[ TextReveal Word-by-word reveal animation on scroll. ](components/text-reveal) ## Layout (10) [ ![AspectRatio preview](/preview-cards/aspect-ratio.webp) ### AspectRatio Constrains child content to a fixed width-to-height ratio. ](components/aspect-ratio)[ ![Center preview](/preview-cards/center.webp) ### Center Flexbox helper that centers its children on both axes. ](components/center)[ ![Container preview](/preview-cards/container.webp) ### Container Responsive max-width wrapper with consistent page padding. ](components/container)[ ![Flex preview](/preview-cards/flex.webp) ### Flex Flexbox wrapper exposing direction, gap, align, justify as props. ](components/flex)[ ![Grid preview](/preview-cards/grid.webp) ### Grid CSS grid wrapper with columns + gap as props. ](components/grid)[ ![Resizable preview](/preview-cards/resizable.webp) ### Resizable Draggable splitter for resizable panel layouts. ](components/resizable)[ ![ScrollArea preview](/preview-cards/scroll-area.webp) ### ScrollArea Styled custom scrollbar container. ](components/scroll-area)[ ![Separator preview](/preview-cards/separator.webp) ### Separator Horizontal or vertical dividing rule. ](components/separator)[ ![Spacer preview](/preview-cards/spacer.webp) ### Spacer Flex-grow spacer that pushes siblings apart. ](components/spacer)[ ![Stack preview](/preview-cards/stack.webp) ### Stack Vertical flex wrapper with gap prop. ](components/stack) [ AspectRatio Constrains child content to a fixed width-to-height ratio. ](components/aspect-ratio)[ Center Flexbox helper that centers its children on both axes. ](components/center)[ Container Responsive max-width wrapper with consistent page padding. ](components/container)[ Flex Flexbox wrapper exposing direction, gap, align, justify as props. ](components/flex)[ Grid CSS grid wrapper with columns + gap as props. ](components/grid)[ Resizable Draggable splitter for resizable panel layouts. ](components/resizable)[ ScrollArea Styled custom scrollbar container. ](components/scroll-area)[ Separator Horizontal or vertical dividing rule. ](components/separator)[ Spacer Flex-grow spacer that pushes siblings apart. ](components/spacer)[ Stack Vertical flex wrapper with gap prop. ](components/stack) ## Utility (16) [ ![AudioPlayer preview](/preview-cards/audio-player.webp) ### AudioPlayer Audio Player component. ](components/audio-player)[ ![ButtonGroup preview](/preview-cards/button-group.webp) ### ButtonGroup Button Group component. ](components/button-group)[ ![ConsentBanner preview](/preview-cards/consent-banner.webp) ### ConsentBanner Consent Banner component. ](components/consent-banner)[ ![DensityScope preview](/preview-cards/density-scope.webp) ### DensityScope Density Scope component. ](components/density-scope)[ ![DropdownButton preview](/preview-cards/dropdown-button.webp) ### DropdownButton Dropdown Button component. ](components/dropdown-button)[ ![Icon preview](/preview-cards/icon.webp) ### Icon Icon wrapper — renders Lucide icons via Blazicons. ](components/icon)[ ![Kbd preview](/preview-cards/kbd.webp) ### Kbd Keyboard shortcut glyph — renders with styling. ](components/kbd)[ ![Label preview](/preview-cards/label.webp) ### Label Form label that links to a control via for/id. ](components/label)[ ![PullToRefresh preview](/preview-cards/pull-to-refresh.webp) ### PullToRefresh Pull To Refresh component. ](components/pull-to-refresh)[ ![SafeArea preview](/preview-cards/safe-area.webp) ### SafeArea Safe Area component. ](components/safe-area)[ ![SignaturePad preview](/preview-cards/signature-pad.webp) ### SignaturePad Signature Pad component. ](components/signature-pad)[ ![SplitButton preview](/preview-cards/split-button.webp) ### SplitButton Split Button component. ](components/split-button)[ ![SwipeActions preview](/preview-cards/swipe-actions.webp) ### SwipeActions Swipe Actions component. ](components/swipe-actions)[ ![ThemeSwitcher preview](/preview-cards/theme-switcher.webp) ### ThemeSwitcher Color-scheme picker that writes to ThemeService. ](components/theme-switcher)[ ![ThemeToggle preview](/preview-cards/theme-toggle.webp) ### ThemeToggle Dark/light mode toggle button. ](components/theme-toggle)[ ![TouchRipple preview](/preview-cards/touch-ripple.webp) ### TouchRipple Touch Ripple component. ](components/touch-ripple) [ AudioPlayer Audio Player component. ](components/audio-player)[ ButtonGroup Button Group component. ](components/button-group)[ ConsentBanner Consent Banner component. ](components/consent-banner)[ DensityScope Density Scope component. ](components/density-scope)[ DropdownButton Dropdown Button component. ](components/dropdown-button)[ Icon Icon wrapper — renders Lucide icons via Blazicons. ](components/icon)[ Kbd Keyboard shortcut glyph — renders with styling. ](components/kbd)[ Label Form label that links to a control via for/id. ](components/label)[ PullToRefresh Pull To Refresh component. ](components/pull-to-refresh)[ SafeArea Safe Area component. ](components/safe-area)[ SignaturePad Signature Pad component. ](components/signature-pad)[ SplitButton Split Button component. ](components/split-button)[ SwipeActions Swipe Actions component. ](components/swipe-actions)[ ThemeSwitcher Color-scheme picker that writes to ThemeService. ](components/theme-switcher)[ ThemeToggle Dark/light mode toggle button. ](components/theme-toggle)[ TouchRipple Touch Ripple component. ](components/touch-ripple) ## Data Display (30) [ ![Avatar preview](/preview-cards/avatar.webp) ### Avatar Circular user image with initials fallback and status indicator. ](components/avatar)[ ![Badge preview](/preview-cards/badge.webp) ### Badge Small label for counts, statuses, or category tags. ](components/badge)[ ![Barcode preview](/preview-cards/barcode.webp) ### Barcode Inline SVG Code 128B barcode renderer (scannable). ](components/barcode)[ ![Calendar preview](/preview-cards/calendar.webp) ### Calendar Date picker calendar grid with single, range, and multi-select modes. ](components/calendar)[ ![Card preview](/preview-cards/card.webp) ### Card Flexible container with header, content, and footer slots. ](components/card)[ ![Chart preview](/preview-cards/chart.webp) Lumeo.Charts ### Chart Declarative chart wrapper over ECharts — 30+ types supported. ](components/chart)[ ![Chip preview](/preview-cards/chip.webp) ### Chip Compact removable tag, optionally toggleable. ](components/chip)[ ![DataGrid preview](/preview-cards/data-grid.webp) Lumeo.DataGrid ### DataGrid Enterprise grid: sort, filter, inline edit, multi-level group (client + server), pin, virtualize, export. ](components/data-grid)[ ![DataTable preview](/preview-cards/data-table.webp) Lumeo.DataGrid ### DataTable Table with sorting, pagination, and row selection built in. ](components/data-table)[ ![Descriptions preview](/preview-cards/descriptions.webp) ### Descriptions Key-value pair list for read-only entity details. ](components/descriptions)[ ![FileManager preview](/preview-cards/file-manager.webp) ### FileManager Headless file and folder explorer — folder tree, breadcrumb path, list/grid views, lazy loading, inline rename, context-menu operations. ](components/file-manager)[ ![FileViewer preview](/preview-cards/file-viewer.webp) Lumeo.FileViewer ### FileViewer Universal file preview — auto-detects type from MIME / extension and renders PDF, images, video, audio, Markdown, JSON, CSV, source code (CodeMirror), and plain text inline; unknown types fall back to a download CTA. Pluggable per-kind renderer overrides; auth-aware HttpClient hook. ](components/file-viewer)[ ![Filter preview](/preview-cards/filter.webp) Lumeo.DataGrid ### Filter Composable faceted filter builder with chips. ](components/filter)[ ![Gantt preview](/preview-cards/gantt.webp) Lumeo.Gantt ### Gantt Gantt component. ](components/gantt)[ ![Gauge preview](/preview-cards/gauge.webp) ### Gauge Single-value gauge with radial, arc, and linear variants and threshold colour bands. ](components/gauge)[ ![Image preview](/preview-cards/image.webp) ### Image Image with lazy-loading, loading skeleton, and error fallback. ](components/image)[ ![ImageCompare preview](/preview-cards/image-compare.webp) ### ImageCompare Before/after slider comparison for two images. ](components/image-compare)[ ![List preview](/preview-cards/list.webp) ### List Ordered/unordered list with Lumeo typographic styling. ](components/list)[ ![Map preview](/preview-cards/map.webp) Lumeo.Maps ### Map Interactive geographic map powered by MapLibre GL — markers, polylines, polygons, circles, arcs, heatmaps, legend overlays, and popups; CARTO vector basemaps, no API key required. ](components/map)[ ![PdfViewer preview](/preview-cards/pdf-viewer.webp) Lumeo.PdfViewer ### PdfViewer Inline PDF document viewer powered by pdf.js — page navigation, zoom controls, optional text search, and download. ](components/pdf-viewer)[ ![PivotGrid preview](/preview-cards/pivot-grid.webp) ### PivotGrid Cross-tab / pivot table that summarizes flat data into rows x columns x aggregated measures. ](components/pivot-grid) ![QRCode preview](/preview-cards/qr-code.webp) Docs coming soon ### QRCode Renders a QR code SVG for a string payload. [ ![Scheduler preview](/preview-cards/scheduler.webp) Lumeo.Scheduler ### Scheduler Calendar/agenda scheduler wrapping FullCalendar. ](components/scheduler)[ ![Sparkline preview](/preview-cards/sparkline.webp) ### Sparkline Inline SVG trend chart primitive — line, area, or bars for tables and KPI strips. ](components/sparkline)[ ![Statistic preview](/preview-cards/statistic.webp) ### Statistic Big-number statistic display with label and unit. ](components/statistic)[ ![Steps preview](/preview-cards/steps.webp) ### Steps Numbered step indicator for wizards and progress flows. ](components/steps)[ ![Table preview](/preview-cards/table.webp) ### Table Minimal styled HTML table with header, row, cell components. ](components/table)[ ![Timeline preview](/preview-cards/timeline.webp) ### Timeline Vertical event timeline with icons and connectors. ](components/timeline)[ ![TreeView preview](/preview-cards/tree-view.webp) ### TreeView Hierarchical tree with expand/collapse and selection. ](components/tree-view)[ ![Watermark preview](/preview-cards/watermark.webp) ### Watermark Repeating diagonal watermark overlay. ](components/watermark) [ Avatar Circular user image with initials fallback and status indicator. ](components/avatar)[ Badge Small label for counts, statuses, or category tags. ](components/badge)[ Barcode Inline SVG Code 128B barcode renderer (scannable). ](components/barcode)[ Calendar Date picker calendar grid with single, range, and multi-select modes. ](components/calendar)[ Card Flexible container with header, content, and footer slots. ](components/card)[ Chart Declarative chart wrapper over ECharts — 30+ types supported. ](components/chart)[ Chip Compact removable tag, optionally toggleable. ](components/chip)[ DataGrid Enterprise grid: sort, filter, inline edit, multi-level group (client + server), pin, virtualize, export. ](components/data-grid)[ DataTable Table with sorting, pagination, and row selection built in. ](components/data-table)[ Descriptions Key-value pair list for read-only entity details. ](components/descriptions)[ FileManager Headless file and folder explorer — folder tree, breadcrumb path, list/grid views, lazy loading, inline rename, context-menu operations. ](components/file-manager)[ FileViewer Universal file preview — auto-detects type from MIME / extension and renders PDF, images, video, audio, Markdown, JSON, CSV, source code (CodeMirror), and plain text inline; unknown types fall back to a download CTA. Pluggable per-kind renderer overrides; auth-aware HttpClient hook. ](components/file-viewer)[ Filter Composable faceted filter builder with chips. ](components/filter)[ Gantt Gantt component. ](components/gantt)[ Gauge Single-value gauge with radial, arc, and linear variants and threshold colour bands. ](components/gauge)[ Image Image with lazy-loading, loading skeleton, and error fallback. ](components/image)[ ImageCompare Before/after slider comparison for two images. ](components/image-compare)[ List Ordered/unordered list with Lumeo typographic styling. ](components/list)[ Map Interactive geographic map powered by MapLibre GL — markers, polylines, polygons, circles, arcs, heatmaps, legend overlays, and popups; CARTO vector basemaps, no API key required. ](components/map)[ PdfViewer Inline PDF document viewer powered by pdf.js — page navigation, zoom controls, optional text search, and download. ](components/pdf-viewer)[ PivotGrid Cross-tab / pivot table that summarizes flat data into rows x columns x aggregated measures. ](components/pivot-grid) QRCode Docs coming soon [ Scheduler Calendar/agenda scheduler wrapping FullCalendar. ](components/scheduler)[ Sparkline Inline SVG trend chart primitive — line, area, or bars for tables and KPI strips. ](components/sparkline)[ Statistic Big-number statistic display with label and unit. ](components/statistic)[ Steps Numbered step indicator for wizards and progress flows. ](components/steps)[ Table Minimal styled HTML table with header, row, cell components. ](components/table)[ Timeline Vertical event timeline with icons and connectors. ](components/timeline)[ TreeView Hierarchical tree with expand/collapse and selection. ](components/tree-view)[ Watermark Repeating diagonal watermark overlay. ](components/watermark) ## Dashboard (5) [ ![Bento preview](/preview-cards/bento.webp) ### Bento Masonry grid for dashboard tiles and marketing feature layouts. ](components/bento)[ ![Delta preview](/preview-cards/delta.webp) ### Delta Trend indicator showing delta value with up/down arrow + color. ](components/delta)[ ![KpiCard preview](/preview-cards/kpi-card.webp) ### KpiCard Dashboard KPI tile showing value, label, and trend. ](components/kpi-card)[ ![PickList preview](/preview-cards/pick-list.webp) ### PickList Two-column shuttle picker — move items between lists. ](components/pick-list)[ ![SparkCard preview](/preview-cards/spark-card.webp) ### SparkCard Small dashboard card with an inline sparkline chart. ](components/spark-card) [ Bento Masonry grid for dashboard tiles and marketing feature layouts. ](components/bento)[ Delta Trend indicator showing delta value with up/down arrow + color. ](components/delta)[ KpiCard Dashboard KPI tile showing value, label, and trend. ](components/kpi-card)[ PickList Two-column shuttle picker — move items between lists. ](components/pick-list)[ SparkCard Small dashboard card with an inline sparkline chart. ](components/spark-card) ## Forms (34) [ ![Button preview](/preview-cards/button.webp) ### Button Versatile button with variants, sizes, icons, and loading states. ](components/button)[ ![Cascader preview](/preview-cards/cascader.webp) ### Cascader Multi-level dropdown for hierarchical selection. ](components/cascader)[ ![Checkbox preview](/preview-cards/checkbox.webp) ### Checkbox Binary input with indeterminate state and accessible label. ](components/checkbox)[ ![CodeEditor preview](/preview-cards/code-editor.webp) Lumeo.CodeEditor ### CodeEditor Source-code editor wrapping CodeMirror 6 with on-demand language packs, dark/light/auto theming, and line numbers. ](components/code-editor)[ ![ColorPicker preview](/preview-cards/color-picker.webp) ### ColorPicker Hue + saturation/value picker with hex input. ](components/color-picker)[ ![Combobox preview](/preview-cards/combobox.webp) ### Combobox Searchable select with filtering, custom values, and grouping. ](components/combobox)[ ![ConfirmButton preview](/preview-cards/confirm-button.webp) ### ConfirmButton Confirm Button component. ](components/confirm-button)[ ![DatePicker preview](/preview-cards/date-picker.webp) ### DatePicker Calendar popover for picking a single date or range. ](components/date-picker)[ ![DateTimePicker preview](/preview-cards/date-time-picker.webp) ### DateTimePicker Combined date + time picker with timezone awareness. ](components/date-time-picker)[ ![FileUpload preview](/preview-cards/file-upload.webp) ### FileUpload Drag-and-drop file dropzone with progress and validation. ](components/file-upload)[ ![Form preview](/preview-cards/form.webp) ### Form EditForm wrapper with styled validation, field groups, and submit state. ](components/form)[ ![InplaceEditor preview](/preview-cards/inplace-editor.webp) ### InplaceEditor Click-to-edit text/number field that swaps in an input. ](components/inplace-editor)[ ![Input preview](/preview-cards/input.webp) ### Input Styled text input with label, prefix/suffix, icons, error state. ](components/input)[ ![InputMask preview](/preview-cards/input-mask.webp) ### InputMask Masked input for phone numbers, dates, and custom patterns. ](components/input-mask)[ ![Mention preview](/preview-cards/mention.webp) ### Mention Textarea with @-trigger dropdown for mentioning users. ](components/mention)[ ![NumberInput preview](/preview-cards/number-input.webp) ### NumberInput Numeric input with stepper buttons and locale formatting. ](components/number-input)[ ![OtpInput preview](/preview-cards/otp-input.webp) ### OtpInput One-time password input, auto-advances between boxes. ](components/otp-input)[ ![OverlayForm preview](/preview-cards/overlay-form.webp) ### OverlayForm Overlay Form component. ](components/overlay-form)[ ![PasswordInput preview](/preview-cards/password-input.webp) ### PasswordInput Password field with show/hide toggle and strength meter. ](components/password-input)[ ![QueryBuilder preview](/preview-cards/query-builder.webp) ### QueryBuilder Visual AND/OR predicate-tree builder; serializes to JSON or a LINQ predicate. ](components/query-builder)[ ![RadioGroup preview](/preview-cards/radio-group.webp) ### RadioGroup Grouped radio buttons with horizontal or vertical layout. ](components/radio-group)[ ![Rating preview](/preview-cards/rating.webp) ### Rating Star rating input with half-star support. ](components/rating)[ ![RichTextEditor preview](/preview-cards/rich-text-editor.webp) Lumeo.Editor ### RichTextEditor WYSIWYG editor wrapping TipTap with Lumeo styling. ](components/rich-text-editor)[ ![Segmented preview](/preview-cards/segmented.webp) ### Segmented Pill-shaped tab-like single-select control. ](components/segmented)[ ![Select preview](/preview-cards/select.webp) ### Select Native-feeling styled dropdown with search and groups. ](components/select)[ ![Slider preview](/preview-cards/slider.webp) ### Slider Range slider with single and dual thumb modes. ](components/slider)[ ![Switch preview](/preview-cards/switch.webp) ### Switch Toggle switch for boolean settings. ](components/switch)[ ![TagInput preview](/preview-cards/tag-input.webp) ### TagInput Input that turns entries into removable tag chips. ](components/tag-input)[ ![Textarea preview](/preview-cards/textarea.webp) ### Textarea Multiline text input with auto-resize option. ](components/textarea)[ ![TimePicker preview](/preview-cards/time-picker.webp) ### TimePicker Time-of-day picker with 12h/24h formats. ](components/time-picker)[ ![Toggle preview](/preview-cards/toggle.webp) ### Toggle Two-state button with pressed/unpressed styling. ](components/toggle)[ ![ToggleGroup preview](/preview-cards/toggle-group.webp) ### ToggleGroup Group of toggles with single or multiple selection. ](components/toggle-group)[ ![TreeSelect preview](/preview-cards/tree-select.webp) ### TreeSelect Select input with a hierarchical tree dropdown. ](components/tree-select)[ ![UploadTrigger preview](/preview-cards/upload-trigger.webp) ### UploadTrigger Upload Trigger component. ](components/upload-trigger) [ Button Versatile button with variants, sizes, icons, and loading states. ](components/button)[ Cascader Multi-level dropdown for hierarchical selection. ](components/cascader)[ Checkbox Binary input with indeterminate state and accessible label. ](components/checkbox)[ CodeEditor Source-code editor wrapping CodeMirror 6 with on-demand language packs, dark/light/auto theming, and line numbers. ](components/code-editor)[ ColorPicker Hue + saturation/value picker with hex input. ](components/color-picker)[ Combobox Searchable select with filtering, custom values, and grouping. ](components/combobox)[ ConfirmButton Confirm Button component. ](components/confirm-button)[ DatePicker Calendar popover for picking a single date or range. ](components/date-picker)[ DateTimePicker Combined date + time picker with timezone awareness. ](components/date-time-picker)[ FileUpload Drag-and-drop file dropzone with progress and validation. ](components/file-upload)[ Form EditForm wrapper with styled validation, field groups, and submit state. ](components/form)[ InplaceEditor Click-to-edit text/number field that swaps in an input. ](components/inplace-editor)[ Input Styled text input with label, prefix/suffix, icons, error state. ](components/input)[ InputMask Masked input for phone numbers, dates, and custom patterns. ](components/input-mask)[ Mention Textarea with @-trigger dropdown for mentioning users. ](components/mention)[ NumberInput Numeric input with stepper buttons and locale formatting. ](components/number-input)[ OtpInput One-time password input, auto-advances between boxes. ](components/otp-input)[ OverlayForm Overlay Form component. ](components/overlay-form)[ PasswordInput Password field with show/hide toggle and strength meter. ](components/password-input)[ QueryBuilder Visual AND/OR predicate-tree builder; serializes to JSON or a LINQ predicate. ](components/query-builder)[ RadioGroup Grouped radio buttons with horizontal or vertical layout. ](components/radio-group)[ Rating Star rating input with half-star support. ](components/rating)[ RichTextEditor WYSIWYG editor wrapping TipTap with Lumeo styling. ](components/rich-text-editor)[ Segmented Pill-shaped tab-like single-select control. ](components/segmented)[ Select Native-feeling styled dropdown with search and groups. ](components/select)[ Slider Range slider with single and dual thumb modes. ](components/slider)[ Switch Toggle switch for boolean settings. ](components/switch)[ TagInput Input that turns entries into removable tag chips. ](components/tag-input)[ Textarea Multiline text input with auto-resize option. ](components/textarea)[ TimePicker Time-of-day picker with 12h/24h formats. ](components/time-picker)[ Toggle Two-state button with pressed/unpressed styling. ](components/toggle)[ ToggleGroup Group of toggles with single or multiple selection. ](components/toggle-group)[ TreeSelect Select input with a hierarchical tree dropdown. ](components/tree-select)[ UploadTrigger Upload Trigger component. ](components/upload-trigger) ## Typography (5) [ ![Code preview](/preview-cards/code.webp) ### Code Inline or block monospace code snippet with optional copy button. ](components/code)[ ![Heading preview](/preview-cards/heading.webp) ### Heading Semantic h1-h6 heading with Lumeo typographic scale. ](components/heading)[ ![Highlighter preview](/preview-cards/highlighter.webp) ### Highlighter Wraps occurrences of one or more search terms in the text with highlight marks. ](components/highlighter)[ ![Link preview](/preview-cards/link.webp) ### Link Styled anchor with underline + color variants. ](components/link)[ ![Text preview](/preview-cards/text.webp) ### Text Paragraph text with size, color, weight props. ](components/text) [ Code Inline or block monospace code snippet with optional copy button. ](components/code)[ Heading Semantic h1-h6 heading with Lumeo typographic scale. ](components/heading)[ Highlighter Wraps occurrences of one or more search terms in the text with highlight marks. ](components/highlighter)[ Link Styled anchor with underline + color variants. ](components/link)[ Text Paragraph text with size, color, weight props. ](components/text) ## Marketing (4) [ ![CTASection preview](/preview-cards/cta-section.webp) ### CTASection CTASection component. ](components/cta-section)[ ![FeatureGrid preview](/preview-cards/feature-grid.webp) ### FeatureGrid Feature Grid component. ](components/feature-grid) ![FeatureItem preview](/preview-cards/feature-item.webp) Docs coming soon ### FeatureItem Feature Item component. [ ![Hero preview](/preview-cards/hero.webp) ### Hero Hero component. ](components/hero) [ CTASection CTASection component. ](components/cta-section)[ FeatureGrid Feature Grid component. ](components/feature-grid) FeatureItem Docs coming soon [ Hero Hero component. ](components/hero) ## Drag & Drop (3) [ ![Kanban preview](/preview-cards/kanban.webp) ### Kanban Drag-and-drop board with swimlanes. ](components/kanban)[ ![Sortable preview](/preview-cards/sortable.webp) ### Sortable Drag-and-drop reorderable list. ](components/sortable)[ ![Transfer preview](/preview-cards/transfer.webp) ### Transfer Dual-list transfer picker — left/right with arrows. ](components/transfer) [ Kanban Drag-and-drop board with swimlanes. ](components/kanban)[ Sortable Drag-and-drop reorderable list. ](components/sortable)[ Transfer Dual-list transfer picker — left/right with arrows. ](components/transfer)