Усі компоненти

Ознайомтеся з усіма 308 компонентами Lyra UI. Фільтруйте за сімейством, шукайте за назвою, пробуйте інтерактивні приклади або відкривайте приклади з документації.

Розмови й чати

Робоча область агента — Адаптивний контейнер інтерфейсу ШІ, що об'єднує переписку, поле введення повідомлення та необов'язкові панелі з даними про запуск, інструменти, пошук, підтвердження та контекст.
Візуалізація голосу — Показує активність голосу на canvas у станах агента: очікування, прослуховування, роздуми та мовлення.
Вибір гілки — Керована навігація «‹ n / m ›» по повторно створених або відредагованих варіантах одного повідомлення чату.
Поле введення повідомлення — Поле введення повідомлення чату з автоматичною зміною висоти та вбудованими кнопками надсилання й зупинки.
Повідомлення чату — Контейнер повідомлення з оформленням за роллю, аватаром, значками та нижньою панеллю стану.
Область переписки — Прокручуваний контейнер переписки з автоматичним переходом до нових повідомлень, кнопкою переходу вниз та розділювачем неперечитаного.
Контрольна точка — Вбудована точка відновлення переписки з діями підтвердження та повернення до більш раннього стану.
Блок коду — Показує блок коду з завантажуваним за потребою підсвічуванням синтаксису та кнопкою копіювання.
Базовий блок коду — Показує блок коду з мінімальними залежностями та підсвічуванням лише за картою граматик, наданою при збірці.
Елемент розмови — Рядок історії чату з можливістю вибору, назвою сеансу, попереднім переглядом і часом.
Показники генерації — Показує час, кількість токенів та швидкість під час потокової відповіді ШІ.
Роздільник передачі управління — Позначає у переписці передачу управління від одного агента іншому.
Markdown — Безпечно відображає Markdown як HTML з таблицями GFM, кодом та посиланнями.
Базовий Markdown — Відображає Markdown, підсвічуючи блоки коду лише за картою граматик, наданою при збірці.
Дії з повідомленням — Панель дій для кожного повідомлення чату: копіювання, повторна генерація, редагування та зворотний зв'язок.
Відгук про повідомлення — Оцінка відповіді асистента «подобається» чи «не подобається» з необов'язковою причиною та коментарем.
Вибір моделі — Вибір постачальника та моделі з фіксованого каталогу або з введенням власної назви.
Панель налаштувань моделі — Об’єднує вибір моделі та повзунок температури для налаштування агента.
Кнопка розмови — Керує повним циклом роботи мікрофона: запитом дозволу, записом та зупинкою. Підтримує утримання кнопки або перемикання.
Стан потоку — Показує етап потокового з'єднання та виявляє зависання з урахуванням контрольних сигналів.
Потоковий текст — Поступово відображає потокову відповідь асистента, об'єднуючи швидкі оновлення токенів.
Базовий потоковий текст — Легкий компонент потокового тексту, який у режимі Markdown підсвічує блоки коду лише за картою граматик, наданою при збірці.
Підказки для відповіді — Прокручуваний ряд початкових або наступних підказок, що передає вибраний текст застосунку.
Список чатів — Бічна панель із групуванням та пошуком чатів і діями закріплення, архівування, видалення та перейменування.
Потік транскрипції — Показує живе транскрибування голосової сесії, замінює попередній текст остаточним та автоматично прокручує вниз.
Індикатор набору тексту — Показує, що помічник зараз складає відповідь.
Показники використання — Компактна зведення токенів, вартості та затримки повідомлення чи сеансу з деталями у спливаючій підказці.
Вибір голосу — Вибирає голос синтезу мовлення зі списку, що надається, з вбудованим прослуховуванням та обробкою застарілих значень.
Відображення віджетів — Відображає потокове дерево віджетів JSON, надане агентом, через реєстр дозволених типів компонентів.
Частини повідомлення — Відображає упорядковані частини повідомлення ШІ: текст, міркування, інструменти, цитати, вкладення та медіа.
Поле введення запиту — Об'єднує введення запиту з вкладеннями, вибором моделі та голосу, джерелами пошуку, згадками, командами та чергою реплік.
Черга запитів — Керує чергою наступних запитів, які можна редагувати, міняти місцями, видаляти або надсилати одразу.
Сеанс реального часу — Панель голосового сеансу, незалежна від постачальника, з керуванням з'єднанням, активністю, транскрипцією, записом, вимкненням звуку та перериванням.
Панель виділення — Показує дії «запитати», «цитувати», «взяти у лапки» та «копіювати» біля виділеного тексту, зберігаючи його прив'язку до документа.

Інструменти агентів і спостережуваність

