Lahat ng Komponent

Tingnan ang lahat ng 308 Lyra UI component. Mag-filter ayon sa kategorya, maghanap ayon sa pangalan, at subukan ang live preview o buksan ang dokumentadong halimbawa.

Pag-uusap at Chat

Workspace ng ahente — Responsive na workspace para sa AI conversation na may transcript, message field at opsyonal na detail panel.
Audio visualizer — Canvas-drawn voice-activity visualization na nagpapakita ng idle, pakikinig, pag-iisip, o pagsasalita ng isang ahente.
Tagapili ng sangay — Kinokontrol na ‹ n / m › navigator sa mga na-regenerate o na-edit na variant ng isang mensahe sa chat.
Chat composer — Message field na awtomatikong nagbabago ng laki, may send at stop control.
Mensahe sa chat — Nakabatay sa papel na chat bubble shell na may avatar, mga badge, at footer na nakakaalam sa status
Viewport ng chat — Chat view na sumusunod sa pinakabagong mensahe at nagmamarka ng hindi pa nababasa.
Checkpoint — Punto sa pag-restore ng conversation para bumalik sa naunang estado pagkatapos kumpirmahin.
Block ng code — Naka-fenced na code display na may opsyonal na lazy syntax highlighting at isang copy button.
Code block core — Magaan na code display na may syntax highlighting mula sa kasamang grammar set.
Item sa pag-uusap — Mapipiling row ng chat-history na nagpapakita ng pamagat, preview, at timestamp ng session.
Mga sukatan ng henerasyon — Ipinapakita ang oras, bilang ng token at bilis habang binubuo ang AI response.
Handoff divider — May label na separator marking control transfer sa pagitan ng mga ahente sa isang transcript.
Markdown — Ligtas na Markdown-to-HTML display na may GFM table, code at link.
Markdown core — Magaan na Markdown display na may code highlighting mula sa kasamang grammar set.
Mga aksyon ng mensahe — Per-message action toolbar para sa isang mensahe sa chat na may kopya, muling buuin, i-edit, at feedback na built-in.
Feedback ng mensahe — Thumbs up o down na rating ng assistant message, may opsyonal na dahilan at komento.
Pagpili ng modelo — Provider at tagapili ng modelo na may nakapirming catalog o libreng text na custom na entry.
Panel ng mga setting ng modelo — Ipinares na tagapili ng modelo at slider ng temperatura para sa pag-configure ng ahente.
Pindutin para magsalita — Button ng pag-capture ng mikropono na nagmamay-ari ng buong paghiling ng pahintulot, pag-record, at pagtanggal ng buhay para sa press-and-hold o toggle na paggamit.
Katayuan ng stream — Ipinapakita ang yugto ng streaming connection at tinutukoy ang pagtigil gamit ang heartbeat.
Streaming text — Paunti-unting nagre-render ng streaming assistant text, pinagsasama-sama ang mabilis na pag-update ng token.
Streaming text core — Build-lean streaming text renderer na ang Markdown mode ay nagha-highlight lamang ng nabakuran na code mula sa isang compile-time na ibinigay na grammar map.
Mga chip ng mungkahi — Nai-scroll na row ng starter o follow-up na prompt chips na nagbibigay ng napiling text sa host.
Listahan ng conversation thread — Naka-grupo, nahahanap na sidebar ng pag-uusap na may pin, archive, tanggalin, at palitan ang pangalan ng mga aksyon sa row.
Transcript feed — Live na caption para sa kasalukuyang voice session, mula pansamantala hanggang pinal na resulta.
Indicator ng pagta-type — Presentational presence cue na nagpapakita na ang assistant ay bumubuo ng isang tugon
Badge ng paggamit — Mga compact na token/cost/latency strip para sa isang mensahe o run, na may hover tooltip breakdown.
Tagapili ng boses — TTS voice selector sa isang ibinigay na catalog na may inline na audio preview at stale-value handling.
Renderer ng widget — Ipinapakita ang JSON widget tree na ginawa ng agent gamit lamang ang pinahihintulutang component.
Mga bahagi ng mensahe — Ipinapakita ang AI message part na maaaring paghaluin, kabilang ang text, reasoning, tool, citation, attachment at media.
Input ng prompt — Prompt field na may attachment, pagpili ng model at boses, source sa paghahanap, mention, command at pila.
Pila ng prompt — Pila ng kasunod na prompt na maaaring i-edit, ayusin muli, alisin o ipadala kaagad.
Realtime na session — Provider-independent na voice session para kontrolin ang koneksyon, activity, transcript, recording, mute at interruption.
Toolbar ng pagpili — Naglalagay ng ask, quote at copy action sa tabi ng napiling teksto.

Mga Tool ng Ahente at Pagmamasid

