All components

Explore all 308 Lyra UI components. Filter by family, search by name, and try live previews or open a documented example.

Conversation & Chat

  • Agent workspace — Responsive controlled shell for an AI conversation that composes the transcript, composer, and an optional run/tool/retrieval/grounding/context details pane.
  • Audio visualizer — Canvas-drawn voice-activity visualization that reflects an agent's idle, listening, thinking, or speaking state.
  • Branch picker — Controlled ‹ n / m › navigator across regenerated or edited variants of one chat message.
  • Chat composer — Auto-resizing chat message input with built-in send and stop controls
  • Chat message — Role-based chat bubble shell with avatar, badges, and a status-aware footer
  • Chat viewport — Transcript scroll container that owns stick-to-bottom follow behavior, a jump-to-latest pill, and an unread divider.
  • Checkpoint — Inline conversation restore point with a confirm-then-restore affordance for rolling a chat back to an earlier state.
  • Code block — Fenced code display with optional lazy syntax highlighting and a copy button.
  • Code block core — Build-lean code display that highlights only from a compile-time supplied grammar map.
  • Conversation item — Selectable chat-history row showing a session's title, preview, and timestamp.
  • Generation metrics — Shows elapsed time, tokens, and throughput while an AI response streams.
  • Handoff divider — Labeled separator marking control transfer between agents in a transcript.
  • Markdown — Sanitized Markdown-to-HTML rendering with GFM tables, code, and links
  • Markdown core — Build-lean Markdown rendering that highlights fenced code only from a compile-time supplied grammar map.
  • Message actions — Per-message action toolbar for a chat message with copy, regenerate, edit, and feedback built-ins.
  • Message feedback — Thumbs up/down rating for one assistant message with an optional reason-and-comment detail panel.
  • Model select — Provider and model picker with a fixed catalog or free-text custom entry.
  • Model settings panel — Paired model picker and temperature slider for configuring an agent.
  • Push to talk — Mic capture button that owns the full permission-request, recording, and teardown lifecycle for press-and-hold or toggle use.
  • Stream status — Shows a single streaming connection's phase with heartbeat-aware stall detection.
  • Streaming text — Incrementally renders streaming assistant text, coalescing rapid token updates.
  • Streaming text core — Build-lean streaming text renderer whose Markdown mode highlights fenced code only from a compile-time supplied grammar map.
  • Suggestion chips — Scrollable row of starter or follow-up prompt chips that hand the chosen text to the host.
  • Thread list — Grouped, searchable conversation sidebar with pin, archive, delete, and rename row actions.
  • Transcript feed — Live captions feed for an in-progress voice session with interim-to-final upgrades and stick-to-bottom scroll.
  • Typing indicator — Presentational presence cue that shows the assistant is composing a response
  • Usage badge — Compact tokens/cost/latency strip for one message or run, with a hover tooltip breakdown.
  • Voice picker — TTS voice selector over a supplied catalog with inline audio preview and stale-value handling.
  • Widget renderer — Renders an agent-streamed declarative JSON widget tree through an allowlisted type-to-component registry.
  • Message parts — Renders ordered, interleavable AI message parts with text, reasoning, tool, citation, attachment, and media primitives.
  • Prompt input — Combines prompt composition with attachments, model and voice selection, retrieval sources, mentions, commands, and queued turns.
  • Prompt queue — Manages a controlled queue of follow-up prompts that can be edited, reordered, removed, or sent immediately.
  • Realtime session — Provides a provider-neutral voice-session shell for connection, activity, transcript, capture, mute, and interruption controls.
  • Selection toolbar — Positions ask, quote, cite, and copy actions beside selected text while carrying its document anchor.