Журнал активності — Додає дії агента по мірі надходження та після завершення згортає їх у звіт виконаних кроків.
Панель оцінки агента — Зведення керованої оцінки з картками показників, графіком тренду та історією стану кожного запуску.
Запитання агента — Збирає структуровану відповідь на запитання агента або сервера MCP з діями прийняття, відмови та скасування.
Фонові запуски — Показує завдання агентів, якими керує застосунок: очікувані, виконувані та завершені, із запитами відкриття або скасування.
Індикатор бюджету — Показує надане значення використання відносно ліміту, включно з випадками відсутності даних або перевищення ліміту.
Перегляд змін — Показує зміни файлів, надані застосунком, та запитує рішення зберегти чи відхилити кожен фрагмент.
Керування конекторами — Показує стан підключення та запитує підключення, від’єднання або повторну спробу для конекторів, якими керує застосунок.
Запит дозволу — Показує запит дозволу з заданою областю дії та передає застосунку рішення користувача дозволити чи відмовити.
Правила дозволів — Показує правила дозволів, задані застосунком, та запитує зміну рішення: дозволити, запитувати чи відмовити.
Запуск агента — Основна панель одного запуску агента зі статусом, пройденим часом, поточним кроком та вартістю, а також діями скасування та повтору.
Трасування агента — Ієрархічний перегляд трасування агента або LLM з фільтрами за типами сегментів та швидкими переходами між етапами передачі керування.
Черга погодження — Черга очікуваних викликів інструментів з керуванням з клавіатури. Кожен виклик можна перевірити, дозволити чи відхилити у загальному діалоговому вікні.
Панель артефакту — Показує створений агентом артефакт з перемиканням попереднього перегляду та коду, навігацією по версіях та діями копіювання й завантаження.
Вікно браузера — Показує імітацію браузера агента з потоком скріншотів, URL лише для читання та керуванням передачею керування.
Картка коміту — Коротка звідка коміту зі статистикою змін та списком змінених файлів із посиланнями на порівняння.
Панель порівняння — Порівнює два результати поруч із голосуванням за кращий для оцінки моделей у форматі арени.
Панель підтвердження — Вбудована немодальна панель для прийняття чи відхилення дії агента прямо у переписці.
Перегляд контексту — Показує сегменти контексту виклику моделі з приблизною кількістю токенів, цитатами, позначками редагування та кнопками копіювання й експорту.
Набір для оцінки — Список прикладів оцінки з фільтрами, тегами та діями додавання, видалення, імпорту та експорту.
Результат оцінки — Панель оцінки за критеріями та ручної перевірки для порівняння запусків одного прикладу.
Запуск оцінки — Показує хід пакетної оцінки в реальному часі: загальний прогрес та розкривані відомості по кожному прикладу, включаючи обґрунтування та трасування інструментів.
Зведення політик — Список рішень щодо правил безпеки, дозволів, конфіденційності та політик інструментів лише для читання з поясненнями «дозволено», «заборонено» або «потребує перевірки».
Часова діаграма трасування — Показує сегменти трасування агента як горизонтальні смуги на загальній часовій шкалі з кольором за станом.
Трасування стека — Розбирає трасування стека JavaScript, TypeScript, браузера та Python на активні кадри з можливістю згорнути внутрішні кадри.
Список завдань — Оновлюваний розкривний план агента зі статусом кожного кроку та вкладеними підзавданнями.
Термінал — Консоль ANSI лише для читання з потоковим виведенням агента чи інструменту, пошуком та автоматичним утриманням нижньої частини у полі зору.
Результати тестів — Зведення успішних та невдалих тестів зі злічитлями по станах, фільтрами та автоматично розкривними деталями помилок.
Панель міркувань — Розкривна панель міркувань агента ШІ в реальному часі або після завершення перевірки.
Підтвердження виклику інструменту — Діалог для перевірки, дозволу, відхилення чи зміни запропонованого виклику інструменту до виконання.
Блок виклику інструменту — Розкривний блок одного виклику інструменту агента з аргументами, помилкою та результатом.
Мітка виклику інструменту — Компактна вбудована мітка з назвою, станом та тривалістю одного виклику інструменту агента.
Форма параметрів інструменту — Створює редагована форму з плоської JSON Schema інструменту для налаштування аргументів виклику.
Результат інструменту — Модальне вікно зі статусом виклику інструменту, тривалістю та повним результатом.
Перегляд результату інструменту — Показує результат виклику інструменту за допомогою зареєстрованого засобу відображення або, якщо його немає, у форматі JSON.
Вибір інструменту — Діалог із пошуком та групуванням за категоріями для вибору доступних інструментів агента.
Потік викликів інструментів — Хронологічний список викликів інструментів агента з кількістю повторних спроб, ручним підтвердженням та приховуванням конфіденційних полів.
Дерево трасування — Розкривана ієрархія трасування агента чи LLM з тривалістю та необов'язковими стовпцями токенів та вартості.
Картка результату — Картка з рамкою, що надає користувацькому відображенню результату вигляд невеликої картки.
Поле результату — Компактний рядок «підпис — значення» для карток результатів інструменту та щільних списків метаданих.
Застосунок MCP — Запускає ресурс застосунку MCP в ізольованому середовищі та передає запити до застосунку як типізовані події.
Студія запитів — Робоча область, незалежна від постачальника, для редагування, попереднього перегляду, версій, збереження та запуску структурованих запитів.
Перегляд схеми JSON — Показує дерево JSON Schema з можливістю вибору, обмеженнями, обов'язковими полями, гілками композиції та помилками валідації.
Панель подагентів — Показує керовану ієрархію запусків подагентів зі статусом, завданням, моделлю, прогресом та діями керування життєвим циклом.

