Новая современная библиотека UI-компонентов на основе Base UI.

Создано для разработчиков и ИИ.

Accordion

Набор сворачиваемых панелей с заголовками и содержимым.

Alert

Выноска для отображения важной информации.

Alert Dialog

Диалог, требующий ответа пользователя для продолжения.

Autocomplete

Поле ввода, предлагающее варианты по мере набора текста.

Auth Surface

Экран авторизации — вход/passkey/SSO/magic-link с состояниями. Двухколоночный шелл + карточка.

Avatar

Элемент изображения с запасным вариантом для представления пользователя.

Badge

Бейдж или компонент, который выглядит как бейдж.

Browse Catalog Dialog

Каталог — большой диалог витрины: табы Навыки/Коннекторы, поиск, Фильтр/Сортировка и сетка карточек.

Button

Кнопка или компонент, который выглядит как кнопка.

Card

Контейнер содержимого для группировки связанной информации.

Checkbox

Элемент управления, позволяющий пользователю переключаться между состояниями «отмечено» и «не отмечено».

Checkbox Group

Предоставляет общее состояние для набора чекбоксов.

Collapsible

Сворачиваемая панель, управляемая кнопкой-триггером.

Combobox

Поле ввода в сочетании со списком предопределённых элементов для выбора.

Command

Компонент командной палитры на основе Dialog и Autocomplete для поиска и выполнения команд.

Connector Setup Dialog

Диалог установки коннектора — брендовая шапка, OAuth-кнопка или поля токена, ошибка и футер Отмена / Подключить.

Cookie Banner

Нижний баннер о cookie (152-ФЗ) — текст согласия со ссылкой на политику и кнопкой «Принять».

Dialog

Всплывающее окно, которое открывается поверх всей страницы.

Directory Card

Карточка каталога персонализации — иконка, имя, издатель, число установок, описание и действие.

Directory Detail

Деталь каталога персонализации — «витрина» коннектора: шапка, карусель примеров, разработчик, инструменты и детали.

Directory Skeleton

Скелетоны загрузки персонализации — детали навыка/коннектора, колонка списка и результаты поиска.

Drawer

Панель, выезжающая с края экрана, с поддержкой свайп-жестов, точек привязки и вложенных панелей.

Новое

Token Parts Input

Составной токен — несколько полей (домен·токен), склеиваемых в одну строку «A:B» только наружу.

Empty

Контейнер для отображения информации о пустом состоянии.

Field

Компонент, обеспечивающий маркировку и валидацию для элементов управления формы.

Fieldset

Нативный элемент fieldset с легендой.

File Preview Modal

Модалка превью файла — шапка (имя + мета + X) и скролл-тело: картинка, исходник, PDF или таблица.

File Preview Skeleton

Скелетоны загрузки превью файлов — markdown, docx, xlsx и обычный текст.

Form

Компонент-обёртка для формы, упрощающий валидацию и отправку.

Frame

Контейнер с рамкой для группировки связанной информации.

Group

Компонент для визуальной группировки ряда элементов управления.

Icon

Примитив иконки на основе Tabler Icons с размерами, заимствованными из Claude, и тонкой контурной обводкой.

Input

Нативный элемент поля ввода.

Input Group

Гибкий компонент для группировки полей ввода с дополнениями, кнопками и другими элементами.

Kbd

Компонент для отображения клавиш и сочетаний клавиш.

K

Label

Отображает доступную подпись, связанную с элементами управления.

Legal Shell

Общий «хром» правовых страниц — кнопка «Назад», заголовок, секции, маркированные списки и футер со ссылками и почтой.

Menu

Список действий в выпадающем меню с поддержкой навигации с клавиатуры.

Mermaid Diagram

Mermaid-диаграмма — полноэкранный вьюер с зумом и панорамой, mermaid грузится с CDN.

Mind Map Diagram

Ментальная карта — собственный движок tidy-tree (без Mermaid): лёгкие боксы и кривые-связи.

Not Found Screen

Экран 404 — бренд, серифный заголовок, строка и кнопка возврата на главную.

Onboarding Frame

Общий хром экранов онбординга — бренд по центру, точки прогресса в стиле claude.ai и контент шага.

Popover

Доступное всплывающее окно, привязанное к кнопке.

Pdf Thumbnail

Превью PDF — первая страница «бумагой», на ховере веер из страниц и переключение счётчика на «Скачать».

Personalization Landing

Экран входа в персонализацию — «Персонализация Oracul» и карточки входа в коннекторы и навыки.

Preview Card

Всплывающее окно, появляющееся при наведении на ссылку и показывающее предпросмотр для зрячих пользователей.

Pricing Page

Страница тарифов — личные (Pro / Max) и командные (Команда / Enterprise) планы со списками возможностей.

Progress

Отображает состояние задачи, выполнение которой занимает много времени.

Radio Group

Набор переключателей, из которых одновременно может быть выбран не более одного.

Ring Spinner

Кольцевой индикатор загрузки в стиле claude.ai — тонкое кольцо с мягким хвостом.

Scroll Area

Нативный контейнер прокрутки с кастомными полосами прокрутки.

Select

Распространённый компонент формы для выбора заранее заданного значения из выпадающего меню.

Separator

Элемент-разделитель, доступный для программ чтения с экрана.

Settings Page

Страница настроек — «Назад», табы Общие / Правовые документы, профиль с темой и список правовых документов.

Settings Skills

Раздел «Навыки» в настройках — группы пользовательских и системных навыков с переключателями и редактор SKILL.md.

Settings Connectors

Раздел «Коннекторы» в настройках — плашки MCP-коннекторов с переключателями, редактор прав методов и диалог добавления.

Settings Capabilities

«Возможности» — тумблеры функций, доступных Oracul в чатах.

Settings Usage

«Использование» — расход по корзинам с прогресс-барами и платёжный цикл.

Settings Account

«Аккаунт» — выход / удаление / ID и таблица активных сессий.

Settings Billing

«Биллинг» — карточка плана, способ оплаты, баланс и таблица счетов (₽).

Sheet

Выезжающая панель, открывающаяся со стороны экрана, на основе компонента dialog.

Sidebar

Левый сайдбар приложения — шапка с брендом, навигация, список недавних чатов и футер пользователя; сворачивается в рейл.

Skeleton

Скелетон состояния загрузки для ваших компонентов.

Skill Create Dialog

«Написать инструкции навыка» — диалог создания навыка: название, описание, инструкции.

Slider

Элемент ввода, в котором пользователь выбирает значение из заданного диапазона.

Spinner

Индикатор, который можно использовать для отображения состояния загрузки.

Stat

KPI-плашка — подпись, значение, дельта с тоном и подсказка.

Switch

Элемент управления, который показывает, включена настройка или выключена.

Table

Простой компонент таблицы для отображения табличных данных.

Tabs

Компонент для переключения между связанными панелями на одной странице.

Textarea

Нативный элемент textarea.

Toast

Временное уведомление, которое появляется на экране, чтобы проинформировать пользователей.

Toggle

Кнопка с двумя состояниями, которую можно включать и выключать.

Tooltip

Всплывающее окно, появляющееся при наведении или фокусе на элемент и показывающее подсказку для зрячих пользователей.