Feed ng aktibidad — Live na log ng aksyon ng agent na maaaring ibuod kapag natapos ang run.
Agent eval dashboard — Pangkalahatang-ideya ng kinokontrol na pagsusuri sa pagpapares ng mga metric card na may trend chart at per-run status history.
Tanong ng ahente — Kumukuha ng structured na sagot sa tanong ng agent o MCP server, may accept, reject at cancel action.
Mga background run — Ipinapakita ang nakapila, tumatakbo at natapos na agent task, may open at cancel action.
Metro ng badyet — Ipinapakita ang ibinigay na paggamit laban sa isang limitasyon, kabilang ang hindi available at lumampas sa mga estado.
Pagsusuri ng pagbabago — Sinusuri ang mga pagbabago sa file at humihingi ng keep o discard decision para sa bawat bahagi.
Tagapamahala ng konektor — Nagpapakita ng katayuan ng koneksyon at humihiling ng pagkonekta, pagdiskonekta, o muling subukan ang mga aksyon para sa mga host-managed connector.
Pagbibigay ng pahintulot — Nagpapakita ng saklaw na kahilingan sa pahintulot at nag-uulat ng payagan o pagtanggi ng user sa pagpili sa host.
Mga panuntunan sa pahintulot — Nagpapakita ng mga panuntunan sa pahintulot na tinukoy ng host at humihiling ng mga pagbabago sa kanilang pagpayag, pagtatanong, o pagtanggi sa mga desisyon.
Agent run — Top-level na shell para sa isang pagtakbo ng ahente, na nagpapakita ng katayuan, lumipas na oras, kasalukuyang hakbang, at gastos, na may mga pagkilos na kanselahin at subukang muli.
Bakas ng ahente — Hierarchical agent/LLM trace view na may span-kind na mga filter at handoff quick-jumps sa isang shared span array.
Pila ng pag-apruba — Naa-access sa keyboard ang pila ng mga nakabinbing mga tawag sa tool, ang bawat isa ay nasuri at naaprubahan o tinanggihan sa pamamagitan ng isang nakabahaging dialog.
Panel ng artifact — Panel ng artifact na ginawa ng agent, may preview o code view, bersiyon, copy at download.
Frame ng browser — View ng browser activity ng agent na may screenshot, read-only URL at control para kunin ang pamamahala.
Commit card — Buod ng Git commit na may istatistika ng pagbabago at link sa diff ng bawat file.
Panel ng paghahambing — Magkatabing paghahambing ng A/B na output na may boto na nanalo, para sa pagsusuri ng modelo sa istilo ng arena.
Bar ng pagkumpirma — Hindi modal na approval bar para sa isang iminungkahing agent action sa transcript.
Inspektor ng konteksto — View ng inspeksyon ng mga segment ng konteksto ng model-call na may mga pagtatantya ng token, pagsipi, redaction marker, at kontrol sa pagkopya/pag-export.
Eval dataset — Nai-filter at nata-tag na listahan ng halimbawa ng pagsusuri na may mga affordance sa pagdaragdag, pag-alis, pag-import, at pag-export.
Resulta ng eval — Rubric scoring at human-review surface para sa paghahambing ng mga run ng isang halimbawa ng pagsusuri.
Evaluation run — Live na progress view ng evaluation batch, may kabuuang progreso at detalye para sa bawat halimbawa.
Buod ng patakaran — Read-only na listahan ng guardrail, pahintulot, privacy, at tool-policy na mga desisyon na may naa-access na allow, deny, o mga paliwanag na kailangan-review.
Waterfall ng span — Pahalang na timeline ng isang trace ng ahente ay sumasaklaw bilang mga bar na may tono ng katayuan laban sa isang nakabahaging axis ng oras.
Stack trace — Pinag-parse ang JS/TS, browser, at Python stack trace sa mga activateable frame na may internal-frame folding.
Listahan ng gawain — Live, collapsible na tracker para sa plano ng ahente na may katayuan sa bawat hakbang na lifecycle at mga nested na sub-hakbang.
Terminal — Read-only na ANSI console para sa output ng agent o tool, may paghahanap at awtomatikong scroll pababa.
Mga resulta ng pagsubok — Buod ng pass/fail test suite na may mga bilang ng per-status, mga toggle ng filter, at detalye ng pagkabigo sa awtomatikong pagpapalawak.
Thinking panel — Collapsible panel para sa live o nasuri na transcript ng pangangatwiran ng isang ahente ng AI.
Dialog ng pag-apruba ng tool — Aprubahan, tanggihan o pag-edit ng iminungkahing tool call bago ito patakbuhin.
Bloke ng tawag sa tool — Collapsible inline block para sa isang tawag sa tool ng ahente na lumalawak upang ipakita ang mga argumento, error, at resulta nito.
Tool call chip — Compact inline pill na nagbubuod ng pangalan, katayuan, at tagal ng tawag ng isang tool ng ahente.
Form ng parameter ng tool — Bumubuo ng nae-edit na form mula sa flat JSON Schema ng isang tool para sa pagsasaayos ng mga argumento ng tawag.
Dialog ng resulta ng tool — Modal overlay na nagpapakita ng katayuan ng isang tool na tawag, tagal, at buong detalye ng resulta.
View ng resulta ng tool — Nagre-render ng resulta ng tool call sa pamamagitan ng nakarehistrong renderer, na bumabalik sa JSON.
Dialog ng pagpili ng tool — Nakapangkat-kategorya, mahahanap na dialog para sa pagpili kung aling mga tool ng ahente ang pinagana.
Timeline ng tool — Kronolohikal na listahan ng mga tawag sa tool ng isang ahente na tumatakbo na may mga bilang ng muling pagsubok, pag-apruba ng tao, at redaction ng sensitibong field.
Puno ng trace — Collapsible span hierarchy para sa isang ahente/LLM trace na may duration bar at opsyonal na token/cost column.
Card ng resulta — Bordered card shell na nagbibigay ng mga custom na tool-result renderer ng isang maliit na hitsura ng card
Field ng resulta — Compact label/value row para sa mga tool-result card at siksik na metadata strip
MCP App — Nagpapatakbo ng MCP app resource sa hiwalay na frame at ipinapasa ang host request bilang typed event.
Studio ng prompt — Workspace na hindi nakatali sa provider para mag-edit, mag-preview, mag-version at magpatakbo ng structured prompt.
Viewer ng JSON Schema — Sinusuri ang napipiling JSON Schema tree, kabilang ang constraint, required field, composition branch at validation error.
Panel ng subagent — Ipinapakita ang hierarchy ng subagent na may status, gawain, model, progreso at control action.