Пошук і графи знань

Картка спільноти — Зведена картка спільноти графа знань із тегами учасників та переходом до деталей.
Перегляд ембеддингів — Доступна двовимірна діаграма координат ембеддингів, наданих застосунком, з необов'язковим забарвленням кластерів та вибором точок.
Картка сутності — Картка сутності графа знань із значком типу, властивостями, числом зв'язків та дією для фокусування на ній у графі.
Згадка сутності — Вбудована згадка сутності в тексті агента зі спливаючим попереднім переглядом при наведенні або фокусі.
Досьє сутності — Детальна картка сутності з заголовком, показником впевненості та вкладками зв'язків, що підтверджують фрагменти та походження даних.
Граф — Показує зв'язки між вузлами у вигляді силової діаграми, яку можна переміщувати та масштабувати.
Легенда графа — Легенда типів вузлів зв'язаного графа, яка також слугує фільтром видимості.
Черга завантаження документів — Керуваний список документів у конвеєрі завантаження з етапами, прогресом, лічильниками та запитами повторної спроби чи скасування.
База знань — Список джерел бази знань для пошуку зі статусом синхронізації, станом індексації, дозволами та діями керування для кожного рядка.
Керування базою знань — Панель із вкладками, що об'єднує джерела бази знань та чергу завантаження документів і передає дії керування застосуванню.
Перегляд графа знань — Інтерфейс для вивчення графа знань із відображенням графа, пошуком сутностей, фільтрами типів, розкриттям сусідніх вузлів та пошуком шляхів.
Інтелект-карта — Радіальне розкривне дерево тем для перегляду ієрархії та переходу до деталей теми.
Список сусідніх вузлів — Список зв'язків однієї сутності з діями переходу та розкриття в графі для кожного рядка.
Палітра вузлів — Бібліотека вузлів із пошуком та категоріями для перетягування або розміщення вузлів на полотні процесу.
Стрічка шляху — Компактна прокручувана ланка «вузол — зв'язок — вузол», що відображає шлях міркування GraphRAG.
Перегляд фрагментів — Ранжований список знайдених фрагментів RAG з індикаторами релевантності та посиланнями на місця у переглядачі документів.
Значок цитати — Вбудований маркер цитати [n] з попереднім переглядом при наведенні та кольором за впевненістю чи результатом перевірки.
Зведення підтверджень — Показує оцінку підтвердження тверджень: кількість свідчень, охоплення цитатами, ступінь впевненості, попередження та посилання на докази.
Панель пам'яті — Показує робочу пам'ять агента для короткочасної контексту та довготривалих відомостей, а також дії з перевіркою впевненості та підтвердженням.
Панель походження даних — Показує підстави відповіді у розкриваній структурі сутностей, зв'язків, спільнот та фрагментів.
Відповідь RAG — Показує відповідь на основі наданих джерел із безпечним Markdown, значками цитат, оцінкою підтвердженості та розкривним попереднім переглядом джерел.
Хід дослідження — Показує надані застосунком етапи дослідження, кількість джерел та загальний прогрес.
Результати пошуку — Ранжований список знайдених фрагментів з усуненням дублікатів, групуванням за джерелами, вибором та компактним або детальним режимом перегляду.
Пошук інформації — Поле запиту для пошуку або RAG з фільтрами та областями пошуку, вибором векторного, текстового чи гібридного режиму та відображенням стану.
Трасування пошуку — Стрічка етапів пошукового конвеєра з розкриваними відомостями про переформулювання запиту, побудову ембеддінгів, пошук, повторне ранжування та фільтрацію.
Картка джерела — Показує запис цитати з назвою джерела, номером сторінки, витягом та розкриваним повним текстом.
Список джерел — Розкривна панель, що об'єднує картки джерел повідомлення чату під одним заголовком.
Вибір джерел — Дерево прапорців для обмеження джерел наступної відповіді з трьома станами папок, вибором усіх та пошуком.
Підтвердження тверджень — Перевіряє згенеровані твердження за цитатами, показуючи наявність підтвердження, впевненість та докази.
Панель оцінки RAG — Показує метрики якості RAG, тренди, зрізи оцінки та історію запусків за результатами, розрахованими застосунком.
Порівняння пошуку — Порівнює поруч ранжовані результати пошуку та повторного ранжування з аналізом перетинів та оцінок.

