All components

Explore all 308 Lyra UI components. Filter by family, search by name, try previews wey dey available or open example for docs.

Conversation and chat

Agent workspace — Responsive AI chat shell wey join transcript, composer and optional pane for run, tools, retrieval or context.
Voice visualizer — Canvas drawing wey show whether agent dey idle, listen, think or talk.
Message variant picker — Controlled ‹ n / m › navigation among regenerated or edited versions of one chat message.
Chat composer — Message input wey resize by itself, with send and stop buttons.
Chat message — Chat bubble for each role, with avatar, badges and footer wey know status.
Chat viewport — Scrollable transcript wey follow newest message, with jump-to-latest button and unread divider.
Checkpoint — Place inside chat wey person fit confirm before restoring conversation to earlier state.
Code block — Fenced code display with optional lazy syntax colours and copy button.
Lean code block — Small code display wey highlight only grammars supplied when building.
Conversation item — Selectable chat-history row with session title, preview and time.
Generation metrics — Elapsed time, tokens and speed while AI answer dey stream.
Handoff divider — Labeled separator wey mark where control move from one agent to another in transcript.
Markdown — E turn Markdown to safe HTML, including GFM tables, code and links.
Lean Markdown — Small Markdown renderer wey highlight fenced code only from supplied grammars.
Message actions — Toolbar for one chat message with copy, regenerate, edit and feedback.
Message feedback — Thumbs up or down for assistant message, with optional reason and comment.
Model selector — Choose provider and model from fixed catalog or enter custom model name.
Model settings — Model picker and temperature slider together for setting up agent.
Push to talk — Microphone button wey handle permission, recording and cleanup for hold or toggle use.
Stream status — Connection phase for one stream, with heartbeat check for stalls.
Streaming text — E show assistant text as e arrive, joining very fast token updates.
Lean streaming text — Small streaming text renderer; Markdown code highlight use only supplied grammars.
Suggestion chips — Scrollable starter or follow-up prompts wey send chosen text to host.
Thread list — Grouped searchable conversation sidebar with pin, archive, delete and rename.
Transcript feed — Live captions for voice session, with updates from interim to final and follow-to-bottom.
Typing indicator — Small presence signal wey show say assistant dey compose answer.
Usage badge — Small tokens, cost and latency strip for message or run, with breakdown on hover.
Voice picker — Choose TTS voice from supplied catalog, hear preview and handle stale choice.
Widget renderer — E render declarative JSON widget tree from agent stream through approved component registry.
Message parts — E render AI message parts in order: text, reasoning, tool, citation, attachment and media.
Prompt input — E join prompt text with attachments, model, voice, sources, mentions, commands and queued turns.
Prompt queue — Controlled follow-up prompts wey person fit edit, reorder, remove or send now.
Real-time session — Voice-session shell independent of provider, with connection, activity, transcript, capture, mute and interrupt.
Selection toolbar — Ask, quote, cite and copy actions beside selected text, keeping document anchor.

Agent tools and monitoring