Agent Tools & Observability

  • Activity feed — Append-only streaming log of an agent's granular actions, collapsing to a completed-steps summary once the run finishes.
  • Agent eval dashboard — Controlled evaluation overview pairing metric cards with a trend chart and per-run status history.
  • Agent question — Collects a structured response to an agent or MCP server question, with accept, decline, and cancel actions.
  • Background runs — Shows host-managed queued, running, and completed agent jobs with open and cancel requests.
  • Budget meter — Displays supplied usage against a limit, including unavailable and exceeded states.
  • Change review — Reviews host-supplied file changes and requests a keep or discard decision for each hunk.
  • Connector manager — Shows connection status and requests connect, disconnect, or retry actions for host-managed connectors.
  • Permission grant — Presents a scoped permission request and reports the user’s allow or deny choice to the host.
  • Permission rules — Displays host-defined permission rules and requests changes to their allow, ask, or deny decisions.
  • Agent run — Top-level shell for one agent run, showing status, elapsed time, current step, and cost, with cancel and retry actions.
  • Agent trace — Hierarchical agent/LLM trace view with span-kind filters and handoff quick-jumps over one shared spans array.
  • Approval queue — Keyboard-accessible queue of pending tool calls, each reviewed and approved or denied through one shared dialog.
  • Artifact panel — Shell around one agent-generated artifact with a preview/code toggle, version navigation, and copy/download actions.
  • Browser frame — Presentational agent-computer viewport showing a screenshot stream, a read-only URL, and take-over controls.
  • Commit card — Compact commit summary with diffstat and per-file changes that link out to a diff view.
  • Compare panel — Side-by-side A/B output comparison with a winner vote, for arena-style model evaluation.
  • Confirm bar — Inline, non-modal approve/deny block for one proposed agent action, sitting in the transcript instead of a dialog.
  • Context inspector — Inspection view of model-call context segments with token estimates, citations, redaction markers, and copy/export controls.
  • Eval dataset — Filterable and taggable evaluation-example list with add, remove, import, and export affordances.
  • Eval result — Rubric scoring and human-review surface for comparing the runs of one evaluation example.
  • Eval run — Live progress view for an evaluation batch, with overall progress and one disclosure per example including grounding and tool traces.
  • Policy summary — Read-only list of guardrail, permission, privacy, and tool-policy decisions with accessible allow, deny, or needs-review explanations.
  • Span waterfall — Horizontal timeline of an agent trace's spans as status-toned bars against a shared time axis.
  • Stack trace — Parses JS/TS, browser, and Python stack traces into activatable frames with internal-frame folding.
  • Task list — Live, collapsible tracker for an agent's plan with per-step lifecycle status and nested sub-steps.
  • Terminal — Read-only ANSI console rendering streamed agent or tool output, with search and stick-to-bottom follow.
  • Test results — Pass/fail test suite summary with per-status counts, filter toggles, and auto-expanding failure detail.
  • Thinking panel — Collapsible panel for an AI agent's live or reviewed reasoning transcript.
  • Tool approval dialog — Human-in-the-loop gate to approve, deny or edit a proposed tool call before it runs.
  • Tool call block — Collapsible inline block for one agent tool call that expands to show its arguments, error, and result.
  • Tool call chip — Compact inline pill summarizing one agent tool call's name, status, and duration.
  • Tool param form — Generates an editable form from a tool's flat JSON Schema for tweaking call arguments.
  • Tool result dialog — Modal overlay showing a tool call's status, duration, and full result detail.
  • Tool result view — Renders a tool call's result through a registered renderer, falling back to JSON.
  • Tool select dialog — Category-grouped, searchable dialog for choosing which agent tools are enabled.
  • Tool timeline — Chronological list of an agent run's tool calls with retry counts, human-approval gating, and sensitive-field redaction.
  • Trace tree — Collapsible span hierarchy for an agent/LLM trace with a duration bar and optional token/cost columns.
  • Result card — Bordered card shell giving custom tool-result renderers one small-card look
  • Result field — Compact label/value row for tool-result cards and dense metadata strips
  • MCP App — Hosts an executable MCP App resource in an isolated sandbox and surfaces host requests as typed events.
  • Prompt studio — Provides a provider-neutral workbench for editing, previewing, versioning, saving, and running structured prompts.
  • Schema viewer — Inspects selectable JSON Schema trees with constraints, required state, composition branches, and validation issues.
  • Subagent panel — Displays a controlled hierarchy of subagent runs with status, task, model, progress, and lifecycle actions.