Форми й поля введення

Кнопка — Кнопка дії зі стилями на основі дизайн-токенів, варіантами тону та розміру, а також станом завантаження.
Флажок — Логічний елемент форми з позначеними, не позначеними та невизначеними станами.
Група прапорців — Об’єднує пов’язані прапорці в одне поле форми з вибором кількох значень і перевіркою.
Редактор коду — Багаторядкове поле редагування коду без залежностей з необов'язковою колонкою номерів рядків.
Вибір кольору — Нативне поле вибору кольору, пов'язане з формою, з підписом, підказкою та повідомленнями про помилки валідації.
Комбобокс — Вибір одного або кількох значень з фільтрацією: текстове поле та випадаючий список варіантів.
Поле дати — Поле дати зі спливаючим календарем та значенням у форматі ISO-8601.
Вибір дати — Вбудований календар із сіткою місяця для вибору дати або діапазону дат.
Вибір емодзі — Поле вибору емодзі з пошуком та керуванням з клавіатури, пов'язане з формою.
Кнопка зі значком — Компактна доступна кнопка дії, що містить лише значок.
Поле вводу — Однорядкове текстове поле з необов'язковою підказкою, підказкою та повідомленнями про помилки валідації.
Вибір країни — Вибирає коди країн і територій із перекладеними назвами, прапорами та необов’язковим пошуком.
Вибір валюти — Вибирає коди валют із перекладеними назвами, символами та необов’язковим пошуком.
Вибір часового поясу — Вибирає ідентифікатори часових поясів з упорядкованого списку з необов’язковим пошуком.
Вибір одиниці — Вибирає одиниці вимірювання з перекладеними назвами, символами та необов’язковим пошуком.
Вибір локалі — Випадаючий список для перемикання поточної локалі з закритого набору, наданого реєстром локалей бібліотеки.
Числове поле — Поле вводу числа з мінімальним та максимальним значенням, кроком та нативною перевіркою обмежень.
Варіант вибору — Варіант, який передає значення, підпис, групу та стан комбінованому полю.
Поле телефону — Поле номера телефону з урахуванням країни та значенням форми у канонічному форматі E.164.
Радіокнопка — Елемент форми для вибору одного варіанта з групи.
Група радіокнопок — Група радіокнопок з підписом та керуванням з клавіатури для вибору одного варіанту.
Форма оцінювання за критеріями — Налаштовувана форма оцінювання з критеріями, категоріями та коментарями, яка дає змогу надіслати результат і перейти до наступного елемента черги.
Список вибору — Випадаючий список для вибору одного значення з фіксованого набору.
Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
Повзунок — Керування числовим діапазоном, наприклад температурою LLM або гучністю.
Вибір зразка кольору — Вибір одного кольору з невеликого фіксованого набору зразків із вбудованою семантикою групи радіокнопок.
Перемикач — Перемикач, пов'язаний з формою, з нативною семантикою увімкнення та вимкнення.
Текстова область — Багаторядкове поле звичайного тексту з автоматичним збільшенням висоти, перевіркою та оформленням елемента форми.
Поле введення часу — Сегментоване поле часу з урахуванням локалі та випадаючим списком значень по стовпцях. Для нативного браузерного вибору часу використовуйте lr-native-time-input.
Діапазон часу — Повзунок з двома повзунками для вибору початку та кінця інтервалу на числовій шкалі.
Перемикач — Кнопка з двома станами, яка сама вмикає та вимикає параметр з семантикою aria-pressed.
Група перемикачів — Об'єднує перемикачі в один пункт табуляції з множинним вибором або вибором одного варіанту з можливістю скидання.
Нативне поле часу — Браузерне поле вибору часу з підписом, підказкою та повідомленнями про помилки Lyra, коли нативний вибір є кращим за сегментоване lr-time-input.
Поле одноразового коду — Сегментоване поле для одноразового перевірного коду з вбудованим автозаповненням із SMS.
Кнопка вибору — Елемент одиночного вибору у вигляді кнопки, а не кола; зазвичай об'єднується з lr-radio-group у сегментований перемикач.
Поле введення тегів — Поле, пов'язане з формою, для списку видаляних тегів, наприклад тегів чи отримувачів.

Відображення даних

