Все компоненты

Все 340 компонентов ValyroUI для React в одном каталоге: поиск, фильтры по разделам и меткам, живые превью в 19 темах.

Базовые элементы

Кнопки, бейджи, аватары, подсказки и индикаторы загрузки

Button — Кнопки всех типов
Icon Button — Кнопка с иконкой
Button Group — Группы кнопок
Copy to Clipboard — Копирование с подтверждением
Badge — Статусы и метки
Avatar — Аватары пользователей
Tooltip — Всплывающие подсказки
Separator — Разделители
Skeleton — Заглушки загрузки
Spinner — Индикатор загрузки
Progress Bar — Полосы прогресса

Навигация и каркас

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

App Shell — Каркас приложения
Navbar — Верхняя навигация
Sidebar — Боковая панель
Resizable Panels — Панели с изменяемым размером
Breadcrumbs — Хлебные крошки
Tabs — Вкладки
Segmented Control — Переключатель режимов
Pagination — Постраничная навигация
Stepper — Пошаговые процессы
Dropdown Menu — Выпадающее меню
Context Menu — Контекстное меню
Command Palette — Меню команд в стиле ⌘K
Keyboard Map Overlay — Карта горячих клавиш экрана: поиск, клавиатура и режим тренировки

Окна и уведомления

Алерты, тосты, диалоги, шторки, поповеры и онбординг-туры

Alert — Предупреждения
Toast — Всплывающие уведомления
Notification Center — Центр уведомлений
Loading Overlay — Экран загрузки
Dialog — Модальные окна
Confirm Dialog — Подтверждение действий
Drawer — Выдвижные панели
Bottom Sheet — Нижняя шторка в стиле iOS: точки остановки, свайп, режим «подглядывания»
Popover — Всплывающий контент
Hover Card — Карточка при наведении
Tour — Онбординг-тур: подсветка элементов, шаги, прогресс и возобновление

Формы и ввод

Поля, выбор из списка, даты, маски, цвета, файлы и фильтры

Text Input — Текстовые поля
Textarea — Многострочный ввод
Search Input — Поисковая строка
Mentions Input — Текст с @упоминаниями и #тегами, асинхронные подсказки
Tags Input — Ввод тегов
Select — Выбор из списка
Multi Select — Множественный выбор
Combobox — Поиск и выбор
Listbox — Список вариантов на странице: один или несколько, диапазоны с Shift
Chip Group — Группа чипов с иконками: один или несколько вариантов
Checkbox Tree — Дерево с чекбоксами: каскад, частичная отметка, клавиатура
Checkbox — Флажки
Checkbox Group — Флажки с общей подписью, подсказкой, ошибкой и обязательностью
Radio Group — Выбор одного варианта
Switch — Переключатель
Slider — Ползунок
Histogram Range — Диапазон цен с гистограммой, двумя ползунками и полями
Rating Input — Оценка звёздами
Number Input — Числовой ввод
OTP Input — Ввод одноразового кода
Phone Input — Телефон с выбором страны, форматированием на лету и значением E.164
Masked Input — Ввод по маске: карты с Luhn, срок действия, CVC, дата, время
Date Picker — Выбор даты
Date Range Picker — Выбор диапазона дат
Date Field — Ввод даты по сегментам в порядке локали
Time Picker — Выбор времени
Time Field — Ввод времени по сегментам, 24 часа или AM/PM
Wheel Picker — Барабан выбора в стиле iOS: инерция, 3D-цилиндр, пресеты даты и времени
Date Of Birth Input — Дата рождения тремя списками в порядке локали
Color Picker — Выбор цвета
Swatch Picker — Выбор цвета из образцов: товар, тема, метка
Size Picker — Выбор размера: плитки или прокручиваемая строка, нет в наличии
Emoji Picker — Выбор эмодзи: поиск, категории, оттенки кожи, недавние
File Uploader — Загрузка файлов
Image Cropper — Кадрирование: сдвиг, масштаб, поворот, пропорции и круглый аватар
Form Field — Поле с валидацией и ошибками
Multi-step Form — Пошаговая форма: валидация шагов, пропуск, проверка перед отправкой, черновик
Form Autosave Status — Статус автосохранения формы: офлайн, ошибка, конфликт версий и хук useAutosave
Filter Builder — Конструктор фильтров: вложенные группы И/ИЛИ, условия по типу поля, JSON и сводка
Filter Toolbar — Панель фильтров каталога: счётчик, выпадающие фильтры, сортировка, чипы