Pagkuha ng Impormasyon at Knowledge Graph

Card ng komunidad — Cluster summary card para sa isang komunidad ng knowledge-graph, na may mga chip ng miyembro at isang drill-in na aksyon.
Explorer ng embedding — Maa-access na 2D scatter view ng host-projected embedding coordinates, na may opsyonal na cluster coloring at pagpili ng punto.
Entity card — Knowledge graph entity card na may uri, property, bilang ng ugnayan at aksyong mag-focus sa graph.
Entity chip — Inline na @entity mention para sa agent prose na may hover/focus preview popover.
Dossier ng entity — Lumalabas ang detalye ng entity na may header, istatistika ng kumpiyansa, at mga tab para sa mga relasyon, mga sumusuportang chunks, at pinagmulan.
Graph — Ipinapakita ang mga ugnayan bilang node-link graph na puwedeng i-pan at i-zoom.
Legend ng graph — Node-type na legend para sa isang nakapares na graph na gumaganap bilang isang visibility filter.
Pila ng pag-ingest — Kinokontrol na listahan ng mga dokumentong gumagalaw sa isang pipeline ng pag-ingest, nagpapakita ng yugto, pag-unlad, mga bilang, at muling subukan o kanselahin ang mga kahilingan.
Batayan ng kaalaman — Listahan ng source sa knowledge base na may sync at indexing status, permission at mga aksyon sa pamamahala.
Knowledge base admin — Ang mga naka-tab na operasyon ay ipinares ng shell ang mga source ng knowledge-base sa queue ng pag-ingest at pagpapasa ng mga pagkilos sa pamamahala sa host.
Knowledge graph explorer — Knowledge-graph exploration shell na pinagsasama ang pag-render ng graph, paghahanap ng entity, mga filter ng uri, pagpapalawak ng kapitbahayan, at paghahanap ng landas.
Mapa ng isip — Radial expandable topic tree para sa spatially na pagba-browse sa isang hierarchy at pag-drill sa isang paksa.
Listahan ng kalapit na node — Ang mga row ng relasyon ng isang entity na may per-row navigate at expand-in-graph na mga affordance.
Node palette — Nahahanap, nakategorya ang library ng node para sa pag-drag o paglalagay ng mga node sa isang flow canvas.
Strip ng landas — Compact, scrollable node-relation-node chain na nagre-render ng GraphRAG reasoning path.
Inspektor ng tipak — Naka-rank na listahan ng RAG excerpt na may relevance score at link sa orihinal na dokumento.
Citation badge — Inline [n] citation marker na may hover preview at pagkulay ng kumpiyansa/pag-verify.
Grounding na buod — Buod ng source support para sa bawat claim, kabilang ang citation coverage, kumpiyansa, babala at ebidensya.
Panel ng memorya — Agent working-memory surface para sa panandaliang konteksto at pangmatagalang alaala, nang may kumpiyansa at mga pagkilos na may kumpirmasyon.
Provenance panel — Nabubuksang breakdown ng entity, ugnayan, komunidad at excerpt na sumusuporta sa isang sagot.
Sagot na RAG — Sagot na nakabatay sa source, pinagsasama ang ligtas na Markdown, citation, support score at source preview.
Pag-unlad ng pananaliksik — Nagpapakita ng mga hakbang sa pananaliksik na ibinigay ng host, mga bilang ng pinagmulan, at pangkalahatang pag-unlad ng pagkumpleto.
Mga resulta ng pagkuha — Naka-rank na retrieval result na may deduplication, source grouping, selection at compact o expanded view.
Paghahanap ng impormasyon — Query bar para sa retrieval o RAG surface, na may filter at scope chips, vector/keyword/hybrid mode selector, at status feedback.
Trace ng retrieval — Timeline ng yugto ng retrieval-pipeline na may napapalawak na ebidensya para sa bawat yugto ng muling pagsulat, pag-embed, pagkuha, pagraranggo, at pag-filter.
Source card — Pagsipi entry na nagpapakita ng pamagat, pahina, sipi, at napapalawak na buong teksto ng pinagmulan.
Listahan ng pinagmulan — Ang panel ng Collapsible Sources na nagpapangkat ng mga citation card ng mensahe sa chat sa ilalim ng isang header.
Tagapili ng pinagmulan — Checkbox tree para pumili ng source sa susunod na sagot, may three-state folder at paghahanap.
Ebidensya ng pahayag — Inihahambing ang nabuong pahayag sa citation at ipinapakita ang suporta, kumpiyansa at ebidensya.
dashboard ng pagsusuri ng RAG — Ipinapakita ang RAG quality metric, trend at evaluation history mula sa resultang kinuwenta ng app.
Pagkukumpara sa pagkuha — Pinaghahambing ang mga hanay ng resulta ng pagbawi ng ranggo at muling pagraranggo na may mga overlap at mga breakdown ng marka.