Конструктор запитів до графа — Редактор типізованих запитів зв'язків або шляхів у графі, пов'язаний з формою, з вихідними сутностями, фільтрами типів, обмеженнями довжини шляху та збереженими запитами.
Календар — Адаптивний календар місяця з позначками подій і розкладом, доступним із клавіатури.
Індикатор контексту — Сегментований індикатор у вигляді смуги чи кільця для бюджету токенів або контекстного вікна.
Бібліотека документів — Каталог документів із пошуком та фільтрами, версіями, тегами, власниками, актуальністю, сортуванням та масовим вибором.
Список змінних середовища — Прихований список змінних середовища та секретів у вигляді пар «ключ — значення» з розкриттям та копіюванням окремих рядків.
Дерево файлів — Готовий файловий провідник на основі компонента дерева зі значками стану git та відкладеним завантаженням папок.
Полотно процесу — Полотно з переміщенням та масштабуванням для побудови та запуску візуальних процесів у вигляді спрямованих ациклічних графів.
Керування процесом — Група кнопок масштабування, підгонки та блокування для пов'язаного полотна процесу.
Міні-карта процесу — Оглядова карта в куті з перетягуваним прямокутником області перегляду для пов'язаного полотна процесу.
Вузол процесу — Картка вузла процесу з заголовком, кольоровим позначенням статусу та точками з'єднання на полотні процесу.
Стан виконання процесу — Накладає індикатори стану виконання на полотно процесу та показує компактну зведену інформацію етапів.
Воронка — Показує зменшення конверсії на кожному етапі стовпчиками, нормалізованими відносно першого етапу.
Індикатор — Показує одне значення на радіальному, кільцевому або лінійному індикаторі.
Теплова карта — Відображає матрицю або календарну сітку значень як теплову карту на canvas з урахуванням зміни розміру.
Посторінна навігація — Керувана навігація по сторінках із полем переходу до номера сторінки та зведенням діапазону елементів.
Конструктор умов — Конструктор структурованих запитів до табличних даних з умовами «поле — оператор — значення» та об'єднанням через І або АБО.
Смуга послідовності — Компактна смуга для кожного елемента, що показує послідовність категоріальних станів кольоровими комірками та необов'язковою позначкою.
Мініграфік — Будує компактний вбудований SVG-графік тренду: лінійний, із заповненням або стовпчастий.
Показник — Показує один ключовий показник з одиницею вимірювання, позначкою тренду, додатковими рядками та необов'язковим мініграфіком.
Таблиця — Показує дані в таблиці із сортуванням заголовків, вибором, фільтрами й поділом на сторінки.
Хронологія — Зв'язана послідовність минулих подій для журналів аудиту, історії агентів та списків змін.
Елемент хронології — Одна подія на хронології з кольоровою позначкою, заголовком, часом і описом.
Дерево — Ієрархія, яку можна розгортати й згортати, для навігації графами, документами або файлами.
Елемент дерева — Рекурсивно відображає один вузол дерева та його дочірні елементи.
Хмара слів — Показує хмару слів у SVG без залежностей, змінюючи розмір кожного слова залежно від його ваги.
Сітка даних — Віртуалізована сітка для великих або серверних наборів даних зі вбудованим сортуванням, фільтрацією, групуванням, пагінацією та вибором.

Діаграми

Стовпчаста діаграма — Порівнює значення категорій вертикальними або горизонтальними стовпчиками.
Діаграма «ящик з вусами» — Показує розподіл за попередньо розрахованим набором із п'яти статистичних показників.
Бульбашкова діаграма — Показує три виміри кожної точки за допомогою координат X та Y і радіуса бульбашки.
Діаграма — Основна обгортка Chart.js для лінійних, стовпчастих, кругових та інших діаграм.
Кільцева діаграма — Показує частки цілого сегментами кільця.
Гістограма розподілу — Об'єднує числові значення в інтервали однакової ширини, щоб показати розподіл.
Лінійна діаграма — Показує тенденції вздовж неперервної осі однією чи кількома з’єднаними серіями.
Легка діаграма — Лінійна або стовпчаста діаграма на чистому SVG без залежностей від Chart.js.
Кругова діаграма — Показує частку кожної категорії від цілого у вигляді секторів кола.
Полярна діаграма — Показує кожну категорію сектором, розмір якого відповідає значенню.
Радарна діаграма — Порівнює кілька показників одного ряду даних на радіальній сітці.
Діаграма розсіювання — Показує пари вихідних координат X та Y на лінійних осях.

Компонування й навігація