Retrieval & Knowledge Graphs

  • Community card — Cluster summary card for a knowledge-graph community, with member chips and a drill-in action.
  • Embedding explorer — Accessible 2D scatter view of host-projected embedding coordinates, with optional cluster coloring and point selection.
  • Entity card — Dossier card for one knowledge-graph entity with a type badge, properties, degree, and a focus-in-graph action.
  • Entity chip — Inline @entity mention for agent prose with a hover/focus preview popover.
  • Entity dossier — Entity detail surface with a header, confidence statistic, and tabs for relationships, supporting chunks, and provenance.
  • Graph — Maps relationships as a pannable, zoomable force-directed node-link diagram.
  • Graph legend — Node-type legend for a paired graph that doubles as a visibility filter.
  • Ingestion queue — Controlled list of documents moving through an ingestion pipeline, showing stage, progress, counts, and retry or cancel requests.
  • Knowledge base — Retrieval knowledge-base source list with sync status, indexing health, permissions, and per-row management requests.
  • Knowledge base admin — Tabbed operations shell pairing knowledge-base sources with the ingestion queue and forwarding management actions to the host.
  • Knowledge graph explorer — Knowledge-graph exploration shell combining graph rendering, entity search, type filters, neighborhood expansion, and path finding.
  • Mind map — Radial expandable topic tree for spatially browsing a hierarchy and drilling into a topic.
  • Neighbor list — One entity's relationship rows with per-row navigate and expand-in-graph affordances.
  • Node palette — Searchable, categorized node library for dragging or placing nodes onto a flow canvas.
  • Path strip — Compact, scrollable node-relation-node chain rendering a GraphRAG reasoning path.
  • Chunk inspector — Ranked list of retrieved RAG chunks with relevance score bars and a deep link into a document viewer.
  • Citation badge — Inline [n] citation marker with a hover preview and confidence/verification coloring.
  • Grounding summary — Claim-level grounding scorecard showing support counts, citation coverage, confidence, warnings, and evidence citations.
  • Memory panel — Agent working-memory surface for short-term context and long-term memories, with confidence and confirmation-gated actions.
  • Provenance panel — Renders the grounding behind one answer as a collapsible entities, relationships, communities, and chunks breakdown.
  • RAG answer — Grounded-answer surface combining sanitized Markdown, citation badges, a grounding assessment, and expandable source previews.
  • Research progress — Shows host-supplied research steps, source counts, and overall completion progress.
  • Retrieval results — Ranked retrieval-chunk list with deduplication, source grouping, selection, and compact or expanded presentation modes.
  • Retrieval search — Query bar for a retrieval or RAG surface, with filter and scope chips, a vector/keyword/hybrid mode selector, and status feedback.
  • Retrieval trace — Retrieval-pipeline stage timeline with expandable evidence for each rewrite, embed, retrieve, rerank, and filter stage.
  • Source card — Citation entry showing a source's title, page, excerpt, and expandable full text.
  • Source list — Collapsible Sources panel grouping a chat message's citation cards under one header.
  • Source picker — Checkbox tree scoping which sources ground the next answer, with tri-state folders, select-all, and search.
  • Claim evidence — Audits generated claims against citations with support status, confidence, and evidence.
  • RAG evaluation dashboard — Presents RAG quality metrics, trends, evaluation slices, and run history from host-computed results.
  • Retrieval compare — Compares ranked retrieval and reranking result sets side by side with overlap and score breakdowns.