Activity feed — Streaming log of small agent actions; when run finish, e collapse to completed-step summary.
Agent evaluation dashboard — Evaluation overview wey join metric cards, trend chart and status history for each run.
Agent question — E collect structured answer to agent or MCP server question, with accept, decline and cancel.
Background runs — Queued, running and completed agent jobs managed by host, with open and cancel requests.
Budget meter — E show how much of given limit don use, including unavailable and exceeded states.
Change review — E show file changes from host and ask person whether to keep or discard each hunk.
Connector manager — Connection status plus connect, disconnect and retry requests for host-managed connectors.
Permission request — E show request for scoped permission and tell host whether person allow or deny am.
Permission rules — Host-defined rules wey person fit change to allow, ask or deny.
Agent run — Main shell for one agent run, with status, time spent, current step, cost, cancel and retry.
Agent trace — Tree view of agent or LLM trace, with span filters and quick jumps between handoffs.
Approval queue — Keyboard-friendly queue of pending tool calls; one dialog handle approve or deny for each.
Artifact panel — Panel for one agent-made artifact, with preview/code switch, versions, copy and download.
Browser frame — Agent-computer view for screenshots, read-only URL and controls to take over.
Commit card — Short commit summary with diffstat and file changes wey link to diff view.
Compare panel — Side-by-side A/B output comparison with vote for winner, for model evaluation.
Confirm bar — Approve or deny one proposed agent action inside transcript without modal dialog.
Context inspector — View model-call context parts, estimated tokens, citations, redactions, copy and export.
Evaluation dataset — Examples wey person fit filter or tag, with add, remove, import and export.
Evaluation result — Rubric scores and human review for comparing runs of one example.
Evaluation run — Live batch progress with detail for each example, including grounding and tool traces.
Policy summary — Read-only list of guardrail, permission, privacy and tool decisions, with clear allow, deny or review reasons.
Span waterfall — Horizontal time chart of agent trace spans, with status colours on shared time axis.
Stack trace — E parse JS/TS, browser and Python stack traces into clickable frames and fold internal frames.
Task list — Live collapsible agent plan, with status for each step and smaller steps inside.
Terminal — Read-only ANSI console for streamed agent or tool output, with search and follow-to-bottom.
Test results — Pass/fail suite summary with counts, filters and failure details wey open automatically.
Thinking panel — Collapsible place for live or reviewed AI-agent reasoning transcript.
Tool approval dialog — Human approval gate to allow, deny or edit proposed tool call before e run.
Tool call block — Inline block for one agent tool call; open am to see arguments, error and result.
Tool call chip — Small inline pill with tool call name, status and duration.
Tool parameter form — Editable form from tool flat JSON Schema for changing call arguments.
Tool result dialog — Modal with tool call status, duration and full result.
Tool result view — E show tool result with registered renderer; if none dey, e show JSON.
Tool selector — Searchable dialog with tool categories to choose which agent tools dey enabled.
Tool timeline — Tool calls for one agent run in time order, with retries, approval gates and hidden sensitive fields.
Trace tree — Collapsible agent/LLM span tree with duration bar and optional tokens or cost.
Result card — Bordered card shell wey give custom tool results same small-card look.
Result field — Small label-and-value row for tool result cards or dense metadata.
MCP App — E host executable MCP App resource inside isolated sandbox and emit typed host requests.
Prompt studio — Workbench wey no depend on provider for editing, previewing, saving, versioning and running structured prompts.
JSON Schema viewer — Selectable JSON Schema tree with constraints, required fields, composition and validation issues.
Subagent panel — Controlled tree of subagent runs, with status, task, model, progress and actions.

Retrieval and knowledge graphs

Community card — Summary card for knowledge-graph group, with member chips and action to open details.
Embedding explorer — Accessible 2D scatter view for projected embeddings, with cluster colours and point selection.
Entity card — Card for one knowledge-graph entity, with type badge, properties, degree and focus-on-graph action.
Entity chip — @entity mention inside agent text with preview wey show on hover or focus.
Entity details — Details for entity with heading, confidence score and tabs for relationships, chunks and origin.
Graph — Node-and-link diagram wey show relationships and fit pan or zoom.
Graph legend — List of node types for graph wey also filter which ones person see.
Ingestion queue — List of documents inside ingestion pipeline, with stage, progress, counts, retry and cancel.
Knowledge base — Retrieval source list with sync status, indexing health, permissions and actions for each row.
Knowledge-base admin — Tabbed place for knowledge-base sources and ingestion queue; e send management actions to host.
Knowledge-graph explorer — Graph view with entity search, type filters, neighbour expansion and path finding.
Mind map — Topic tree wey spread in circle and fit expand to explore hierarchy.
Neighbour list — Relationship rows for one entity, with navigate and expand-in-graph action per row.
Node palette — Searchable node library in categories; drag or place nodes on flow canvas.
Path strip — Small scrollable node–relationship–node chain wey show GraphRAG reasoning path.
Chunk inspector — Ranked RAG chunks with relevance bars and link to open document viewer.
Citation badge — Inline [n] citation mark with preview on hover and colours for confidence or verification.
Grounding summary — Scorecard for claims with support counts, citation coverage, confidence, warnings and evidence.
Memory panel — Agent working-memory area for short and long memories, with confidence and actions wey need confirmation.
Provenance panel — Collapsible breakdown of entities, relationships, communities and chunks supporting one answer.
RAG answer — Grounded answer with safe Markdown, citations, grounding score and expandable source previews.
Research progress — Research steps and source counts supplied by host, plus overall progress.
Retrieval results — Ranked chunks with duplicate removal, source groups, selection and compact or expanded view.
Retrieval search — Search bar for retrieval or RAG, with filter chips, scope, vector/keyword/hybrid mode and status.
Retrieval trace — Pipeline timeline with expandable evidence for rewrite, embed, retrieve, rerank and filter.
Source card — Citation entry with source title, page, excerpt and full text wey fit expand.
Source list — Collapsible Sources panel wey gather citation cards for one chat message.
Source picker — Checkbox tree to choose sources for next answer, with three-state folders, select-all and search.
Claim evidence — E check generated claims against citations, showing support, confidence and evidence.
RAG evaluation dashboard — RAG quality metrics, trends, evaluation slices and run history from host results.
Retrieval comparison — Ranked retrieval and reranking results side by side, with overlap and score breakdowns.

