Загружаем страницу.
свайпфайл · обновлено 2026-10-07
Готовые UI-компоненты: 30 библиотек с превью
Готовые кнопки, формы, блоки лендингов и интерфейсы агентов. Выберите пример по виду и задаче — и заберите код в проект.
Нажмите на превью, чтобы рассмотреть детали. Кадры статичные; по ссылке «Демо и код» можно проверить анимацию.
| библиотека и превью | когда полезно | автор | код и данные |
|---|---|---|---|
| База проекта | |||
 shadcn/uiКнопки, формы и карточки приложения Демо и код | когда полезнобаза проекта: кнопки, формы, диалоги; компоненты копируются в проект и становятся основой вашей дизайн-системы | авторshadcn · Vercel | код и данные 120 668 ★ GitHub |
 HeroUIФормы, переключатели и карточки приложения Демо и код | когда полезноприложение с формами и таблицами, где нужна доступность из коробки; это npm-пакет, не копипаста | авторкоманда HeroUI (ex-NextUI) | код и данные 30 315 ★ GitHub 512 785 скачиваний npm в неделю |
| coss ui (ex-Origin UI) Accordion: раскрывающиеся панели на Base UI Демо и код | когда полезноБазовые формы, меню и панели на Base UI. Origin UI переехал сюда; компоненты coss ui активно развиваются. | авторкоманда coss | код и данные Компоненты apps/ui и apps/origin: MIT Код / CLI · остальные части монорепо: AGPLv3 |
| Kibo UI | когда полезноРабочий кабинет: диаграмма Ганта, канбан, календарь, редактор и загрузка файлов. Готовые составные компоненты поверх shadcn/ui. | авторKibo · shadcnblocks | код и данные MIT · Kibo CLI / shadcn CLI Бесплатная открытая библиотека |
| Neobrutalism | когда полезноЯркий интерфейс с толстыми контурами и жёсткими тенями: кнопки, формы и карточки в одном стиле. | авторкоманда Neobrutalism | код и данные Базовые компоненты MIT · shadcn CLI Есть отдельные платные блоки Pro |
| Анимации и вау-эффекты | |||
 React BitsSpecular Button: блик на объёмной кнопке Демо и код | когда полезнонужен анимированный текст, фон или эффект на секцию: скопировал код и вставил | авторDavid Haz (@davidhdev) | код и данные 44 941 ★ GitHub 4 варианта: JS/TS × CSS/Tailwind |
 Magic UIRainbow Button: радужное свечение вокруг кнопки Демо и код | когда полезнолендинг на shadcn-стеке, которому нужен слой анимации | автороткрытый проект | код и данные 21 819 ★ GitHub 150+ компонентов |
 Cult UIShift Card: карточка с раскрытием деталей Демо и код | когда полезноанимированные shadcn-блоки на Framer Motion с редакционным вкусом | авторNolly Studio | код и данные 6 036 ★ GitHub |
 Motion PrimitivesКарточка товара с раскрытием в диалог Демо и код | когда полезноинженерные motion-примитивы на Framer Motion без визуального перебора | авторJulien Thibeaut (@ibelick) | код и данные 5 839 ★ GitHub 8 687 скачиваний npm в неделю |
| Shaders | когда полезноСобрать анимированный фон, стеклянный эффект или реакцию на курсор в визуальном редакторе, затем экспортировать код для сайта. | авторShader Effects | код и данные WebGPU · компоненты MIT · npm / CLI / MCP Редактор и экспорт кода бесплатны; готовые пресеты Pro оплачиваются отдельно |
 AnimataAI Button: кнопка с движущимся градиентом Демо и код | когда полезноГотовые анимированные кнопки, карточки, фоны и текстовые эффекты для React | авторCodse | код и данные 2 771 ★ GitHub |
 Aceternity UIЭффекты для лендинга: объёмные карточки и фоны Демо и код | когда полезноhero-секция с вау-эффектом: 3D-карточки, beams, particle-фоны | авторManu Arora | код и данные Код в документации и через CLI Есть платные блоки и шаблоны |
 SmoothUIАнимированные интерфейсы и эффекты материалов Демо и код | когда полезноspring-микроанимации: мелкая моторика интерфейса | авторEdu Calvo (@educlopez) | код и данные 877 ★ GitHub |
 Transitions.devСценарии появления, переключения и раскрытия интерфейса Демо и код | когда полезноНужны переходы для меню, модальных окон и вкладок: код можно скопировать или подключить скилл с готовыми анимациями для агента | авторJakub Antalik (@Jakubantalik) | код и данные 27+ переходов в скилле Часть эффектов доступна по Pro |