Forms & Inputs

  • Button — Tokenized action button with tone variants, sizes, and a loading state.
  • Checkbox — Boolean form control with checked, unchecked, and indeterminate states.
  • Checkbox group — Groups related checkboxes into one form-associated, validated multi-select field.
  • Code editor — Dependency-free multiline code editing surface with an optional line-number gutter.
  • Color picker — Form-associated native color input with label, hint, and validation-error chrome.
  • Combobox — Filterable single or multi-select pairing a text input with a listbox popover.
  • Date input — Date field with an attached calendar popover and an ISO-8601 value.
  • Date picker — Inline month-grid calendar for picking a single date or a date range.
  • Emoji picker — Searchable, keyboard-navigable, form-associated picker for choosing an emoji.
  • Icon button — Triggers an action with a compact, accessible icon-only button.
  • Input — Single-line text field with optional label, hint, and inline validation chrome.
  • Country picker — Selects country and territory codes with localized names, flags and optional search.
  • Currency picker — Selects currency codes with localized names, symbols and optional search.
  • Time zone picker — Selects time-zone identifiers from an ordered catalog, with optional search.
  • Unit picker — Selects measurement-unit identifiers with localized names, symbols and optional search.
  • Locale picker — Closed-list dropdown for switching the active locale, sourced from the library's own locale registry.
  • Number input — Numeric field with min, max, and step constraints plus native constraint validation.
  • Option — Selectable option feeding value, label, grouping, and status data to a combobox.
  • Phone input — Country-aware telephone field whose form value is canonical E.164
  • Radio — Form-associated single-choice control for picking one option from a set
  • Radio group — Labeled, keyboard-navigable group of single-choice radio buttons.
  • Rubric form — Configurable scoring, category, and comment rubric with a submit-and-next flow for working through an eval queue.
  • Select — Closed-list dropdown for choosing one option from a fixed set of choices.
  • Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
  • Slider — Numeric range control for settings like an LLM temperature or a volume level.
  • Swatch picker — Single-select picker over a small, fixed set of color swatches with a radiogroup contract built in.
  • Switch — Boolean toggle-switch form control with on/off switch semantics for native forms.
  • Textarea — Multiline plain-text input with auto-grow, validation, and form-control chrome.
  • Time input — Locale-aware segmented time field with an attached column picker; the browser-native input[type=time] experience is lr-native-time-input.
  • Time range — Two-handle brush for selecting a start and end range over a numeric domain.
  • Toggle — Self-managed two-state button that flips an option on or off with aria-pressed semantics.
  • Toggle group — Groups toggle buttons behind one tab stop with multiple or clearable single selection.
  • Native time input — Native browser time-picker field wrapped in Lyra label, hint, and validation chrome, for when the platform's own picker is preferred over the segmented lr-time-input.
  • OTP input — Segmented field for entering a one-time verification code, with built-in SMS autofill.
  • Radio button — Single-choice control styled as a button rather than a circle, usually grouped into a segmented control with lr-radio-group.
  • Token input — Form-associated field that collects a list of removable tokens like tags or recipients.

Data Display

  • Graph query builder — Form-associated editor for a typed graph relationship or path query, with entity anchors, type filters, hop limits, and saved queries.
  • Calendar — Responsive month calendar with event markers and a keyboard-accessible agenda view.
  • Context meter — Segmented occupancy meter, bar or ring, for a token budget or context window.
  • Document library — Searchable and filterable document inventory with versions, tags, owners, freshness, sorting, and bulk selection.
  • Env list — Masked key/value list for environment variables and secrets, with per-row reveal and copy.
  • File tree — File-explorer preset over the tree component with git-status badges and lazy directory loading.
  • Flow canvas — Pannable, zoomable canvas for building and running visual DAG workflows.
  • Flow controls — Zoom, fit, and lock button cluster for a paired flow canvas.
  • Flow minimap — Corner overview map with a draggable viewport rectangle for a paired flow canvas.
  • Flow node — Workflow node card with header, status tone, and connection handles for a flow canvas.
  • Flow run status — Pushes run-status decorations onto a flow canvas and shows a compact step-summary strip.
  • Funnel — Shows stage-by-stage conversion drop-off as bars normalized to the first stage.
  • Gauge — Shows a single value as a radial, ring, or linear meter.
  • Heatmap — Renders a matrix or calendar grid of values as a resize-aware canvas heatmap.
  • Pagination — Controlled page navigation with an editable page jump and item-range summary
  • Condition builder — Composable structured-query builder for tabular or dashboard data, combining field/operator/value condition rows with an AND/OR combinator.
  • Sequence strip — Compact per-item strip visualizing a sequence of categorical states as colored cells with an optional marker.
  • Sparkline — Plots a compact inline SVG trend as a line, filled area, or bars for a data series.
  • Stat — Presents a single KPI with unit, trend pill, breakdown rows, and an optional sparkline.
  • Table — Presentational data table with sortable headers, selection, filtering, and pagination.
  • Timeline — Connected sequence of past-event rows for audit trails, agent histories and changelogs.
  • Timeline item — One event row for a timeline with a color-coded marker, title, timestamp and description.
  • Tree — Expand/collapse hierarchy for navigating graphs, documents, or file trees
  • Tree node — Recursive treeitem row renderer for one node and its children inside a tree.
  • Word cloud — Zero-dependency SVG tag cloud that scales each word by its weight
  • Data grid — Virtualized data grid for large or server-backed datasets, with sorting, filtering, grouping, paging, and selection built in.