Mga Form at Input

Pindutan — Action button na gumagamit ng theme token, may mga pagpipilian sa kulay, laki at loading state.
Checkbox — Checkbox ng form na maaaring naka-check, hindi naka-check o nasa indeterminate state.
Pangkat ng checkbox — Ipangkat ang mga kaugnay na checkbox sa isang form-associated, validated na multi-select na field.
Editor ng code — Multiline code editor na walang dagdag na dependency at may opsyonal na line number.
Tagapili ng kulay — Native na color field para sa form, may label, hint at validation error.
Combobox — Filterable na text field at listahan para sa isa o maraming pagpipilian.
Input ng petsa — Field ng petsa na may naka-attach na popover ng kalendaryo at isang halaga ng ISO-8601.
Tagapili ng petsa — Inline na month-grid na kalendaryo para sa pagpili ng isang petsa o hanay ng petsa.
Tagapili ng emoji — Naghahanap, na-navigate sa keyboard, tagapili na nauugnay sa form para sa pagpili ng emoji.
Button ng icon — Compact at accessible na icon button para magsimula ng aksyon.
Input — Single-line text field na may opsyonal na label, hint at validation error.
Tagapili ng bansa — Pumipili ng mga code ng bansa at teritoryo na may mga isinaling pangalan, watawat at opsyonal na paghahanap.
Tagapili ng salapi — Pumipili ng mga code ng salapi na may mga isinaling pangalan, simbolo at opsyonal na paghahanap.
Tagapili ng sona ng oras — Pumipili ng mga identifier ng sona ng oras mula sa nakaayos na listahan, na may opsyonal na paghahanap.
Tagapili ng yunit — Pumipili ng mga yunit ng pagsukat na may mga isinaling pangalan, simbolo at opsyonal na paghahanap.
Pili ng wika — Dropdown para palitan ang aktibong wika at rehiyon mula sa locale registry ng library.
Pag-input ng numero — Numeric na field na may min, max, at step constraints plus native constraint validation.
Pagpipilian — Mapipiling opsyon sa pagpapakain ng value, label, pagpapangkat, at data ng status sa isang combobox.
Pag-input ng telepono — Phone number field na isinasaalang-alang ang bansa, na may E.164 na form value.
Radio button — Form control para pumili ng isang opsyon mula sa isang grupo.
Grupo ng radio button — Grupo ng radio button na may label at keyboard navigation.
Form ng rubric — Nako-configure ang pagmamarka, kategorya, at rubric ng komento na may isinumite-at-susunod na daloy para sa pagtatrabaho sa isang eval queue.
Dropdown na pagpipilian — Dropdown para pumili ng isang opsyon mula sa takdang listahan.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Slider — Kontrol ng hanay ng numero para sa mga setting tulad ng temperatura ng LLM o antas ng volume.
Tagapili ng swatch — Single-select picker sa isang maliit, nakapirming set ng color swatch na may built in na kontrata sa radiogroup.
Switch — On/off switch na maaaring gamitin sa form.
Textarea — Multiline text field na awtomatikong lumalaki at may validation.
Pag-input ng oras — Segmented time field na umaayon sa locale, may time picker; native na alternatibo ang lr-native-time-input.
Saklaw ng oras — Slider na may dalawang hawakan para pumili ng simula at katapusan.
Toggle button — Dalawang-state na button para i-on o i-off ang pagpipilian.
Grupo ng toggle button — Grupo ng toggle button na may iisang tab stop para sa isa o maraming pagpipilian.
Native na input ng oras — Native na time field ng browser na may Lyra label, hint at validation.
OTP input — Naka-segment na field para sa pagpasok ng isang beses na verification code, na may built-in na SMS autofill.
Button ng radyo — Iisang-pagpipiliang kontrol na naka-istilo bilang isang pindutan sa halip na isang bilog, kadalasang nakapangkat sa isang naka-segment na kontrol na may lr-radio-group.
Token input — Ang field na nauugnay sa form na nangongolekta ng listahan ng mga naaalis na token tulad ng mga tag o tatanggap.

Pagpapakita ng Data