| Joly UI | когда полезноВыразительная кнопка для главного действия: жидкий металл, стекло, блики. Есть также формы и эффекты текста. | авторJohuniq | код и данные MIT · копирование кода / shadcn CLI Liquid Metal использует WebGL |
| Lightswind UI | когда полезноКнопки с голографическим или жидким эффектом, объёмные карточки и фоны для лендинга. | авторMUHILAN и команда | код и данные Открытая библиотека MIT · CLI / MCP Отдельная платная коллекция Pro |
| Animate UI | когда полезноДобавить движение обычным элементам приложения: меню, вкладкам, диалогам и иконкам. Есть варианты на Radix, Base UI и Headless UI. | авторSkyleen | код и данные MIT · shadcn CLI React · Tailwind CSS · Motion |
| UI Layouts | когда полезноСобрать необычную галерею, перетаскиваемые блоки или анимированные окна и док в стиле macOS. | авторNaymur | код и данные Открытая библиотека MIT · копирование / CLI Платные блоки и шаблоны — отдельный Pro |
| Eldora UI | когда полезноПоказать продукт на лендинге: анимированные схемы, объёмные плитки с иконками и макеты устройств. | авторKarthik Mudunuri | код и данные MIT · копирование кода / shadcn CLI React · Tailwind CSS · Motion |
| Каталоги готовых блоков | |||
 21st.devКомпоненты разных авторов: кнопки, меню и карточки Демо и код | когда полезнонужен готовый блок под конкретную секцию (hero, прайсинг, футер); забирается промптом в Cursor или Claude Code | авторкомьюнити дизайн-инженеров · YC W2026 | код и данные 12 000+ компонентов в каталоге 5 381 ★ GitHub у open source ядра |
 uiverse.ioКнопки, переключатели и небольшие эффекты Демо и код | когда полезномикро-деталь: кнопка, лоадер, чекбокс; экспорт в HTML/CSS, Tailwind, React и Figma | автороткрытое комьюнити | код и данные 5 800+ элементов на сайте |
 BenchoИнтерактивные блоки: подпись, кнопки и переключатели Демо и код | когда полезноНужны интерактивные меню, переключатели или слайдеры: параметры настраиваются на сайте, затем код копируется в проект | авторLorenzo Cabra (@cabralorenzo) | код и данные 29 блоков в каталоге Код блоков: MIT |
| shadcn.io | когда полезноНайти варианты кнопок, блоков и тем. Это самостоятельный каталог, не официальный shadcn/ui. | авторAzencot LLC | код и данные Копирование кода / shadcn CLI · есть Pro Pro Individual — только некоммерческие проекты; для коммерции Team / Organization |
| Интерфейсы агентов | |||
 Kokonut UIПоле промпта с выбором модели Демо и код | когда полезноИИ-интерфейсы: инпуты чата, голосовые элементы, particle-кнопки | авторKokonut Labs | код и данные 2 002 ★ GitHub |
 Thinking OrbsАнимированные сферы для состояний голосового агента Демо и код | когда полезноиндикатор «агент думает» в чате или в строке статуса: девять точечных орбов-состояний (ищет, решает, слушает) на канвасе, ставится npm-пакетом без зависимостей | авторJakub Antalik (@Jakubantalik) | код и данные 1 923 ★ GitHub 143 192 скачивания npm в неделю |
| ElevenLabs UI | когда полезноГолосовой агент: сфера с состояниями разговора, звуковая волна, аудиоплеер и выбор микрофона. | авторElevenLabs | код и данные MIT · ElevenLabs CLI / shadcn registry Сервисы и API оплачиваются отдельно от UI |
| AI Elements | когда полезноЧат с агентом: сообщения, источники ответа, ход рассуждений, вызовы инструментов и схема рабочего процесса. | авторVercel | код и данные Apache-2.0 · CLI / shadcn registry Компоненты для AI SDK; стоимость API отдельно |
| Нишевые и экспериментальные | |||
 Canvas UIWebGL-эффекты над обычным HTML Демо и код | когда полезнопосмотреть, куда жанр идёт: WebGL-эффекты поверх обычного DOM, текст остаётся текстом | авторDavid Haz (@davidhdev) | код и данные 3 494 ★ GitHub |
 vgpuГалерея шейдеров для WebGPU Демо и код | когда полезнонужен шейдерный фон или 3D-сцена: агент берёт готовый пример, а один шейдер работает в браузере и headless Node.js | авторVercel Labs | код и данные 563 ★ GitHub рендер-тесты в CI |
 Skiper UIПоля ввода с анимацией и турнирная сетка Демо и код | когда полезнонишевые формы-интеракции и layout-примитивы, которых нет у крупных | авторинди-проект | код и данныеНе замеряли |
Превью и новые библиотеки проверены 01.10.2026 по официальным сайтам и репозиториям; Shaders добавлен и проверен 2026-10-07. Условия открытого кода и платных Pro-коллекций могут различаться. Исторические метрики сохранены с датами: основной срез GitHub/npm — 2026-08-06, vgpu — 2026-08-28, Transitions.dev — 2026-09-13, Bencho — 2026-09-13. Они не обновляются в реальном времени.
Референсы и фоны
Здесь можно выбрать вид экрана, поведение анимации или фон. Покажите агенту конкретный пример и опишите, что хотите повторить. Для реализации подберите компоненты из таблицы выше. Галереи референсов помогают с идеями; доступ к готовому коду зависит от сервиса. Для ролика с демонстрацией продукта есть подборки видео и анимации.
- Mobbin — Посмотреть экраны и пользовательские сценарии реальных приложений перед сборкой формы, меню или онбординга.
- Refero — Найти примеры таблиц, дашбордов и других элементов в реальных веб-продуктах и iOS-приложениях.
- Land-book — Выбрать пример композиции, типографики и блоков для лендинга.
- Inspora — Найти визуальную идею в подборках веб-дизайна, продуктов и анимации.
- 60fps — Посмотреть в движении переходы и взаимодействия в мобильных интерфейсах.
- Backgrounds Supply — Подобрать и скачать фон для сайта или приложения. Коллекция платная; условия использования указаны на сайте.
Ссылки проверены 07.10.2026.
Без конкретного примера
«Сделай красивый современный лендинг с плавными анимациями и вау-эффектом»
Неясно, какой именно результат вы хотите получить.
С выбранным компонентом
«Возьми Specular Button из React Bits, установи по документации и поставь на кнопку «Обсудить проект». Подстрой цвета под сайт.»
У агента есть конкретный образец, исходники и понятная задача. После установки проверьте клавиатуру, мобильный экран и режим уменьшенной анимации.
Создание проекта разобрано в гайде по первому техстеку.
Выбранный компонент можно включить в задачу для ИИ-агента.
Нужны ещё и векторные иконки? QuiverAI создаёт SVG для интерфейсов.