Charts

  • Bar chart — Compares values across categories with vertical or horizontal bars.
  • Box plot — Summarizes distributions from precomputed five-number statistical summaries.
  • Bubble chart — Plots three dimensions per point using x, y position and bubble radius.
  • Chart — Core Chart.js wrapper powering line, bar, pie, and other data visualizations.
  • Doughnut chart — Shows part-to-whole proportions as segments of a ring.
  • Histogram — Bins numeric values into equal-width buckets to reveal their distribution.
  • Line chart — Tracks trends over a continuous axis with one or more connected series.
  • Lite chart — Dependency-free bar and line chart rendered as plain SVG, no chart.js needed
  • Pie chart — Proportional pie chart showing one series' share of a whole
  • Polar area chart — Polar-area chart plotting each category as a wedge scaled by its value
  • Radar chart — Radar chart comparing several metrics of one series on a radial grid
  • Scatter chart — Scatter plot of raw x/y point pairs on linear axes

Layout & Navigation

  • Accordion — Coordinates a group of disclosure panels, optionally allowing several open at once.
  • Accordion item — Collapsible disclosure panel designed to slot into an accordion group.
  • App rail — Responsive navigation rail that adapts from full to icon-only to a mobile overlay.
  • App rail group — Titled, optionally collapsible section that groups navigation items inside an app rail.
  • App rail item — Icon and label navigation item for an app rail, with an icon-only collapsed state.
  • Breadcrumb — Responsive navigation trail showing the user's location within a page hierarchy
  • Breadcrumb item — One link or current-page label within a breadcrumb navigation trail
  • Button group — Groups related action buttons into one responsive, labeled cluster
  • Card — Bordered content surface with header, media, footer, and actions slots.
  • Carousel — Accessible single-slide carousel with keyboard nav, indicators, looping, and autoplay.
  • Carousel item — Optional semantic slide wrapper that gives one carousel child consistent item styling.
  • Command palette — Searchable application command menu with keyboard navigation and shortcuts.
  • Control group — Groups mixed form controls and action buttons into one responsive, centered toolbar row.
  • Dashboard grid — Responsive, keyboard-accessible controlled widget grid that positions layout entries and emits move, resize, and collision requests.
  • Details — Accessible disclosure panel that expands to reveal content beneath a summary.
  • Dock panel — Resizable, collapsible panel docked to one edge of your existing layout.
  • Drilldown panel — Controlled navigation shell from a chart or table datum to related evidence, documents, entities, or agent runs, with a breadcrumb path.
  • Dropdown item — Web Awesome-compatible alias for a single action row inside a dropdown menu.
  • Filter bar — Dashboard filter row composing Lyra inputs and removable chips, with reset and loading states.
  • Menu — Inline semantic menu of action items with roving focus and nested submenus.
  • Menu item — Single action row for a menu, with an optional icon, checkbox, or destructive style.
  • Reorder item — Single row inside a reorder list, pairing move-up/move-down buttons with arbitrary slotted content.
  • Reorder list — Generic reorderable list of rows, moved via per-row buttons or a Ctrl/Cmd+Arrow shortcut.
  • Menu label — Adds a non-interactive section heading to group related items inside a menu list.
  • Menubar — Horizontal application menubar of titled dropdown menus with full keyboard navigation.
  • Menubar item — One top-level menubar title that opens its slotted menu or acts as a plain action.
  • Navigation menu — Site-header navigation of links and flyout panels that collapses behind a menu toggle when space runs out.
  • Navigation menu item — One navigation menu entry: a page link, or a disclosure button that opens a flyout panel.
  • Page — Semantic application shell whose navigation switches between a desktop column and a modal mobile drawer based on its own allocated size, not the viewport.
  • Responsive panel — Docks content inline on desktop or presents it as an overlay sheet on mobile
  • Scroller — Responsive overflow surface with optional previous/next controls for card and tab rows.
  • Segmented — Single-select button row for choosing one of several labeled options at a glance.
  • Multi split — Divides a dashboard into drag-resizable panels with optional responsive collapse.
  • Split panel — Divides content into two drag-resizable panes with a single divider, a simpler alternative to the multi-panel lr-multi-split.
  • Stepper — Guides users through an ordered multi-step wizard with per-step state and click-to-jump.
  • Tabs — Tab strip that shows one light-DOM panel at a time with full keyboard navigation.
  • Tab — Web Awesome/Shoelace-compatible tab descriptor that pairs with a matching panel inside a tab-group via panel and name attributes.
  • Tab panel — Web Awesome/Shoelace-compatible panel descriptor that pairs with a matching tab inside a tab-group via name and panel attributes.
  • Virtual list — Windowed list host that renders only on-screen rows for huge scrollable collections
  • Widget — Titled panel shell with optional collapse and fullscreen-expand toggles