Tagabuo ng query ng graph — Form editor para sa graph relationship o path query, may panimulang entity, type filter, hop limit at saved query.
Kalendaryo — Tumutugon na kalendaryo ng buwan na may mga marker ng kaganapan at view ng agenda na naa-access sa keyboard.
Konteksto meter — Segmented occupancy meter, bar o ring, para sa token budget o context window.
Aklatan ng dokumento — Mahahanap at ma-filter na imbentaryo ng dokumento na may mga bersyon, tag, may-ari, pagiging bago, pag-uuri, at maramihang pagpili.
Listahan ng env — Listahan ng naka-mask na key/halaga para sa mga variable at sikreto ng kapaligiran, na may per-row na pagbubunyag at pagkopya.
Puno ng file — Preset ng file-explorer sa bahagi ng puno na may mga git-status badge at tamad na paglo-load ng direktoryo.
Canvas ng workflow — Pannable, zoomable canvas para sa pagbuo at pagpapatakbo ng mga visual na DAG workflow.
Mga kontrol ng workflow — Zoom, fit, at lock button cluster para sa isang nakapares na flow canvas.
Minimap ng workflow — Pangkalahatang-ideya ng sulok na mapa na may draggable na viewport na parihaba para sa isang nakapares na flow canvas.
Node ng workflow — Workflow node card na may pamagat, status at connection point.
Katayuan ng workflow run — Itinutulak ang mga dekorasyon ng run-status sa isang flow canvas at nagpapakita ng isang compact na step-summary strip.
funnel — Ipinapakita ang bawat yugto ng conversion drop-off habang ang mga bar ay na-normalize sa unang yugto.
Gauge — Nagpapakita ng iisang value bilang radial, ring, o linear meter.
Heatmap — Nagre-render ng isang matrix o grid ng kalendaryo ng mga halaga bilang heatmap ng canvas na may alam sa pagbabago ng laki.
Pagbilang ng pahina — Kinokontrol na pag-navigate sa page na may nae-edit na page jump at buod ng hanay ng item
Tagabuo ng kundisyon — Composable structured-query builder para sa data ng tabular o dashboard, na pinagsasama ang mga row ng kundisyon ng field/operator/value sa isang AND/OR combinator.
Sequence strip — Compact per-item strip na nagpapakita ng pagkakasunud-sunod ng mga kategoryang estado bilang mga cell na may kulay na may opsyonal na marker.
Sparkline — Nag-plot ng isang compact na inline na SVG na trend bilang isang linya, punong lugar, o mga bar para sa isang serye ng data.
Stat — Nagpapakita ng isang KPI na may unit, trend pill, mga breakdown row, at isang opsyonal na sparkline.
Talahanayan — Presentational data table na may mga sortable na header, pagpili, pag-filter, at pagination.
Timeline — Nakakonektang pagkakasunud-sunod ng mga row ng nakaraang kaganapan para sa mga audit trail, mga history ng ahente at mga changelog.
item sa timeline — Isang hilera ng kaganapan para sa isang timeline na may color-coded na marker, pamagat, timestamp at paglalarawan.
Puno — Palawakin/i-collapse ang hierarchy para sa pag-navigate sa mga graph, dokumento, o file tree
Node ng puno — Recursive treeitem row renderer para sa isang node at mga anak nito sa loob ng isang puno.
Ulap ng salita — Zero-dependency SVG tag cloud na sinusukat ang bawat salita ayon sa bigat nito
Grid ng data — Virtualized data grid para sa malaki o server-backed na dataset, may sorting, filtering, grouping, pagination at selection.

Mga tsart

Bar chart — Naghahambing ng mga halaga sa mga kategorya na may mga vertical o pahalang na bar.
Box plot — Binubuod ang distribusyon gamit ang limang paunang nakuwentang estadistika.
Bubble chart — Naglalagay ng tatlong dimensyon sa bawat punto gamit ang x, y na posisyon at bubble radius.
Tsart — Pangkalahatang chart na nakabatay sa Chart.js para sa line, bar, pie at iba pang visualization.
Chart ng donut — Nagpapakita ng part-to-whole na proporsyon bilang mga segment ng isang singsing.
Histogram — Bins numeric value sa mga bucket na may pantay na lapad upang ipakita ang kanilang pamamahagi.
Line chart — Sinusubaybayan ang mga trend sa isang tuluy-tuloy na axis na may isa o higit pang konektadong serye.
Lite chart — Magaan na bar o line chart sa SVG nang walang Chart.js dependency.
Pie chart — Proporsyonal na pie chart na nagpapakita ng bahagi ng isang serye sa kabuuan
Tsart ng polar area — Ang tsart ng polar-area na naglalagay ng bawat kategorya bilang isang wedge na na-scale ayon sa halaga nito
Radar chart — Radar chart na naghahambing ng ilang sukatan ng isang serye sa isang radial grid
Scatter chart — I-scatter ang plot ng raw x/y point pairs sa mga linear axes

Layout at Nabigasyon