Акордеон — Керує групою розкривних панелей і за потреби дозволяє відкрити кілька одночасно.
Елемент акордеона — Розкривна панель для розміщення в групі акордеона.
Панель навігації застосунку — Адаптивна панель навігації: повний вигляд, лише значки або накладання на мобільному екрані.
Група панелі навігації — Розділ із заголовком для групування пунктів панелі навігації, який за необхідності можна згорнути.
Пункт панелі навігації — Пункт панелі навігації застосунку із значком та підписом; у згорнутому стані залишається лише значок.
Навігаційна нитка — Адаптивна нитка, що показує розташування користувача в ієрархії сторінки.
Елемент навігаційної нитки — Одне посилання або підпис поточної сторінки в навігаційній нитці.
Група кнопок — Об’єднує пов’язані кнопки дій в одну адаптивну групу з підписом.
Картка — Панель вмісту з рамкою та слотами для заголовка, медіа, нижньої частини й дій.
Карусель — Доступна карусель, яка показує один слайд за раз і підтримує клавіатуру, індикатори, повторення й автоматичне відтворення.
Елемент каруселі — Необов'язкова семантична обгортка слайда, яка однорідно оформлює дочірній елемент каруселі.
Палітра команд — Меню команд застосунку з пошуком, навігацією з клавіатури й гарячими клавішами.
Група елементів керування — Збирає різні поля форми та кнопки дій в одну адаптивну рядку з вирівнюванням по центру.
Сітка панелі показників — Адаптивна сітка віджетів з керуванням з клавіатури, яка розміщує елементи та надсилає запити на переміщення, зміну розміру та обробку перетинів.
Деталі — Доступна розкривна панель, яка показує вміст під заголовком.
Прикріплена панель — Панель зі змінним розміром, яку можна згортати й прикріпити до краю поточного макета.
Панель деталей — Керування навігацією від діаграми чи таблиці до пов'язаних доказів, документів, сутностей чи запусків агентів з навігаційним ланцюжком.
Елемент випадного меню — Сумісний із Web Awesome псевдонім одного пункту дії у випадному меню.
Панель фільтрів — Рядок фільтрів панелі показників з полів Lyra та знімних міток із станами скидання та завантаження.
Меню — Семантичне меню дій з переміщуваним фокусом та вкладеними підменю.
Елемент меню — Один пункт дії в меню з необов’язковим значком, прапорцем або стилем видалення.
Елемент для зміни порядку — Рядок списку, який поєднує кнопки переміщення вгору й униз із довільним вмістом слотів.
Список зі зміною порядку — Список, елементи якого можна переставляти кнопками в рядках або сполученням Ctrl/Cmd+стрілка.
Заголовок меню — Додає неінтерактивний заголовок розділу для групування пов’язаних пунктів меню.
Рядок меню — Горизонтальний рядок меню застосунку з випадними меню й повним керуванням із клавіатури.
Елемент рядка меню — Пункт верхнього рівня, який відкриває вкладене меню або виконує дію за замовчуванням.
Навігаційне меню — Навігація в заголовку сайту з посиланнями й випадними панелями, яка ховається за кнопкою меню, коли бракує місця.
Елемент навігаційного меню — Посилання на сторінку або кнопка, що відкриває випадну панель навігаційного меню.
Сторінка — Семантичний контейнер застосунку, в якому навігація перемикається між бічною колонкою та модальною висувною панеллю залежно від доступної ширини.
Адаптивна панель — Показує вміст у потоці сторінки на широкому екрані та як висувна панель поверх сторінки на вузькому.
Прокручуваний контейнер — Адаптивна область прокрутки з необов'язковими кнопками «назад» та «вперед» для рядів карток та вкладок.
Сегментований перемикач — Ряд кнопок для швидкого вибору одного з кількох варіантів.
Розділення на панелі — Ділить панель показників на частини з змінним перетягуванням розміром та необов'язковим згортанням при нестачі місця.
Розділена панель — Ділить вміст на дві області з одним перетягуваним розділювачем — простий варіант багатопанельного lr-multi-split.
Покроковий процес — Проводить користувача через послідовність кроків із станом кожного кроку та можливістю перейти до нього натисканням.
Група вкладок — Показує одну панель у light DOM за раз з повноцінним керуванням вкладками з клавіатури.
Вкладка — Сумісний з Web Awesome та Shoelace елемент вкладки, пов'язаний з панеллю всередині групи через атрибути panel та name.
Панель вкладки — Сумісна з Web Awesome та Shoelace панель, пов'язана з вкладкою всередині групи через атрибути name та panel.
Віртуальний список — Відображає лише видимі рядки дуже великої прокручуваної колекції.
Віджет — Панель із заголовком і необов’язковими кнопками згортання та розгортання на весь екран.

Накладні елементи й зворотний зв’язок