Overlays & Feedback

  • Toast — Stacking region that anchors toast notifications to a corner of the screen.
  • Toast item — Single dismissible toast with a severity accent, optional icon and auto-dismiss timer.
  • Chip — Small pill for a tag, filter, or scope, optionally removable or toggleable.
  • Chip group — Wraps a set of chips with an optional +N overflow toggle when they exceed a limit.
  • Alert — Closed-by-default alert message with timed auto-hide and an optional handoff into the shared toast stack.
  • Badge — Compact status label for signaling state, counts, or categories inline
  • Callout — Inline message surface for status, warning, and error content, dismissible.
  • Context menu — Turns any region into a right-click, long-press, or Shift+F10 target that opens an action menu.
  • Dialog — Focus-trapped modal overlay for confirmations, forms, and other interruptive tasks.
  • Drawer — Slides a modal panel in from any viewport edge for filters or contextual controls.
  • Dropdown — Menu-role popover that anchors an action list to a consumer-owned trigger
  • Empty state — Communicates an empty or no-data state with an icon, message, and optional actions.
  • Kbd — Platform-aware chip that renders a keyboard shortcut as key caps
  • Popover — Click-triggered, light-dismiss floating surface for contextual content and controls
  • Popup — Low-level anchored-positioning primitive that keeps a floating panel aligned to its anchor, the same engine underlying the popover and tooltip components.
  • Progress bar — Determinate or indeterminate horizontal progress indicator with an optional value.
  • Progress ring — Circular determinate or indeterminate progress indicator with a center label.
  • Rating — Keyboard-accessible star rating with fractional-precision partial fills
  • Skeleton — Animated loading placeholder standing in for content while it loads.
  • Spinner — Signals an ongoing background task with an indeterminate, animated busy indicator.
  • Tag — Semantic alias of the badge treatment for labeling keywords or categories
  • Tooltip — Hover- and focus-triggered tooltip that describes a consumer-owned trigger

Document & File Viewers

  • Archive viewer — Lists file names and uncompressed sizes inside a ZIP archive without extracting contents.
  • Calendar viewer — Parses and renders an .ics calendar file's events as summaries, times, and locations.
  • Contact viewer — Fetches a vCard document and renders one accessible card per contact.
  • CSV viewer — Fetches a CSV file and renders its rows in a virtualized, scrollable sheet.
  • Dataset viewer — Fetches delimited text and renders it as a typed, accessible data table.
  • Document compare — Side-by-side or inline comparison of two document versions, combining a textual diff view with rendered document previews.
  • Document preview — Previews a document or attachment inline based on MIME type, with a download fallback.
  • Document viewer — Displays a document in a dialog with a pluggable MIME-type renderer registry.
  • DOCX viewer — Renders a DOCX file as sanitized semantic HTML via the mammoth converter.
  • Ebook viewer — Renders an EPUB with chapter navigation using the optional epub.js peer.
  • Email viewer — Parses and renders an .eml message with headers, sanitized body, and attachments.
  • GeoJSON viewer — Fetches, validates, and renders a GeoJSON file's features on a map.
  • Highlight layer — Overlay that paints activatable highlight rectangles over positioned document content.
  • HTML viewer — Fetches a URL and safely renders its HTML after sanitizing it.
  • Include — Fetches an HTML fragment and transcludes it as sanitized light-DOM page content.
  • Notebook viewer — Read-only Jupyter notebook renderer composing markdown, code, and rich cell outputs.
  • Page rail — Virtualized vertical thumbnail rail for paging through a page-addressed document.
  • PDF viewer — Fetches and renders PDF pages with zoom, pagination, and a selectable text layer
  • PPTX viewer — Best-effort client-side viewer for PowerPoint PPTX presentations.
  • Spreadsheet viewer — Fetches and renders .xlsx and legacy .xls workbooks with sheet tabs and virtualized rows.
  • SVG viewer — Fetches and safely renders an inline, sanitized SVG document from a URL.
  • XML viewer — Collapsible, copyable tree view for inspecting XML documents.