Данные и показатели

Таблицы, гриды, списки, деревья, карточки и виджеты дашборда

Data Table — Таблицы с поиском и сортировкой
Data Grid — Таблица на 100 000 строк: группировка, фильтры, редактирование
Virtual List — Виртуальный список на 100 000 строк
Bulk Action Bar — Панель действий над выбранными строками с горячими клавишами
List Block — Блок списка с картинками или иконками, описанием и значением
Description List — Список «ключ — значение»: столбиком, строками или сеткой с иконками
Tree View — Древовидные структуры
Accordion — Раскрывающиеся секции
Sortable — Сортировка перетаскиванием
JSON Viewer — Просмотр JSON
Timeline — Хронология событий
Card — Универсальные карточки
Item Card — Карточка-строка: иконка, заголовок, описание и элемент управления справа
Record Card — Карточка записи: статус, контекст, ключевые поля и действия
Carousel — Карусель: scroll-snap, свайп, автопрокрутка, миниатюры
Empty State — Экран отсутствия данных
Stats Card — Карточки показателей
KPI Group — Ряд KPI: значение, изменение к прошлому периоду, спарклайн и прогресс к цели
Widget — Контейнер дашборда: заголовок, действия, крупное число, легенда и область графика
Number Value — Число с учётом локали: валюта, проценты, компактная запись и единицы
Trend Value — Изменение показателя: стрелка, знак и цвет, текстом или пилюлей
Proportion Bar — Полоса долей с легендой: хранилище, бюджет, структура
Activity Rings — Концентрические кольца прогресса к целям
Leaderboard — Рейтинг: места с медалями, миниатюры, цифры и динамика за период

Графики и аналитика

Графики, диаграммы, карты, схемы и сценарии «что если»

Line Chart — Линейные графики
Bar Chart — Столбчатые диаграммы
Area Chart — Графики с заливкой
Scatter Chart — Точечные и пузырьковые диаграммы с линией тренда
Sparkline — Мини-графики
Confidence Band Chart — Прогноз с доверительными интервалами и выбросами, точки читаются с клавиатуры
Candlestick Chart — Биржевые свечи с объёмами и скользящими средними
Donut Chart — Кольцевые диаграммы
Treemap — Иерархии площадями с переходом по уровням
Funnel Chart — Воронки конверсии
Sankey Chart — Диаграммы потоков между этапами
Radar Chart — Лепестковые диаграммы для сравнения профилей
Heatmap — Тепловые карты
Map Chart — Карта мира: хороплет и точки, зум и панорамирование
Tile Map — Лёгкая карта на тайлах: метки, маршрут, всплывающие карточки, зум
Cohort Retention Matrix — Удержание по когортам: тепловая таблица, средние, аномалии и заметки
Flow Diagram — Блок-схема с автораскладкой: шаги, решения, подписи связей
Sequence Diagram — Диаграмма последовательности: участники, линии жизни, вызовы и ответы
Gauge Chart — Круговые индикаторы
Metric Comparison — Сравнение показателей
Analytics Filter Bar — Фильтры дашборда
Scenario Simulator — Ползунки допущений меняют прогноз, коридор неопределённости и KPI
Variance Explainer — Водопад: из чего сложилось изменение KPI, с раскрытием факторов
Map Layer Story — История по карте: шаги включают слои данных и кадрируют регион, без WebGL

Работа и команды

Календарь, планировщик, канбан, CRM, согласования и редактор текста