Forms and input

Button — Action button wey get different tone, size and loading state from design tokens.
Checkbox — Form control wey fit show checked, unchecked or indeterminate state.
Checkbox group — E gather related checkboxes as one validated form field for many choices.
Code editor — Place to edit code for many lines without extra dependency; line numbers dey optional.
Colour picker — Native colour field wey work with form, label, hint and validation error.
Combobox — Text input join listbox wey pop out so person fit filter and choose one or many items.
Date input — Date field wey get calendar popover and store value as ISO-8601.
Date picker — Calendar wey show one month inside page to choose one date or date range.
Emoji picker — Emoji picker wey person fit search, use with keyboard and submit with form.
Icon button — Small accessible button wey show only icon to start action.
Text input — One-line text field wey fit show label, hint and validation error.
Country picker — E dey select country and territory code with translated name, flag and search wey you fit turn on.
Money picker — E dey select currency code with translated name, symbol and search wey you fit turn on.
Time zone picker — E dey select time zone ID from arranged list, with search wey you fit turn on.
Unit picker — E dey select measurement unit with translated name, symbol and search wey you fit turn on.
Language picker — Dropdown wey change active locale from languages registered inside the library.
Number input — Number field wey obey minimum, maximum and step, with native validation.
Option — Item wey person fit choose; e supply value, label, group and status to combobox.
Phone input — Phone field wey know country and send form value in standard E.164 format.
Radio option — Form control for choosing only one item inside a set.
Radio group — Group of radio buttons with label and keyboard movement for one choice.
Scoring form — Rubric for scores, categories and comments, with submit-and-next flow for evaluation queue.
Select menu — Dropdown for choosing one item from fixed options.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Slider — Number range control for settings like LLM temperature or volume.
Colour swatch picker — Choose one colour from small fixed swatches, with radio-group behaviour.
On/off switch — Form control wey toggle true or false with native switch meaning.
Multi-line text — Plain text field for many lines, with auto-grow, validation and form label.
Time input — Time field in segments based on locale, with column picker; lr-native-time-input use browser picker.
Time range — Brush with two handles to choose start and end across number range.
Toggle button — Button wey manage two states by itself, using aria-pressed for on or off.
Toggle group — E gather toggle buttons under one tab stop for many choices or one choice wey fit clear.
Browser time input — Browser time picker wrapped with Lyra label, hint and validation; alternative to lr-time-input.
One-time code input — Segmented field for one-time verification code, with SMS autofill built in.
Radio button — One-choice control wey look like button instead of circle, often inside lr-radio-group.
Token input — Form field wey gather removable tokens like tags or recipients.

Show data