Akordyon — Namamahala ng grupo ng nabubuksang panel at puwedeng magbukas ng marami nang sabay-sabay.
Item ng akurdyon — Ang collapsible disclosure panel ay idinisenyo upang makapasok sa isang accordion group.
App rail — Responsive na navigation rail na lumilipat mula full view tungo sa icons-only o mobile overlay.
Grupo ng app rail — May pamagat, opsyonal na nako-collaps na seksyon na nagpapangkat ng mga item sa nabigasyon sa loob ng isang app rail.
Item ng app rail — Icon at label na navigation item para sa isang app rail, na may icon-only collapsed state.
Breadcrumb — Breadcrumb na nagpapakita ng lokasyon ng user sa hierarchy ng mga pahina.
Item ng breadcrumb — Isang link o label ng kasalukuyang pahina sa breadcrumb.
Grupo ng pindutan — Pinagsasama-sama ang mga button ng pagkilos na nauugnay sa isang tumutugon at may label na cluster
Card — Naka-border na content na may mga slot ng header, media, footer, at actions.
Carousel — Naa-access na single-slide carousel na may keyboard nav, mga indicator, looping, at autoplay.
Carousel item — Opsyonal na slide wrapper na nagbibigay ng pare-parehong estilo sa item ng carousel.
Command palette — Mahahanap na menu ng command ng application na may nabigasyon sa keyboard at mga shortcut.
Control group — Pinagsasama-sama ang mga kontrol ng form at mga pindutan ng pagkilos sa isang tumutugon, nakasentro na hilera ng toolbar.
Dashboard grid — Tumutugon, naa-access sa keyboard ang kinokontrol na grid ng widget na nagpoposisyon sa mga entry ng layout at naglalabas ng mga kahilingan sa paglipat, pagbabago ng laki, at pagbangga.
Mga Detalye — Naa-access na panel ng pagsisiwalat na lumalawak upang ipakita ang nilalaman sa ilalim ng isang buod.
Dock panel — Ang resizable, collapsible na panel ay naka-dock sa isang gilid ng iyong kasalukuyang layout.
Panel ng detalye — Panel para mag-navigate mula chart o table tungo sa kaugnay na ebidensya, dokumento, entity o agent run.
Dropdown na item — Web Awesome-compatible na alias para sa isang aksyon sa dropdown menu.
Filter bar — Ang hilera ng filter ng dashboard na binubuo ng mga input ng Lyra at mga naaalis na chip, na may mga estado ng pag-reset at paglo-load.
Menu — Inline na semantic na menu ng mga action item na may roving focus at nested submenus.
item sa menu — Isang hilera ng pagkilos para sa isang menu, na may opsyonal na icon, checkbox, o mapanirang istilo.
Item na puwedeng ayusin muli — Isang row sa loob ng isang listahan ng muling pagkakaayos, pagpapares ng mga move-up/move-down na button na may arbitrary na slotted na content.
Listahang puwedeng ayusin muli — Generic na reorderable na listahan ng mga row, inilipat sa pamamagitan ng mga per-row na button o isang Ctrl/Cmd+Arrow shortcut.
Label ng menu — Nagdaragdag ng hindi interactive na heading ng seksyon sa pangkat na nauugnay na mga item sa loob ng isang listahan ng menu.
Menubar — Pahalang na application menubar ng mga pinamagatang dropdown na menu na may ganap na nabigasyon sa keyboard.
item sa menubar — Isang top-level na pamagat ng menubar na nagbubukas sa slotted na menu nito o nagsisilbing simpleng pagkilos.
Menu ng nabigasyon — Navigation menu sa header na may mga link at nabubuksang panel; nagiging compact menu sa makitid na espasyo.
Item sa menu ng nabigasyon — Isang entry sa navigation menu: isang page link, o isang disclosure button na nagbubukas ng flyout panel.
Pahina — Application shell na may navigation na lumilipat mula desktop column tungo sa mobile modal panel ayon sa available na espasyo.
Responsive panel — Docks content inline sa desktop o ipinapakita ito bilang isang overlay sheet sa mobile
Scroller — Responsive overflow surface na may opsyonal na nakaraan/susunod na mga kontrol para sa mga row ng card at tab.
Segmented — Single-select button row para sa pagpili ng isa sa ilang may label na opsyon sa isang sulyap.
Multi-split panel — Hinahati ang isang dashboard sa mga drag-resizable na panel na may opsyonal na tumutugon na pagbagsak.
Split panel — Hinahati ang content sa dalawang drag-resizable na pane na may iisang divider, isang mas simpleng alternatibo sa multi-panel lr-multi-split.
Stepper — Ginagabayan ang mga user sa pamamagitan ng inayos na multi-step na wizard na may katayuan sa bawat hakbang at click-to-jump.
Grupo ng tab — Grupo ng tab na nagpapakita ng isang Light DOM panel sa bawat pagkakataon, may buong keyboard support.
Tab — Tab na compatible sa Web Awesome at Shoelace at itinatambal sa panel sa tab group.
Tab panel — Tab panel na compatible sa Web Awesome at Shoelace at itinatambal sa tab sa tab group.
Virtual na listahan — Windowed list host na nag-render lamang ng mga on-screen na row para sa malalaking scroll na koleksyon
Widget — May pamagat na panel shell na may opsyonal na pag-collapse at fullscreen-expand toggle

Mga Overlay at Feedback