Calendar View — Календарь событий
Scheduler — Планировщик: день, неделя, месяц и таймлайн ресурсов, drag & drop, повторы
Kanban Board — Доска задач
Gantt Chart — Диаграммы Ганта с зависимостями и перетаскиванием
Booking Slots — Запись на встречу: календарь, слоты в часовом поясе гостя, форма и подтверждение
CRM Pipeline — Воронка сделок: этапы, суммы и вероятности, перетаскивание между этапами
Approval Flow — Многоэтапное согласование: последовательные и параллельные этапы, решения с причиной, история
Goal Tracker — OKR: цели и ключевые результаты, статусы, уверенность, чек-ины с историей
Onboarding Checklist — Чек-лист онбординга: прогресс, подсказки с CTA, скрытие и празднование
Course Path Navigator — Карта курса: модули, блокировки, прогресс и навыки, список на узком экране
Team Members — Участники команды: роли, приглашения по email, ожидающие инвайты, счётчик мест
Org Chart — Оргструктура: дерево с зумом и панорамой, поиск, сворачивание веток
Activity Feed — Лента активности
Rich Text Editor — Редактор текста: Markdown-шорткаты, «/»-команды, упоминания, ссылки и картинки

Аккаунт и доступ

2FA, сессии и токены, профиль, настройки, права и журнал действий

Two Factor Setup — Подключение двухфакторной защиты: способ, QR-код или телефон, проверка кода
Active Sessions — Активные сессии: текущая, подозрительные входы, отзыв доступа
Access Tokens — Личные токены доступа: область, последнее использование, отзыв
Age Gate — Проверка возраста: дата рождения, запоминание, отказ младше лимита
Profile Details — Профиль: заполненность, подтверждённые контакты, поля
Address Book — Адресная книга: дом, офис, адреса по умолчанию и действия
Social Profiles — Соцсети профиля: перестановка, подтверждение, копирование ссылки
Settings Panel — Страница настроек: навигация по разделам, панель несохранённых изменений, опасная зона
Permission Matrix — Матрица ролей и прав: наследование, блокировки, массовые переключатели, черновик изменений
Audit Log — Журнал действий: фильтры, diff полей, экспорт в CSV, подгрузка
Privacy Center — Центр приватности: оценка, группы настроек, счётчики защиты
Support Center — Поддержка: каналы связи со статусом, тикеты с фильтром

ИИ: чат и агенты

Чат с ИИ, промпт, выбор модели, рассуждения, инструменты и агенты

AI Chat Window — Окно AI-чата
Chat Message — Сообщения с потоковым выводом
Message Branches — Версии сообщения и дерево веток диалога
Streaming Text — Плавный вывод потока токенов
Markdown Preview — Отображение Markdown
Response Feedback — Оценка ответа и рубрика для асессоров
Prompt Composer — Поле промпта с вложениями
Inline Suggestion — Подсказка-автодополнение в поле ввода
Model Selector — Выбор модели ИИ
Model Comparison — Сравнение ответов нескольких моделей
Prompt Library — Библиотека промптов с переменными
Chain of Thought — Ход рассуждений модели
Tool Call — Вызов инструмента с подтверждением
Agent Plan — Живой план задач агента
Agent Trace Timeline — Шаги агента на водопаде: время, токены, стоимость, вход и выход без секретов
Agent Approval Gate — Подтверждение действия агента: риск, diff, явное согласие и журнал решений
Memory Panel — Что помнит ассистент
Sources — Источники и цитаты в ответе
Answer Card — Ответ с источниками в стиле Perplexity
Artifact Panel — Панель артефакта рядом с чатом
Diff Review — Ревью правок ИИ по фрагментам
Voice Orb — Анимированная сфера голосового режима
Voice Input — Голосовой ввод с волной и расшифровкой
Token Usage — Отображение затрат токенов
Context Budget Meter — Окно контекста по частям: системный промпт, документы, история, переполнение и что сократить

Изображения и генерация

Промпт и параметры генерации, результаты, инпейнтинг и нод-граф