Graph query builder — Form editor for graph relationship or path query, with entity anchors, type filters, hop limit and saved queries.
Calendar — Responsive month calendar with event marks and agenda wey keyboard fit reach.
Context meter — Segmented bar or ring wey show how much token budget or context window don use.
Document library — Document list wey get search, filters, versions, tags, owners, freshness, sorting and bulk selection.
Environment list — Key/value list for environment variables and secrets, masked with reveal and copy for each row.
File tree — File explorer on top of tree component, with Git status badges and folders wey load when needed.
Flow canvas — Canvas wey person fit pan and zoom to build and run visual DAG workflows.
Flow controls — Buttons to zoom, fit and lock the matching flow canvas.
Flow minimap — Small corner map for flow canvas, with viewport rectangle wey person fit drag.
Flow node — Workflow node card with heading, status colour and connection handles for flow canvas.
Flow run status — E mark run status on flow canvas and show short summary of steps.
Funnel chart — Bars wey show how conversion dey drop from stage to stage, compared with first stage.
Gauge — E show one value as radial, ring or straight meter.
Heatmap — Matrix or calendar values shown as heatmap wey adjust to space available.
Page navigation — Controlled page navigation with editable page jump and summary of item range.
Condition builder — Build structured query with field, operator and value rows joined by AND or OR.
Sequence strip — Small row of coloured cells showing category state for each item, with optional marker.
Small trend chart — Tiny inline SVG chart for data trend as line, filled area or bars.
Statistic — One KPI with unit, trend, breakdown rows and optional sparkline.
Table — Data table wey show sortable headings, selection, filters and page navigation.
Timeline — Connected rows of past events for audit trail, agent history or changes.
Timeline event — One event with coloured marker, title, time and description.
Tree — Hierarchy wey person fit open or close to browse graphs, documents or files.
Tree item — One node and im children inside a tree, rendered recursively.
Word cloud — SVG cloud without extra dependency; word size follow how much weight e get.
Data grid — Virtual grid for big or server-backed data, with sorting, filtering, groups, pages and selection.

Charts

Bar chart — E compare values for categories with upright or sideways bars.
Box plot — E summarise distribution from five-number statistics wey dem don calculate.
Bubble chart — E show three values per point through x, y and bubble size.
Chart — Main Chart.js wrapper wey power line, bar, pie and other data charts.
Doughnut chart — Ring segments wey show how each part take share the whole.
Histogram — E put numbers inside equal-width buckets to show their distribution.
Line chart — One or more connected lines wey show trend along continuous axis.
Light chart — Bar and line chart wey use ordinary SVG without Chart.js dependency.
Pie chart — Circle slices wey show how one data series share the whole.
Polar area chart — Each category na wedge from centre, and value control im size.
Radar chart — Radial grid wey compare several measures from one series.
Scatter chart — Raw x/y points wey dey on linear axes.

Layout and navigation

