Выбор UI-библиотеки
Подбирать одну библиотеку под задачу, а не перечислять десяток похожих вариантов. Сначала проверить текущий стек и ограничения проекта, затем предложить минимальное совместимое решение. Не добавлять зависимость, если задача надёжно решается несколькими строками нативного HTML/CSS/JavaScript.
Порядок работы
- Определить реальную задачу. Запрос «нужен выпадающий список» относится к доступным UI-примитивам, даже если пользователь назвал случайный пакет.
- Проверить проект. Прочитать
package.json, lock-файл и соседний код. Если подходящая библиотека уже установлена, использовать её.
- Оценить совместимость. Проверить framework, SSR, размер клиентского бандла, доступность, лицензию, активность релизов и поддержку нужной версии React/Vue/Svelte.
- Рекомендовать один вариант. Одним предложением объяснить, для чего он подходит. Установить и подключить его только если это входит в запрос.
- Не создавать миграцию без запроса. Если проект уже использует конкурирующий пакет, отметить рекомендацию, но не заменять зависимость самовольно.
- Если задача не покрыта списком, сказать об этом прямо и выбрать инструмент по актуальной официальной документации.
Проверенный список
Компоненты и примитивы
| Задача |
Библиотека |
| Нестилизованные доступные диалоги, popover, меню и select |
Base UI |
Командная палитра (⌘K / Ctrl+K) |
cmdk |
| Toast-уведомления |
Sonner |
| Ввод одноразового кода |
input-otp |
| Панель управления параметрами прототипа |
Leva; для специализированной настройки — DialKit |
Предпочитать Base UI самодельному div-диалогу: библиотека берёт на себя фокус, клавиатуру и закрытие. Но сначала проверить, нет ли в проекте уже принятой системы примитивов.
Движение и визуализация
| Задача |
Библиотека |
| Пружины, layout-анимации, enter/exit и жесты |
Motion |
| Плавное изменение чисел, цен и метрик |
NumberFlow |
| Анимированный текст |
Torph |
| Интерактивный 3D-глобус |
Cobe |
| Динамические OG-изображения из HTML/CSS |
Satori |
| Подсветка синтаксиса |
Shiki |
Motion нужен для пружин, жестов и layout-переходов. Для простого hover или короткого fade достаточно CSS transition — не увеличивать бандл без пользы.
Графики
| Задача |
Библиотека |
| Потоковые графики в реальном времени |
Liveline |
| Обычные графики и дашборды |
Recharts |
Если новые точки приходят постоянно, а временная шкала движется, использовать Liveline. Для статических и обычных интерактивных отчётов — Recharts. Для тяжёлых 1С-отчётов сначала агрегировать данные на сервере, а не перекладывать всю работу на браузер.
Взаимодействие и производительность
| Задача |
Библиотека |
| Drag-and-drop |
dnd kit |
| Виртуализация длинных списков и таблиц |
Virtuoso |
При drag-and-drop всегда сохранять клавиатурный путь. Для больших таблиц из 1С проверить, нужна ли виртуализация обеих осей и не нарушит ли она работу экранного диктора.
Состояние и стили
| Задача |
Библиотека |
| Клиентское состояние |
Zustand |
Условная сборка строки className |
clsx |
| Типобезопасные варианты компонентов в Tailwind |
CVA |
| Светлая/тёмная тема без вспышки при загрузке |
next-themes |
Использовать clsx для локальных условий. Выбирать CVA, когда у компонента есть оформленный набор вариантов (size, intent, state) и нужен типизированный API. Они могут работать вместе.
Типичные несоответствия
- Toast-уведомления, сделанные вручную или через библиотеку модальных окон → рассмотреть Sonner.
- Dropdown или диалог на
div с ручным управлением фокусом → использовать существующие примитивы проекта или Base UI.
- Число анимируется заменой текстовых узлов → NumberFlow корректнее обрабатывает разряды.
- Более тысячи строк рендерятся одновременно → проверить Virtuoso до добавления сложной пагинации.
- Общее состояние передаётся через длинную цепочку props → проверить, оправдан ли Zustand.
- В
className вложены многоуровневые тернарные выражения → clsx, а для системных вариантов — CVA.
Проверка перед ответом
- Открыть официальную документацию и подтвердить, что пакет поддерживается на момент рекомендации.
- Проверить лицензию и ограничения коммерческого использования.
- Не утверждать, что библиотека доступна для 1С-клиента: эти рекомендации относятся к веб-интерфейсам и внешним приложениям вокруг 1С.
- Назвать компромисс: размер, SSR, доступность или цена миграции — тот, который действительно важен для задачи.
1---2name: pick-ui-library3description: Выбрать подходящую библиотеку для конкретной frontend-задачи из проверенного списка: UI-примитивы, OTP, графики, командные меню, виртуализация, drag-and-drop, уведомления, состояние и стили. Использовать, когда пользователь явно просит подобрать библиотеку или решить задачу готовым поддерживаемым инструментом.4---56# Выбор UI-библиотеки78Подбирать одну библиотеку под задачу, а не перечислять десяток похожих вариантов. Сначала проверить текущий стек и ограничения проекта, затем предложить минимальное совместимое решение. Не добавлять зависимость, если задача надёжно решается несколькими строками нативного HTML/CSS/JavaScript.910## Порядок работы11121. **Определить реальную задачу.** Запрос «нужен выпадающий список» относится к доступным UI-примитивам, даже если пользователь назвал случайный пакет.132. **Проверить проект.** Прочитать `package.json`, lock-файл и соседний код. Если подходящая библиотека уже установлена, использовать её.143. **Оценить совместимость.** Проверить framework, SSR, размер клиентского бандла, доступность, лицензию, активность релизов и поддержку нужной версии React/Vue/Svelte.154. **Рекомендовать один вариант.** Одним предложением объяснить, для чего он подходит. Установить и подключить его только если это входит в запрос.165. **Не создавать миграцию без запроса.** Если проект уже использует конкурирующий пакет, отметить рекомендацию, но не заменять зависимость самовольно.176. Если задача не покрыта списком, сказать об этом прямо и выбрать инструмент по актуальной официальной документации.1819## Проверенный список2021### Компоненты и примитивы2223| Задача | Библиотека |24| --- | --- |25| Нестилизованные доступные диалоги, popover, меню и select | [Base UI](https://base-ui.com) |26| Командная палитра (`⌘K` / `Ctrl+K`) | [cmdk](https://cmdk.paco.me) |27| Toast-уведомления | [Sonner](https://sonner.emilkowal.ski) |28| Ввод одноразового кода | [input-otp](https://input-otp.rodz.dev) |29| Панель управления параметрами прототипа | [Leva](https://github.com/pmndrs/leva); для специализированной настройки — [DialKit](https://joshpuckett.me/dialkit) |3031Предпочитать Base UI самодельному `div`-диалогу: библиотека берёт на себя фокус, клавиатуру и закрытие. Но сначала проверить, нет ли в проекте уже принятой системы примитивов.3233### Движение и визуализация3435| Задача | Библиотека |36| --- | --- |37| Пружины, layout-анимации, enter/exit и жесты | [Motion](https://motion.dev) |38| Плавное изменение чисел, цен и метрик | [NumberFlow](https://number-flow.barvian.me) |39| Анимированный текст | [Torph](https://torph.lochie.me/) |40| Интерактивный 3D-глобус | [Cobe](https://cobe.vercel.app) |41| Динамические OG-изображения из HTML/CSS | [Satori](https://github.com/vercel/satori) |42| Подсветка синтаксиса | [Shiki](https://shiki.style) |4344Motion нужен для пружин, жестов и layout-переходов. Для простого hover или короткого fade достаточно CSS transition — не увеличивать бандл без пользы.4546### Графики4748| Задача | Библиотека |49| --- | --- |50| Потоковые графики в реальном времени | [Liveline](https://github.com/benjitaylor/liveline) |51| Обычные графики и дашборды | [Recharts](https://recharts.org) |5253Если новые точки приходят постоянно, а временная шкала движется, использовать Liveline. Для статических и обычных интерактивных отчётов — Recharts. Для тяжёлых 1С-отчётов сначала агрегировать данные на сервере, а не перекладывать всю работу на браузер.5455### Взаимодействие и производительность5657| Задача | Библиотека |58| --- | --- |59| Drag-and-drop | [dnd kit](https://dndkit.com) |60| Виртуализация длинных списков и таблиц | [Virtuoso](https://virtuoso.dev) |6162При drag-and-drop всегда сохранять клавиатурный путь. Для больших таблиц из 1С проверить, нужна ли виртуализация обеих осей и не нарушит ли она работу экранного диктора.6364### Состояние и стили6566| Задача | Библиотека |67| --- | --- |68| Клиентское состояние | [Zustand](https://zustand.docs.pmnd.rs) |69| Условная сборка строки `className` | [clsx](https://github.com/lukeed/clsx) |70| Типобезопасные варианты компонентов в Tailwind | [CVA](https://cva.style) |71| Светлая/тёмная тема без вспышки при загрузке | [next-themes](https://github.com/pacocoursey/next-themes) |7273Использовать `clsx` для локальных условий. Выбирать CVA, когда у компонента есть оформленный набор вариантов (`size`, `intent`, `state`) и нужен типизированный API. Они могут работать вместе.7475## Типичные несоответствия7677- Toast-уведомления, сделанные вручную или через библиотеку модальных окон → рассмотреть Sonner.78- Dropdown или диалог на `div` с ручным управлением фокусом → использовать существующие примитивы проекта или Base UI.79- Число анимируется заменой текстовых узлов → NumberFlow корректнее обрабатывает разряды.80- Более тысячи строк рендерятся одновременно → проверить Virtuoso до добавления сложной пагинации.81- Общее состояние передаётся через длинную цепочку props → проверить, оправдан ли Zustand.82- В `className` вложены многоуровневые тернарные выражения → `clsx`, а для системных вариантов — CVA.8384## Проверка перед ответом8586- Открыть официальную документацию и подтвердить, что пакет поддерживается на момент рекомендации.87- Проверить лицензию и ограничения коммерческого использования.88- Не утверждать, что библиотека доступна для 1С-клиента: эти рекомендации относятся к веб-интерфейсам и внешним приложениям вокруг 1С.89- Назвать компромисс: размер, SSR, доступность или цена миграции — тот, который действительно важен для задачи.
Aleksandr-Litvinenko