Prompt Editor — Промпт и негатив: веса, LoRA, автодополнение, токены
Generation Settings — Модель, сэмплер, шаги, CFG, размер, пресеты
Aspect Ratio Picker — Соотношение сторон и точный размер
Seed Input — Сид: случайный, фиксированный, инкремент
LoRA Stack — Стек LoRA: силы, переключатели, порядок, триггеры
Style Presets — Карточки стилей с превью и весами
Reference Image Input — Референс для img2img и ControlNet
Generation Progress — Шаги, ETA, живое латентное превью, очередь
Image Result Grid — Галерея результатов, действия и лайтбокс
Image Compare — Сравнение до/после: шторка, рядом, наложение
Inpaint Canvas — Маска для инпейнтинга и расширение холста
Generation History — История генераций по дням с фильтрами
Image Adjustments — Цветокоррекция: загрузка, вписывание и семь ползунков с фильтром
Node Canvas — Бесконечный холст нод: типизированные порты, связи, группы, мини-карта, выполнение графа
Node Library — Палитра нод: нечёткий поиск, категории, избранное, перетаскивание на холст
Node Inspector — Свойства выбранной ноды: заголовок, цвет, режим, параметры, порты
Execution Queue — Очередь и история запусков: прогресс, ETA, превью, отмена и повтор

Разработчикам

Код, логи, диффы, API-ключи, вебхуки, статус сервисов и фичефлаги

Code Block — Код с подсветкой
Diff Viewer — Дифф нескольких файлов: список со статистикой, unified и split, подсветка слов
Log Viewer — Потоковые логи: уровни, поиск с подсветкой, слежение за хвостом, JSON-строки
Request Inspector — Журнал HTTP-запросов: фильтры, заголовки, тела и водопад таймингов
API Key Manager — API-ключи: создание с правами и сроком, показ секрета один раз, отзыв
Api Playground — Песочница API: модель, параметры, промпты и запрос/ответ в JSON
Webhook Endpoints — Вебхуки: адреса, события, включение и доля доставок
Certificate List — Сертификаты SSL/TLS: срок до истечения, автопродление, легенда
Status Page — Страница статуса: общий баннер, аптайм за 90 дней, инциденты и подписка
Storage Usage — Хранилище: занятое место по категориям и действия по очистке
Download Center — Выгрузки: типы файлов, размер, срок ссылки и повторный запрос
Feature Flag Simulator — Превью продукта при разных фичефлагах и сегментах, без доступа к продакшену

Лендинги и бренд

Hero, тарифы, отзывы, FAQ, подвал и витрина дизайн-системы

Hero Section — Первый экран лендинга
Feature Grid — Сетка преимуществ
Bento Grid — Бенто-сетка карточек разной ширины и высоты с адаптивом
Logo Cloud — Логотипы клиентов
Pricing Table — Тарифные планы
Comparison Table — Сравнение продуктов
Testimonials — Отзывы клиентов
FAQ Section — Частые вопросы
Award Badge — Награда с лавровым венком, звёздами и подписью
CTA Section — Блок призыва к действию
Newsletter Signup — Подписка на рассылку
App Store Buttons — Кнопки магазинов приложений: App Store, Google Play, Galaxy Store, RuStore
Footer — Подвал сайта
Theme Customizer — Настройка темы: пресеты, цвета, радиус, шрифт и живое превью
Color Token — Цветовой токен: плашка или строка с переменной, значением и копированием
Type Specimen — Образец шрифтов: крупный знак и пары гарнитура — роль
Template Card — Карточка шаблона: живая миниатюра, бейдж, описание и ссылки

Магазин и платежи

Каталог, корзина, оформление заказа, карты, кошелёк и подписки