Область сповіщень — Розміщує кілька коротких сповіщень у кутку екрана.
Сповіщення — Окреме закривальне сповіщення з кольоровим позначенням важливості, необов'язковою іконкою та таймером автоматичного закриття.
Мітка — Невелика мітка тега, фільтра чи області дії з можливістю видалення або перемикання.
Група міток — Група міток з необов'язковим індикатором переповнення «+N» при перевищенні заданої кількості.
Сповіщення — Закривне повідомлення з необов'язковим таймером автоматичного приховування та передачею у загальну область коротких сповіщень.
Значок — Компактна позначка стану, кількості або категорії в тексті.
Інформаційний блок — Вбудований закривний блок для повідомлень про стан, попередження та помилки.
Контекстне меню — Відкриває меню дій після натискання правої кнопки миші, довгого дотику або сполучення Shift+F10 на будь-якій області.
Діалогове вікно — Модальне вікно з утриманням фокусу для підтверджень, форм та інших завдань, що вимагають уваги.
Висувна панель — Висуває модальну панель із будь-якого краю вікна для фільтрів або контекстних елементів керування.
Випадаюче меню — Випадаюче меню дій, прив'язане до наданого застосунком елемента відкриття.
Порожній стан — Показує відсутність даних з іконкою, повідомленням та необов'язковими діями.
Комбінація клавіш — Показує комбінацію клавіш з урахуванням платформи у вигляді позначень клавіш.
Спливна панель — Плаваюча панель із закриттям по натисканню поза нею для контекстного вмісту та елементів керування.
Позиційована панель — Базовий компонент, який вирівнює плаваючу панель відносно опорного елемента; використовує той самий механізм, що popover та tooltip.
Смуга прогресу — Горизонтальний індикатор певного або невизначеного прогресу з необов'язковим значенням.
Кільцевий індикатор прогресу — Круговий індикатор певного або невизначеного прогресу з підписом у центрі.
Оцінка зі зірочками — Оцінка з клавіатури зі зірочками з частковим заповненням для дробових значень.
Заглушка завантаження — Анімований заповнювач, що імітує вміст під час завантаження.
Індикатор завантаження — Анімований індикатор невідомого прогресу фонової задачі.
Тег — Семантичний варіант значка для позначення ключового слова чи категорії.
Підказка — Спливна підказка при наведенні чи фокусі, що описує елемент, наданий застосунком.

Перегляд документів і файлів

Перегляд архіву — Показує імена та стиснені розміри файлів у ZIP-архіві, не витягуючи вміст.
Перегляд календаря — Розбирає файл календаря .ics та показує події з описом, часом і місцем.
Перегляд контактів — Завантажує документ vCard та показує доступну картку для кожного контакту.
Перегляд CSV — Завантажує CSV-файл і показує його рядки у віртуалізованій прокручуваній таблиці.
Перегляд набору даних — Завантажує текстові дані з розділювачами та показує їх як типізовану доступну таблицю.
Порівняння документів — Порівнює дві версії документа у вбудованому чи повноекранному режимі, поєднуючи текстові відмінності з попереднім переглядом документів.
Попередній перегляд документа — Вбудований попередній перегляд документа або вкладення за MIME-типом з можливістю завантажити файл, якщо перегляд недоступний.
Перегляд документа — Показує документ у діалоговому вікні з підключуваним засобом відображення за MIME-типом.
Перегляд DOCX — Перетворює файл DOCX на очищений семантичний HTML за допомогою mammoth.
Перегляд електронної книги — Відображає EPUB з навігацією по розділах через необов'язкову залежність epub.js.
Перегляд електронної пошти — Розбирає та показує лист .eml із заголовками, очищеним вмістом та вкладеннями.
Перегляд GeoJSON — Завантажує, перевіряє та показує об'єкти GeoJSON на карті.
Шар виділення — Малює активні прямокутники виділення поверх розташованого вмісту документа.
Перегляд HTML — Завантажує HTML за URL та безпечно показує його після очищення.
Вставка HTML — Завантажує фрагмент HTML та вставляє його у light DOM сторінки після очищення.
Перегляд блокнота — Показує Jupyter Notebook лише для читання з Markdown, кодом та розширеними результатами комірок.
Панель сторінок — Віртуалізована вертикальна стрічка мініатюр для переміщення сторінками документа.
Перегляд PDF — Завантажує та показує сторінки PDF з масштабуванням, номерами сторінок та виділюваним текстовим шаром.
Перегляд PPTX — Перегляд презентації PowerPoint PPTX з доступним у браузері рівнем точності.
Перегляд електронних таблиць — Завантажує та показує книги .xlsx та старі .xls з вкладками аркушів та віртуалізованими рядками.
Перегляд SVG — Завантажує за URL та безпечно показує вбудований очищений SVG-документ.
Перегляд XML — Показує XML-документ як дерево, вузли якого можна згортати й копіювати.

Медіа й файли