Accordion — E manage disclosure panels as group, and fit allow more than one to open.
Accordion item — Panel wey person fit open or close inside accordion group.
App rail — Navigation rail wey change from full labels to icons or mobile overlay as space change.
App rail group — Section with title wey fit collapse and gather navigation items inside app rail.
App rail item — Navigation item with icon and label; e show only icon when rail collapse.
Breadcrumb — Responsive navigation trail wey show where person dey inside page hierarchy.
Breadcrumb item — One link or current-page label inside breadcrumb trail.
Button group — Related action buttons together inside one labeled group wey respond to space.
Card — Content surface with border and places for header, media, footer and actions.
Carousel — One-slide-at-a-time carousel with keyboard control, indicators, loop and autoplay.
Carousel item — Optional semantic wrapper wey give one carousel slide steady styling.
Command palette — Searchable app commands with keyboard navigation and shortcuts.
Control group — Mixed form controls and action buttons inside responsive toolbar row.
Dashboard grid — Keyboard-friendly widget grid wey position items and report move, resize or collision requests.
Details — Accessible panel wey expand to show content under summary.
Dock panel — Panel on one edge of existing layout wey person fit resize or collapse.
Drilldown panel — Navigation from chart or table data to related evidence, documents, entities or agent runs, with breadcrumb path.
Dropdown item — One action row inside dropdown menu; e match Web Awesome API.
Filter bar — Dashboard filter row with Lyra inputs, removable chips, reset and loading states.
Menu — Inline semantic action menu with moving focus and nested submenus.
Menu item — One menu action row with optional icon, checkbox or destructive style.
Reorder item — One row inside reorder list, with move-up or move-down buttons and slotted content.
Reorder list — Rows wey person fit rearrange through row buttons or Ctrl/Cmd+Arrow.
Menu label — Heading wey no dey interactive, to group related menu items.
Menubar — Horizontal app menu bar with titled dropdowns and full keyboard navigation.
Menubar item — Top-level title wey open im menu or act as ordinary action.
Navigation menu — Site-header links and flyout panels wey collapse behind menu button when space small.
Navigation item — Page link or disclosure button wey open flyout panel inside navigation menu.
Page shell — App page whose navigation turn from desktop column to mobile drawer based on available space.
Responsive panel — Content wey dock inside desktop layout or appear as overlay sheet on mobile.
Scroller — Scrollable area with optional previous and next controls for cards or tabs.
Segmented choices — Row of buttons for choosing one labeled option quickly.
Multi-split layout — E divide dashboard into panels wey person fit drag to resize or collapse.
Split panel — E divide content into two panes with one draggable divider; simpler than lr-multi-split.
Stepper — Guide through ordered steps, showing each step state and letting person jump to step.
Tab group — Tab strip wey show one light-DOM panel at once, with full keyboard navigation.
Tab — Web Awesome/Shoelace-compatible tab descriptor wey pair with panel using panel and name attributes.
Tab panel — Web Awesome/Shoelace-compatible panel descriptor wey pair with tab using name and panel attributes.
Virtual list — E render only visible rows from very large scrollable list.
Widget — Panel with title and optional collapse or full-screen controls.

Overlays and feedback

Toast area — Area wey stack short notifications at one corner of screen.
Toast message — One notification wey person fit close, with severity colour, optional icon and auto-close timer.
Chip — Small pill for tag, filter or scope; e fit remove or toggle.
Chip group — E wrap chips and fit show +N for extra ones above limit.
Alert — Message wey start closed, fit hide after time and fit move to shared toast stack.
Badge — Small status label for state, counts or categories inside text.
Callout — Inline message for status, warning or error wey person fit close.
Context menu — E make any region open action menu by right-click, long press or Shift+F10.
Dialog — Modal overlay wey hold focus for confirmations, forms and urgent work.
Drawer — Modal panel wey slide in from any screen edge for filters or extra controls.
Dropdown — Action-list popover wey attach to trigger owned by consumer.
Empty state — Icon, message and optional actions wey explain say no data dey.
Keyboard shortcut — Platform-aware key caps wey show keyboard shortcut.
Popover — Floating content and controls wey open on click and close when person click outside.
Popup — Low-level engine wey align floating panel to anchor; popover and tooltip use am.
Progress bar — Horizontal progress indicator for known or unknown completion, with optional value.
Progress ring — Round progress indicator for known or unknown completion, with label in middle.
Rating — Star rating wey keyboard fit use and wey show partial fractions.
Loading placeholder — Animated placeholder for content while e dey load.
Spinner — Moving busy indicator wey show background work still dey go.
Tag — Badge-style label for keywords or categories.
Tooltip — Short description wey appear on hover or focus for trigger owned by consumer.

Document and file viewers

