Components

Accordion

Vertically stacked collapsible sections that expand to reveal content.

Affix

Pins an element to the viewport edge as the user scrolls.

AppBar

Top application bar with start, center, and end slots; sticky and elevated variants.

BackToTop

Floating button that scrolls the page back to the top.

BottomNav

Mobile-first bottom navigation bar with icon items.

Breadcrumb

Hierarchical page path with separator characters.

Carousel

Slide-based content rotator with autoplay and keyboard nav.

Collapsible

Single expandable region with animated height transition.

MegaMenu

Full-width dropdown for site-wide navigation with columns.

Menubar

Horizontal menubar with File/Edit-style dropdowns.

NavigationMenu

Top-level site nav with animated dropdown panels.

Pagination

Page number bar with prev/next and configurable ranges.

Scrollspy

Highlights the nav item matching the current scroll section.

Sidebar

Collapsible app sidebar with groups, menu, and trigger.

SpeedDial

Floating action button that fans out sub-actions.

Splitter

Resizable split pane for horizontal/vertical layouts.

Stepper

Stateful multi-step wizard with navigation, validation gating, and header indicators.

Tabs

Tabbed content with keyboard nav and animated active indicator.

Toolbar

Horizontal toolbar container with separator, spacer, and group sub-components.

AgentMessageList

Chat message stream for AI agents with role-based styling.

PromptInput

Multiline AI prompt textarea with submit + keyboard shortcuts.

ReasoningDisplay

Collapsible chain-of-thought block for AI reasoning traces.

StreamingText

Token-by-token streaming text renderer for AI responses.

ToolCallCard

AI tool-invocation card showing call + result.

Alert

Inline callout for status, warning, or informational messages.

EmptyState

Illustrated placeholder for empty lists with call-to-action.

Progress

Linear progress bar with determinate + indeterminate modes.

Result

Full-page success/error/info status screen with actions.

RingProgress

Circular determinate progress ring with optional centre label or custom content.

Skeleton

Pulsing placeholder block for loading states.

Spinner

Indeterminate loading spinner with size variants.

Toast

Notification toast — renders from ToastService queue.

AlertDialog

Modal confirmation dialog that interrupts the user for destructive actions.

Command

Command palette — keyboard-driven finder for actions.

ContextMenu

Right-click menu tied to a container element.

Dialog

Modal dialog with header, content, footer, and focus trap.

Drawer

Slide-up sheet for mobile-first contextual content.

DropdownMenu

Menu button with items, separators, submenus, and checkboxes.

HoverCard

Popover that opens on hover for rich previews.

Overlay

Low-level backdrop primitive for custom popovers and modals.

PopConfirm

Inline 'are you sure?' popover attached to a trigger.

Popover

Positionable floating panel with anchor and arrow.

Sheet

Slide-in side panel from left/right/top/bottom.

Tooltip

Hover/focus tooltip with arrow and configurable placement.

Tour

Multi-step spotlight onboarding tour.

Window

Non-modal draggable and resizable floating panel with minimize and maximize support.

AnimatedBeam

SVG beam that traces an animated gradient path between two DOM elements.

BlurFade

Motion primitive: blur + fade-in on mount or when in view.

BorderBeam

Animated gradient border beam effect for hero elements.

Confetti

Burst of colored particles on demand via imperative Fire() method.

Dock

macOS-style icon dock with cursor-proximity magnification.

Marquee

Infinitely scrolling horizontal band of children.

NumberTicker

Animated count-up from zero to target number.

ShimmerButton

Button with animated shimmer border beam.

Sparkles

Decorative sparkle particle animation.

TextReveal

Word-by-word reveal animation on scroll.

AspectRatio

Constrains child content to a fixed width-to-height ratio.

Center

Flexbox helper that centers its children on both axes.

Container

Responsive max-width wrapper with consistent page padding.

Flex

Flexbox wrapper exposing direction, gap, align, justify as props.

Grid

CSS grid wrapper with columns + gap as props.

Resizable

Draggable splitter for resizable panel layouts.

ScrollArea

Styled custom scrollbar container.

Separator

Horizontal or vertical dividing rule.

Spacer

Flex-grow spacer that pushes siblings apart.

Stack

Vertical flex wrapper with gap prop.

AudioPlayer

Audio Player component.

ButtonGroup

Button Group component.

ConsentBanner

Consent Banner component.

DensityScope

Density Scope component.

DropdownButton

Dropdown Button component.

Icon

Icon wrapper — renders Lucide icons via Blazicons.

Kbd

Keyboard shortcut glyph — renders <kbd> with styling.

Label

Form label that links to a control via for/id.

PullToRefresh

Pull To Refresh component.

SafeArea

Safe Area component.

SignaturePad

Signature Pad component.

SplitButton

Split Button component.

SwipeActions

Swipe Actions component.

ThemeSwitcher

Color-scheme picker that writes to ThemeService.

ThemeToggle

Dark/light mode toggle button.