Product Card — Карточка товара
Product Grid — Каталог товаров
Product Filters — Фильтры каталога
Product Spotlight — Рекомендованный товар: фото с пометкой, цена, рейтинг и действия
Reviews Summary — Отзывы: средняя оценка, гистограмма-фильтр, сортировка и полезность
Guided Product Finder — Мастер подбора товара: вопросы с ветвлением и объяснение, почему подошло
Location Card — Точка продаж: расстояние, часы работы, способы получения и заказ
Shopping Cart Drawer — Выдвижная корзина
Checkout Summary — Сводка оформления заказа
Checkout Form — Оформление заказа: доставка, тип адреса, оплата и проверка полей
Order Tracking — Отслеживание заказа: этапы, перевозчик, трек-номер и история
Invoice — Счёт для печати: позиции, налоги, скидки и итоги в валюте
Credit Card — Банковская карта: градиент или две тональности, сеть по номеру, бесконтактная оплата
Card Input — Номер, срок и CVC в одном поле: маски, Луна, автопереход
Payment Methods — Сохранённые карты и кошельки карточками-переключателями
Transaction List — Список операций: списания, пополнения, возвраты и остаток
Wallet Balance — Баланс кошелька: скрытие суммы, действия, карта для пополнения
Purchase Card — Покупка продукта: баннер, разовая оплата или подписка, карта и адрес
Loyalty Rewards — Программа лояльности: баллы, уровень, прогресс и каталог наград
Subscription Manager — Управление подпиской: статус, возможности, квоты, оплата и отмена
Billing Plan Card — Управление подпиской
Usage Quota — Лимиты использования
Subscription Plan Simulator — Калькулятор тарифов: места, месяц или год, НДС и точная разбивка цены

Контент и соцсети

Статьи, новости, факты и источники, посты, комментарии и медиа

Article Header — Шапка статьи: рубрика, заголовок, лид, авторы и дата
Byline — Подпись: авторы, дата публикации и обновления, время чтения
Article Figure — Иллюстрация с подписью и автором фото
Pull Quote — Выносная цитата с атрибуцией
Key Points — Блок «Главное» с ключевыми тезисами
Editor Note — Обновление, исправление, раскрытие и пометка о спонсорстве
Article Toc — Оглавление статьи с подсветкой текущего раздела
Reading Progress — Полоса прогресса чтения
Share Bar — Поделиться: Telegram, VK, X, WhatsApp, почта и копирование ссылки
Author Bio — Карточка автора в конце статьи с подпиской
Article Card — Карточка новости: вертикальная, горизонтальная и поверх фото
Live Blog — Онлайн-трансляция: лента обновлений, закреплённые и важные события
Breaking News — Плашка «Срочно» с ротацией заголовков
Article Comments — Комментарии к статье: рейтинг, сортировка, ответы, модерация
Citation Evidence Lens — Подсветка утверждений по степени подтверждения и источники к каждому
Source Dossier — Досье источников: статус проверки, факты со ссылками, виды источников, печать
Correction Ledger — Хронология правок материала: что изменено, когда и почему, с пословным сравнением
Interactive Quote Deck — Цитаты с первоисточником, контекстом, оригиналом перевода и шарингом с атрибуцией
Post Card — Карточка публикации
Comment Thread — Дерево комментариев
Profile Card — Профиль пользователя
Reaction Bar — Лайки и реакции
Media Gallery — Галерея изображений
Media Player — Видео и аудио: свои контролы, субтитры, PiP, полный экран, волна

Игры

Тир-листы, мета, контрпики, турнирные сетки и патчноуты для игровых сайтов

Tier List — Тир-лист S+…D: портреты с бейджем роли, фильтр ролей, перетаскивание мышью, тачем и с клавиатуры, экспорт
Meta Table — Таблица меты: тир, винрейт, пикрейт и банрейт с изменением за патч, фильтры роли и ранга, виртуализация
Matchup Matrix — Контрпики: матрица «чемпион против чемпиона» с тепловой шкалой и тултипами, выбор своего чемпиона, список на телефоне
Tournament Bracket — Турнирная сетка: single и double elimination, счёт серий, победитель, путь команды, монограммы
Patch Notes — Патчноут: чемпионы и предметы с иконками способностей, было → стало, бафф, нерф и изменение, фильтры

Анимированные компоненты

Пружинные кнопки, списки с перестройкой, радиальные меню и раскрытие слоёв