Notification — Notification area na nagsasalansan ng mga mensahe sa sulok ng screen.
Item ng notification — Isang notification na maaaring isara, may status color, opsyonal na icon at auto-dismiss timer.
Chip — Maliit na label para sa tag, filter o saklaw; puwedeng alisin o i-toggle.
Grupo ng chip — Binabalot ang isang hanay ng mga chip na may opsyonal na +N overflow toggle kapag lumampas ang mga ito sa limitasyon.
Alerto — Alertong sarado bilang default, may auto-hide at opsyong ipakita sa notification stack.
Badge — Compact status label para sa pagbibigay ng senyas ng estado, mga bilang, o mga kategorya na inline
Callout — Inline na mensahe sa ibabaw para sa status, babala, at nilalaman ng error, na idi-dismiss.
Menu ng konteksto — Ginagawang right-click, matagal, o Shift+F10 na target ang anumang rehiyon na nagbubukas ng action menu.
Dialog — Focus-trap modal overlay para sa mga kumpirmasyon, form, at iba pang nakakagambalang gawain.
drawer — I-slide ang isang modal panel mula sa anumang gilid ng viewport para sa mga filter o mga kontrol sa konteksto.
Dropdown — Menu-role popover na nag-aangkla ng isang listahan ng pagkilos sa trigger na pagmamay-ari ng consumer
Walang laman na estado — Nakikipag-ugnayan sa isang walang laman o walang data na estado na may icon, mensahe, at mga opsyonal na pagkilos.
Kbd — Ipinapakita ang keyboard shortcut bilang keycaps ayon sa platform.
Popover — Floating panel na nabubuksan sa pag-click at nagsasara kapag nag-click sa labas.
Popup — Low-level anchored-positioning primitive na nagpapanatili sa isang lumulutang na panel na nakahanay sa anchor nito, ang parehong engine na pinagbabatayan ng popover at mga bahagi ng tooltip.
Progress bar — Pahalang na progress indicator na may tiyak na value o indeterminate state.
Progress ring — Pabilog na progress indicator na may tiyak na value o indeterminate state.
Rating — Star rating na naa-access sa keyboard na may fractional-precision partial fill
Skeleton — Ang animated na placeholder sa paglo-load ay nakatayo para sa nilalaman habang naglo-load ito.
Spinner — Nagsenyas ng isang patuloy na gawain sa background na may hindi tiyak, animated na abala na tagapagpahiwatig.
Tag — Semantic alias ng badge treatment para sa pag-label ng mga keyword o kategorya
Tooltip — Mag-hover at naka-focus na tooltip na naglalarawan ng trigger na pagmamay-ari ng consumer

Mga Viewer ng Dokumento at File

Archive viewer — Naglilista ng mga pangalan ng file at hindi naka-compress na laki sa loob ng ZIP archive nang hindi kumukuha ng mga nilalaman.
Viewer ng kalendaryo — Pinag-parse at nire-render ang mga kaganapan ng .ics calendar file bilang mga buod, oras, at lokasyon.
Viewer ng contact — Malinaw na ipinapakita ang detalye ng contact.
CSV viewer — Kumukuha ng CSV file at nire-render ang mga row nito sa isang virtualized, scrollable sheet.
Dataset viewer — Naglo-load ng delimited text at ipinapakita ito bilang typed, accessible na data table.
Paghahambing ng dokumento — Magkatabi o inline na paghahambing ng dalawang bersyon ng dokumento, na pinagsasama ang isang textual diff view sa mga nai-render na preview ng dokumento.
Preview ng dokumento — Nagpreview ng dokumento o attachment inline batay sa uri ng MIME, na may fallback sa pag-download.
Tagatingin ng dokumento — Nagpapakita ng isang dokumento sa isang dialog na may isang pluggable na MIME-type renderer registry.
DOCX viewer — Ipinapakita ang DOCX bilang ligtas na semantic HTML gamit ang Mammoth library.
E-book viewer — Nagre-render ng EPUB na may nabigasyon ng kabanata gamit ang opsyonal na epub.js peer.
Email viewer — Nag-parse at nag-render ng .eml na mensahe na may mga header, sanitized na katawan, at mga attachment.
GeoJSON viewer — Kinukuha, pinapatunayan, at nire-render ang mga feature ng GeoJSON file sa isang mapa.
Layer ng highlight — Overlay na nagpinta ng mga naa-activate na highlight na parihaba sa nakaposisyong nilalaman ng dokumento.
HTML viewer — Kumukuha ng URL at ligtas na nai-render ang HTML nito pagkatapos itong i-sanitize.
Naka-embed na nilalaman — Kumukuha ng HTML fragment at inilalagay ito bilang ligtas na Light DOM content.
Notebook viewer — Read-only na Jupyter Notebook viewer para sa Markdown, code at rich output cell.
Rail ng preview ng pahina — Patayong rail ng page thumbnail para mag-navigate sa multi-page na dokumento.
PDF viewer — Kinukuha at nire-render ang mga PDF page na may zoom, pagination, at isang mapipiling text layer
PPTX viewer — Best-effort client-side viewer para sa PowerPoint PPTX presentations.
Spreadsheet viewer — Kinukuha at nire-render ang mga .xlsx at legacy na .xls na workbook na may mga sheet na tab at virtualized na row.
SVG viewer — Kumukuha at ligtas na nagpapakita ng inline SVG document mula sa URL.
XML viewer — Collapsible, copyable tree view para sa pag-inspeksyon ng mga XML na dokumento.

Media at Mga File