TouchRipple

Touch Ripple component.

Avatar

Circular user image with initials fallback and status indicator.

Badge

Small label for counts, statuses, or category tags.

Barcode

Inline SVG Code 128B barcode renderer (scannable).

Calendar

Date picker calendar grid with single, range, and multi-select modes.

Card

Flexible container with header, content, and footer slots.

Chart

Declarative chart wrapper over ECharts — 30+ types supported.

Chip

Compact removable tag, optionally toggleable.

DataGrid

Enterprise grid: sort, filter, inline edit, multi-level group (client + server), pin, virtualize, export.

DataTable

Table with sorting, pagination, and row selection built in.

Descriptions

Key-value pair list for read-only entity details.

FileManager

Headless file and folder explorer — folder tree, breadcrumb path, list/grid views, lazy loading, inline rename, context-menu operations.

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.

Filter

Composable faceted filter builder with chips.

Gantt

Gantt component.

Gauge

Single-value gauge with radial, arc, and linear variants and threshold colour bands.

Image

Image with lazy-loading, loading skeleton, and error fallback.

ImageCompare

Before/after slider comparison for two images.

List

Ordered/unordered list with Lumeo typographic styling.

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.

PdfViewer

Inline PDF document viewer powered by pdf.js — page navigation, zoom controls, optional text search, and download.

PivotGrid

Cross-tab / pivot table that summarizes flat data into rows x columns x aggregated measures.

Scheduler

Calendar/agenda scheduler wrapping FullCalendar.

Sparkline

Inline SVG trend chart primitive — line, area, or bars for tables and KPI strips.

Statistic

Big-number statistic display with label and unit.

Steps

Numbered step indicator for wizards and progress flows.

Table

Minimal styled HTML table with header, row, cell components.

Timeline

Vertical event timeline with icons and connectors.

TreeView

Hierarchical tree with expand/collapse and selection.

Watermark

Repeating diagonal watermark overlay.

Bento

Masonry grid for dashboard tiles and marketing feature layouts.

Delta

Trend indicator showing delta value with up/down arrow + color.

KpiCard

Dashboard KPI tile showing value, label, and trend.

PickList

Two-column shuttle picker — move items between lists.

SparkCard

Small dashboard card with an inline sparkline chart.

Button

Versatile button with variants, sizes, icons, and loading states.

Cascader

Multi-level dropdown for hierarchical selection.

Checkbox

Binary input with indeterminate state and accessible label.

CodeEditor

Source-code editor wrapping CodeMirror 6 with on-demand language packs, dark/light/auto theming, and line numbers.

ColorPicker

Hue + saturation/value picker with hex input.

Combobox

Searchable select with filtering, custom values, and grouping.

ConfirmButton

Confirm Button component.

DatePicker

Calendar popover for picking a single date or range.

DateTimePicker

Combined date + time picker with timezone awareness.

FileUpload

Drag-and-drop file dropzone with progress and validation.

Form

EditForm wrapper with styled validation, field groups, and submit state.

InplaceEditor

Click-to-edit text/number field that swaps in an input.

Input

Styled text input with label, prefix/suffix, icons, error state.

InputMask

Masked input for phone numbers, dates, and custom patterns.

Mention

Textarea with @-trigger dropdown for mentioning users.

NumberInput

Numeric input with stepper buttons and locale formatting.

OtpInput

One-time password input, auto-advances between boxes.

OverlayForm

Overlay Form component.

PasswordInput

Password field with show/hide toggle and strength meter.

QueryBuilder

Visual AND/OR predicate-tree builder; serializes to JSON or a LINQ predicate.

RadioGroup

Grouped radio buttons with horizontal or vertical layout.

Rating

Star rating input with half-star support.

RichTextEditor

WYSIWYG editor wrapping TipTap with Lumeo styling.

Segmented

Pill-shaped tab-like single-select control.

Select

Native-feeling styled dropdown with search and groups.

Slider

Range slider with single and dual thumb modes.

Switch

Toggle switch for boolean settings.

TagInput

Input that turns entries into removable tag chips.

Textarea

Multiline text input with auto-resize option.

TimePicker

Time-of-day picker with 12h/24h formats.

Toggle

Two-state button with pressed/unpressed styling.

ToggleGroup

Group of toggles with single or multiple selection.

TreeSelect

Select input with a hierarchical tree dropdown.

UploadTrigger

Upload Trigger component.

Code

Inline or block monospace code snippet with optional copy button.

Heading

Semantic h1-h6 heading with Lumeo typographic scale.

Highlighter

Wraps occurrences of one or more search terms in the text with highlight marks.

Link

Styled anchor with underline + color variants.

Text

Paragraph text with size, color, weight props.

CTASection

CTASection component.

FeatureGrid

Feature Grid component.

Hero

Hero component.

Kanban

Drag-and-drop board with swimlanes.

Sortable

Drag-and-drop reorderable list.

Transfer

Dual-list transfer picker — left/right with arrows.