Archive viewer — E list file names and uncompressed sizes inside ZIP without extracting files.
Calendar viewer — E read .ics calendar and show events, times and places.
Contact viewer — E fetch vCard and show one accessible card for each contact.
CSV viewer — E fetch CSV and show rows inside scrollable sheet wey render only visible ones.
Dataset viewer — E fetch delimited text and show am as accessible typed data table.
Document comparison — Two versions side by side or inline, with text diff and rendered previews.
Document preview — E show document or attachment inside page based on MIME type, or offer download.
Document viewer — E show document inside dialog, using renderer registry based on MIME type.
DOCX viewer — E convert DOCX to safe semantic HTML through mammoth converter.
E-book viewer — E show EPUB with chapter navigation through optional epub.js peer.
Email viewer — E read .eml and show headers, safe message body and attachments.
GeoJSON viewer — E fetch and check GeoJSON, then draw im features on map.
Highlight layer — Overlay wey draw clickable highlight rectangles on positioned document content.
HTML viewer — E fetch URL and show HTML safely after sanitizing am.
Include — E fetch HTML fragment and place safe content inside page light DOM.
Notebook viewer — Read-only Jupyter notebook with Markdown, code and rich cell outputs.
Page rail — Virtual vertical row of thumbnails to move through document pages.
PDF viewer — E fetch and show PDF pages with zoom, page controls and selectable text.
PPTX viewer — Browser-side best-effort view for PowerPoint PPTX slides.
Spreadsheet viewer — E fetch .xlsx or old .xls workbook with sheet tabs and virtual rows.
SVG viewer — E fetch SVG from URL and render safe inline document.
XML viewer — Tree view for inspecting XML, with branches wey collapse and content wey fit copy.

Media and files

Attachment chip — Small file chip for message, with upload status, progress and retry.
Avatar — Small identity sign with image, icon or initials for person or entity.
Animated image — E play GIF, APNG or WebP, with play/pause button wey respect reduced motion.
Animation — E animate slotted child with named presets or custom keyframes.
Attach button — Small control wey open file picker or capability menu inside chat composer.
Audio/video player — Player with transcript wey follow cues, waveform and playback-speed control.
Avatar group — Overlapping avatars in small row; extra ones turn into +N badge.
Drop zone — Wrapper wey make any region accept dropped files, without im own file picker.
File icon — Localized badge for file type from MIME type or file name.
File input — Drop zone wey also open file browser when clicked and emit selected files.
Flag — Country or language flag inside frame wey theme fit change or make round.
Image comparer — Divider wey keyboard fit move to compare before and after surfaces.
Image viewer — Full image viewer with pan, zoom, labeled highlighted regions and optional annotation.
Lightbox — Full-screen modal for images, with previous/next and zoom.
Map — MapLibre GL map with declarative legend, choropleth and markers.
Media card — Inline preview for image, video or file attached to chat message.
Pan and zoom — Scrollable view to move and zoom slotted content or one image within limits.
Sequence playback — Play/pause control wey move index through range on fixed timer.
QR code — E encode any value as QR symbol wey person fit scan, drawn on canvas.
Video player — Inline player with custom controls, captions wey person fit choose and thumbnail previews.
Video playlist — Videos inside navigable list; next one play automatically when current one finish.
Zoomable frame — Sandboxed iframe preview with step-by-step zoom controls; lr-pan-zoom handle old image surface.

Helper tools

Intersection observer — E emit native intersection entries when slotted targets enter or leave visible area.
Mutation observer — E watch slotted DOM for element or attribute changes and pass native records along.
Resize observer — E watch slotted elements and emit typed size changes without visible UI.
Copy button — Icon-only button wey copy text to clipboard and show checkmark feedback.
Diff view — E compare two strings by line and show colour-coded unified diff.
Divider — Semantic separator wey theme fit style for horizontal or vertical content.
Export button — Download table data as CSV or JSON, directly or from format menu.
Byte formatter — E format byte size for locale, with adjustable unit step and precision.
Date formatter — E format date and time for locale through Intl.DateTimeFormat.
Number formatter — E format numbers, money and compact values for locale through Intl.NumberFormat.
Icon — Sharp inline SVG icons from named built-in paths, without extra dependency.
JSON viewer — Collapsible tree for inspecting any JSON, with copy action.
Known date input — Separate day, month and year fields for date wey person already know.
Live region — ARIA region wey screen readers hear but eyes no see; e slow repeated announcements.
Mention popover — Autocomplete beside text cursor for @mentions and slash commands.
Refresh countdown — Countdown to next planned refresh, with pause and resume.
Rotating content — E show slotted items randomly or one after another for A/B text or testimonials.
Relative time — Timestamp like time ago wey follow locale and refresh by itself.
Guided tour — Spotlight and steps wey guide person when dem first use product.
Visually hidden — E hide content from eyes but screen reader still fit read am; focus fit show am again.