Attachment chip — Compact chip para sa isang file na naka-attach sa isang mensahe, na may katayuan sa pag-upload, progreso, at subukang muli.
Avatar — Maliit na marker ng pagkakakilanlan na nagpapakita ng icon, larawan, o inisyal na fallback para sa isang tao o entity
Animated na imahe — Nagpe-play ng GIF, APNG o WebP animation na may pause control na gumagalang sa motion preference ng user.
Animasyon — Deklaratibong bini-animate ang isang slotted na bata gamit ang mga pinangalanang preset o custom na keyframe.
Button ng attachment — Attachment button sa message field na nagbubukas ng file picker o action menu.
AV player — Audio/video player na may naka-sync na cue transcript, waveform, at kontrol sa rate ng pag-playback.
Avatar group — Isinalansan ang mga nag-o-overlap na avatar sa isang compact na row na nagko-collapse ng mga extra sa isang +N badge
Drop zone — I-drag-and-drop wrapper na ginagawang file-drop target ang anumang rehiyon nang walang sariling tagapili ng file.
Icon ng file — Naresolba ang naka-localize na file-type na badge mula sa uri ng MIME o filename.
Pag-input ng file — I-drag-and-drop at i-click-to-browse ang dropzone na naglalabas ng mga napiling file.
Bandila — Ang flag ng bansa o wika ay nai-render sa isang themeable, opsyonal na pabilog na frame.
Paghahambing ng Larawan — I-slide ang isang divider na naa-access sa keyboard upang ihambing ang bago at pagkatapos ng mga ibabaw nang magkatabi.
Viewer ng imahe — Full pan/zoom raster-image viewer na may label na mga highlight ng rehiyon at opsyonal na anotasyon.
Lightbox — Full-screen modal image viewer na may prev/next navigation at zoom
Mapa — MapLibre GL map na may legend, colored region at marker.
Media card — Inline na preview para sa isang larawan, video, o attachment ng file sa loob ng isang mensahe sa chat.
Pan at zoom — Nai-scroll na viewport para sa pag-pan at pag-zoom sa mga slotted na content o isang larawan sa isang bounded zoom level.
Pag-playback ng pagkakasunud-sunod — I-play/i-pause ang transportasyon na humahakbang sa isang index sa isang hanay sa isang nakapirming timer.
QR code — Ine-encode ang anumang value bilang isang na-scan na simbolo ng QR code na nai-render sa canvas.
Video — Inline na video player na may mga custom na kontrol, mga mapipiling caption, at mga preview ng thumbnail.
Playlist ng video — Nagpe-play ng pagkakasunud-sunod ng mga video sa isang navigable na playlist, awtomatikong umuusad habang natatapos ang bawat isa.
Na-zoom na frame — Hiwalay na iframe preview na may zoom control; gamitin ang lr-pan-zoom para sa pan-and-zoom ng nilalaman o imahe.

Utility

Intersection Observer — Nagpapalabas ng mga native na intersection entry habang pumapasok o umaalis sa viewport ang mga naka-slot na target.
Mutation Observer — Minamanmanan ang pagbabago ng element at attribute sa nilalaman at ipinapasa ang native mutation record.
Resize Observer — Minamanmanan ang pagbabago ng laki ng element at ipinapasa ang native resize record nang walang visual na UI.
Pindutan ng kopya — Icon-only na button na kumukopya ng text value sa clipboard na may checkmark na feedback.
Diff view — Nagre-render ng totoong two-string line diff bilang color-coded unified-diff output.
Divider — Themeable semantic separator para sa paghahati ng content nang pahalang o patayo.
Button ng pag-export — I-download ang data ng talahanayan bilang CSV o JSON, isang format o sa pamamagitan ng menu ng format.
Pag-format ng byte — Locale-aware byte-size na pag-format na may adjustable unit step at precision.
Pag-format ng petsa — Locale-aware na petsa at oras na pag-format sa pamamagitan ng Intl.DateTimeFormat.
Pag-format ng numero — Locale-aware na numero, currency at compact na pag-format sa pamamagitan ng Intl.NumberFormat.
Icon — Nagre-render ng mga malulutong na inline na SVG glyph mula sa built-in na pinangalanang path set na may zero dependencies.
JSON viewer — Nako-collapse, nakokopya na tree view para sa pag-inspeksyon ng anumang JSON payload
Tiyak na petsa — Input na may araw, buwan at taon para sa petsang alam na ng user.
Live na rehiyon — Biswal na nakatago sa ARIA na live na rehiyon na nag-throttle sa mga anunsyo ng screen-reader
Popover ng pagbanggit — Caret-anchored autocomplete para sa @-mentions at slash-commands sa isang text field.
Katayuan ng regular na pag-update — Ipinapakita ang oras hanggang sa susunod na naka-iskedyul na update, may pause at resume control.
Random na nilalaman — Salit-salitang ipinapakita ang opsyonal na nilalaman nang random o sunod-sunod, halimbawa para sa A/B copy.
Relatibong oras — Ipinapakita ang relatibong oras ayon sa wika at rehiyon at awtomatikong nag-a-update.
Paglilibot — Step-by-step na product tour na may highlight para sa bagong user.
Biswal na nakatago — Itinatago ang nilalaman nang biswal habang pinananatiling available ito sa mga screen reader, na nagiging nakikitang muli sa pagtutok.