Мітка вкладення — Компактна мітка файлу, прикріпленого до повідомлення, зі станом завантаження, прогресом та повторною спробою.
Аватар — Невелике зображення користувача чи сутності у вигляді значка, фотографії або ініціалів.
Анімоване зображення — Відтворює GIF, APNG або WebP з кнопками запуску та паузи та врахуванням налаштування зменшення анімації.
Анімація — Анімує дочірній елемент слота за допомогою готових наборів або користувацьких ключових кадрів.
Кнопка вкладення — Компактна кнопка прикріплення файлу, що відкриває вибір файлу або меню можливостей у полі введення повідомлення.
Аудіо- та відеоплеєр — Плеєр аудіо та відео з синхронізованою розшифровкою, звуковою хвилею та налаштуванням швидкості відтворення.
Група аватарів — Показує перекриваються аватари компактним рядом та об'єднує зайві у значок «+N».
Зона завантаження файлів — Перетворює будь-яку область на ціль перетягування файлів без власного діалогу вибору.
Значок файлу — Показує локалізований значок типу файлу за MIME-типом або назвою файлу.
Вибір файлу — Область для вибору файлу натисканням або перетягуванням, яка передає вибрані файли застосунку.
Прапор — Показує прапор країни або мови в рамці, яку за потреби можна зробити круглою.
Порівняння зображень — Повзунок з керуванням з клавіатури для порівняння зображень «до» та «після».
Перегляд зображень — Перегляд растрових зображень з переміщенням та масштабуванням, виділенням областей та необов'язковими анотаціями.
Повноекранний перегляд — Модальний перегляд зображень на весь екран з переходом назад і вперед та масштабуванням.
Карта — Обгортка MapLibre GL для карти з декларативною легендою, картограмами та маркерами.
Медіакартка — Показує вбудований попередній перегляд зображення, відео або вкладеного файлу в повідомленні чату.
Переміщення та масштабування — Дозволяє переміщувати та масштабувати вміст слота або одне зображення в межах заданого масштабу.
Відтворення послідовності — Кнопки відтворення та паузи, які з фіксованим інтервалом переміщують індекс у заданому діапазоні.
QR-код — Кодує будь-яке значення у QR-код для сканування, намальований на canvas.
Відео — Вбудований відеопрогравач зі своїми елементами керування, вибором субтитрів і попереднім переглядом мініатюр.
Список відтворення відео — Відтворює відео зі списку з навігацією й автоматично переходить до наступного після завершення поточного.
Масштабований фрейм — Попередній перегляд в ізольованому iframe з фіксованими ступенями масштабу. Для перегляду вмісту слота чи зображення служить lr-pan-zoom.

Допоміжні компоненти

Спостерігач перетинів — Передає нативні записи про перетин, коли вміст слота потрапляє в область перегляду або виходить з неї.
Спостерігач змін — Відстежує зміни дочірніх DOM-елементів та атрибутів у слотах і передає нативні записи змін.
Спостерігач розміру — Відстежує розмір вкладених елементів та надсилає типізовані події його зміни без видимого оформлення.
Кнопка копіювання — Кнопка зі значком, яка копіює текст у буфер обміну та підтверджує дію галочкою.
Перегляд відмінностей — Показує справжнє порядкове порівняння двох рядків з кольоровим виділенням у форматі unified diff.
Роздільник — Семантичний роздільник із налаштовуваною темою для горизонтального чи вертикального розділення вмісту.
Кнопка експорту — Завантажує дані таблиці як CSV чи JSON напряму або через меню вибору формату.
Форматування байтів — Форматує розмір у байтах з урахуванням локалі та налаштуванням основи одиниць і точності.
Форматування дати — Форматує дату й час з урахуванням локалі за допомогою Intl.DateTimeFormat.
Форматування числа — Форматує числа, валюти та скорочений запис чисел з урахуванням локалі за допомогою Intl.NumberFormat.
Значок — Показує чіткі вбудовані SVG-значки з набору іменованих контурів без залежностей.
Перегляд JSON — Розкривне дерево для вивчення та копіювання будь-яких даних JSON.
Введення відомої дати — Поле дати з окремого введення дня, місяця та року для дати, яку користувач вже знає.
Область оголошень — Візуально прихована область ARIA, яка упорядковує оголошення для програм зчитування екрана.
Список згадок — Автодоповнення згадок та команд з косою рискою, прив'язане до положення курсора у полі введення.
Статус оновлення — Показує зворотний відлік до наступного запланованого оновлення з кнопками паузи та відновлення.
Випадковий вміст — Показує дочірні елементи випадково або по порядку для варіантів тексту A/B та відгуків.
Відносний час — Показує відносну часову позначку з урахуванням локалі та самостійно оновлює її.
Навчальний тур — Покрокове інтерактивне знайомство із застосунком.
Візуально приховано — Приховує вміст візуально, зберігаючи його доступним для програм читання з екрана, і показує його під час фокусування.