Media & Files

  • Attachment chip — Compact chip for a file attached to a message, with upload status, progress, and retry.
  • Avatar — Small identity marker showing an icon, image, or initials fallback for a person or entity
  • Animated image — Plays an animated GIF/APNG/WebP with a play/pause control that respects reduced motion.
  • Animation — Declaratively animates a slotted child with named presets or custom keyframes.
  • Attachment trigger — Compact attach affordance that opens a file picker or capability menu in a chat composer.
  • AV player — Audio/video player with a synced cue transcript, waveform, and playback-rate control.
  • Avatar group — Stacks overlapping avatars into a compact row that collapses extras into a +N badge
  • Drop zone — Drag-and-drop wrapper that turns any region into a file-drop target without a file picker of its own.
  • File icon — Localized file-type badge resolved from a MIME type or filename.
  • File input — Drag-and-drop and click-to-browse dropzone that emits the selected files.
  • Flag — Country or language flag rendered in a themeable, optionally circular frame.
  • Image Comparer — Slides a keyboard-accessible divider to compare before and after surfaces side by side.
  • Image viewer — Full pan/zoom raster-image viewer with labeled region highlights and optional annotation.
  • Lightbox — Full-screen modal image viewer with prev/next navigation and zoom
  • Map — MapLibre GL map wrapper with a declarative legend, choropleth, and markers
  • Media card — Inline preview for an image, video, or file attachment inside a chat message.
  • Pan zoom — Scrollable viewport for panning and zooming into slotted content or a single image at a bounded zoom level.
  • Sequence playback — Play/pause transport that steps an index through a range on a fixed timer.
  • QR code — Encodes any value as a scannable QR code symbol rendered to canvas.
  • Video — Inline video player with custom controls, selectable captions, and thumbnail previews.
  • Video playlist — Plays a sequence of videos in a navigable playlist, advancing automatically as each one finishes.
  • Zoomable frame — Sandboxed iframe preview with discrete zoom controls; the former slotted/image inspection surface is lr-pan-zoom.

Utility

  • Intersection Observer — Emits native intersection entries as slotted targets enter or leave the viewport.
  • Mutation observer — Watches slotted DOM for element and attribute changes, forwarding native mutation records
  • Resize observer — Watches slotted elements and emits typed resize entries with no visual chrome
  • Copy button — Icon-only button that copies a text value to the clipboard with checkmark feedback.
  • Diff view — Renders a real two-string line diff as color-coded unified-diff output.
  • Divider — Themeable semantic separator for splitting content horizontally or vertically.
  • Export button — Download table data as CSV or JSON, single-format or via a format menu.
  • Format bytes — Locale-aware byte-size formatting with an adjustable unit step and precision.
  • Format date — Locale-aware date and time formatting via Intl.DateTimeFormat.
  • Format number — Locale-aware number, currency and compact formatting via Intl.NumberFormat.
  • Icon — Renders crisp inline SVG glyphs from a built-in named path set with zero dependencies.
  • JSON viewer — Collapsible, copyable tree view for inspecting any JSON payload
  • Known date — Three-field day/month/year input for a date the user already knows
  • Live region — Visually-hidden ARIA live region that throttles screen-reader announcements
  • Mention popover — Caret-anchored autocomplete for @-mentions and slash-commands in a text field.
  • Poll status — Countdown to the next scheduled refresh with a built-in pause and resume control.
  • Random content — Rotates through slotted children randomly or in sequence for A/B copy and testimonials
  • Relative time — Displays a locale-aware relative timestamp that refreshes on its own.
  • Tour — Spotlight-and-step guided walkthrough for first-run product onboarding.
  • Visually hidden — Hides content visually while keeping it available to screen readers, becoming visible again on focus.