Toggle — Кнопка-переключатель с пружинным откликом
Flip Button — Кнопка с двумя сторонами, переворачивается на пружине
Liquid Button — Кнопка, которая заполняется «жидкостью» при наведении
Theme Toggler — Смена светлой и тёмной темы с раскрытием через View Transitions
GitHub Stars Button — Ссылка на репозиторий с прокручивающимся числом звёзд
Share Button — Кнопка, раскрывающая иконки соцсетей
Code Tabs — Варианты кода во вкладках: npm, pnpm, bun — с копированием
Number Wheel — Число на вращающемся барабане с соседними значениями
Pin List — Список с закреплением: элементы плавно переезжают между группами
Notification Stack — Стопка уведомлений, раскрывающаяся в список
Todo List — Чек-лист с волнистым зачёркиванием выполненных пунктов
Presence Avatars — Кто онлайн: аватары перестраиваются при смене статуса
Radial Menu — Кольцевое контекстное меню по правому клику
Radial Nav — Круговая навигация со стрелкой, поворачивающейся к разделу
Radial Intro — Элементы вылетают из центра и вращаются по орбите
Link Preview — Превью страницы при наведении на ссылку
Folded Depth Cards — Карточки слоями в глубину: складываются как бумага, клавиатура и свайп
Halftone Image Reveal — Изображение проявляется растровыми точками: при прокрутке, наведении или появлении

Эффекты

Жидкое стекло, фоны, эффекты текста, чисел и курсора

Glass Lens — Стеклянная линза с настоящим преломлением
Morphing Capsule — Капсула, перетекающая между состояниями
Floating Tab Bar — Плавающая стеклянная панель вкладок
Aurora Background — Медленное северное сияние за контентом
Gradient Background — Медленно перетекающий градиент
Bubble Background — Мягкие цветные пузыри, один следует за курсором
Stars Background — Звёздное небо с параллаксом за курсором
Hexagon Background — Сетка шестиугольников со светящимся следом
Hole Background — Тоннель-портал с кольцами и частицами
Fireworks Background — Фейерверк для побед и достижений, запуск по клику
Spotlight — Сценические лучи и прожектор за курсором
Meteors — Падающие метеоры
Background Pattern — Фоновые точки, сетка и линии с затуханием
Particles — Поле частиц, реагирующее на курсор
Animated Border — Луч света, бегущий по рамке
Shimmer Text — Блик, скользящий по тексту
Text Reveal — Появление текста по словам и печатная машинка
Number Ticker — Анимированный счётчик с форматированием Intl
Marquee — Бесконечная бегущая строка логотипов и отзывов
Cursor Glow — Блик и наклон за курсором
Magnetic — Магнитное притяжение к курсору
Tilt Card — 3D-наклон с бликом и параллаксом
Ripple — Волна от нажатия в стиле Material
Confetti — Конфетти: компонент и fireConfetti()

3D и моушн

Моушн для любых компонентов, сцены на прокрутке, 3D-объекты и кнопки, WebGL

Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
Presence — Появление и уход: элемент живёт, пока проигрывается выход
Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
Helix Rail — Карточки на спирали, которая вращается от прокрутки
Scroll Scene — Сцена на прокрутке: закреплённый экран меняет картинку по шагам, шкала прогресса
Parallax Layers — Слои глубины, которые сдвигаются от прокрутки и курсора
Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
Coverflow Carousel — 3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура
Flip Card — Карточка с двумя сторонами, переворачивается в 3D
Word Prism — Слово на гранях призмы: поворачивается к следующему
Button 3D — Объёмная кнопка-клавиша: утапливается при нажатии и отпружинивает
Switch 3D — Переключатель-кубик: перекатывается между «выкл» и светящимся «вкл»
Shape Morph — Форма перетекает в другую: круг, капля, звезда, цветок — на пружине
Path Text — Текст по кругу, дуге или волне: вращается со временем или прокруткой
Shader Aurora — Северное сияние на WebGL-шейдере, тянется к курсору
Shader Gradient — Живой градиент на шейдере для hero: цвета перетекают и обтекают курсор
Liquid Surface — Водная гладь на GPU: рябь за курсором, всплеск от клика
Particle Fabric — Ткань из десятков тысяч светящихся точек: складки, курсор, волны
Particle Picture — Частицы собираются в картинку или текст и перетекают между ними
Dot Globe — Глобус из точек на WebGL2: маркеры, дуги с импульсами, вращение мышью
Horizon Grid — Бесконечная сетка-пол, уходящая к светящемуся горизонту