Во многих случаях при разработке веб-сервисов и сайтов возникает необходимость в поиске готовых UI-компонентов — как для вдохновения, так и для ускорения работы над интерфейсом. Подобные решения будут полезны всем, кто занимается веб-дизайном и веб-разработкой.

В статье представлена подборка ресурсов с качественными и интересными UI-компонентами. Список будет дополняться по мере появления действительно хороших библиотек.

Сначала — любимые

h21st.dev — реестр классных и популярных UI-компонентов в основном React с Tailwind CSS. Большинство публикуемых компонентов являются open-source. Здесь выкладывают свои работы как авторы-энтузиасты, так и создатели собственных библиотек (например, Magic UI). Поэтому помимо самого реестра можно познакомиться и с большим количеством других UI-библиотек.

Годно? Да. Лично я нашёл здесь действительно классные компоненты, повторяющие дизайн различных веб-сайтов (например, часто встречаются компоненты в стиле Vercel).

uiverse.io — open-source библиотека готовых UI-элементов для веб-разработки и дизайна интерфейсов. На сайте собрана большая коллекция компонентов, созданных сообществом, которые можно копировать и использовать в проектах в виде HTML/CSS, Tailwind CSS или React, а также вставлять в Figma для проектирования.

Годно? По ситуации. Несмотря на большое количество компонентов, действительно ценных я нашёл только у 3–4 авторов (например, https://uiverse.io/profile/SelfMadeSystem, который хорошо повторил карточки с сайта Huly). Однако, если не учитывать мои достаточно жёсткие требования, библиотека действительно интересная, и, возможно, каждый найдёт для себя что-то полезное.

reactbits.dev — один из моих любимых open-source React-авторов в области анимаций и фонов. Помимо этого, у него есть готовые компоненты для карточек, текста и других элементов. Однако приоритет здесь всё же отдан анимациям и фонам.

Годно? Очень. Кстати, автор недавно обновил сайт и добавил фичу, похожую на ту, что есть в моей UI-библиотеке — background studio. Также стоит отметить, что для тех, кто работает с Vue, автор делает компоненты не только на React: https://vue-bits.dev/

magicui.design — open-source библиотека UI-компонентов, ориентированная на frontend-разработку интерфейсов для React с Tailwind CSS и Framer Motion.

Годно? По ситуации. Лично мне здесь в основном понравился раздел Special Effects и несколько других компонентов, например Dot Map.

spline.design — это онлайн-платформа для создания интерактивного 3D-дизайна, которая позволяет дизайнерам (и не только) быстро и визуально создавать 3D-объекты, сцены, анимации и интерактивные элементы, а затем экспортировать их для использования в веб-проектах, мобильных приложениях и других продуктах.

Годно? Очень. Не могу назвать сервис полностью бесплатный но фишка в том что там огромная библиотека уже готовых бесплатных интерактивного 3D-дизайна от разных авторов и их достаточно легко скопировать в проект. Единственный наверное недочет будет в оптимизации, нужно постараться чтобы компоненты (особенно 3D и тяжелые) к примеру хорошо работали на телефонах( т.е когда пользователь зайдет с телефона к вам на сайт, сам сайт не зависал.)

shaders.paper.design — open-source проект, представляющий легковесную библиотеку шейдеров для веба, которые можно использовать в сайтах и интерфейсах для создания визуальных эффектов и динамичных фонов. Проект делает акцент на HTML canvas / WebGL шейдеры без зависимостей, которые можно установить через npm и использовать в коде!

Годно? Да! Несмотря на то что шейдеров пока мало, мне очень понравилось что там они без зависимостей ну и в первую очередь сделаны такие которые популярны.

Остальной список

Radix UI — open-source библиотека UI-компонентов для веб-разработки, ориентированная прежде всего на React. Основная идея — предоставить базовые (примитивные) компоненты с полной логикой поведения.

ui.shadcn и раздел https://ui.shadcn.com/docs/directory — open-source библиотека UI-компонентов и платформа для их распространения, ориентированная на React + Tailwind CSS и подход, при котором разработчик получает полный исходный код компонентов для гибкой интеграции и кастомизации.

В самом Registry Directory представлен огромный список других UI-библиотек, интегрированных в экосистему shadcn. Именно в этой экосистеме большая часть библиотек, на мой взгляд, действительно годная, особенно:

react-aria.adobe.com — это библиотека компонентов и хуков от Adobe, ориентированная на доступность (accessibility) для React-приложений. React Aria предоставляет низкоуровневые, полностью управляемые и доступные API для создания собственных UI-компонентов, обеспечивая корректное поведение с клавиатуры, поддержку экранных читалок и другие ARIA-паттерны.

devsloka.in — бесплатная библиотека UI-компонентов и блоков для веб-разработки, ориентированная в основном на React, Next.js, Remix и схожие фреймворки. В библиотеке представлены готовые секции и компоненты, особенно понравились карточки и фоны которых никогда не встречал(на заметку тем кто ищет новые компоненты)

❕Lightswind

Ссылка: https://lightswind.com/

Библиотека из 150+ анимированных React-компонентов на Tailwind CSS и Framer Motion. Отличается тем, что компоненты устанавливаются через собственный CLI — он сам определяет фреймворк (Next.js, Vite, React Router) и ставит только нужные зависимости, без лишнего. В наличии как стандартные UI-элементы (кнопки, карточки, формы), так и специфические: 3D-компоненты на React Three Fiber, графики, анимированные фоны и интерактивные эффекты вроде plasma globe или drag-order list.

Для кого: React-разработчики, которым нужны готовые анимированные компоненты и не хочется тратить время на сборку стека вручную.

❕Nocta UI

Ссылка: https://www.nocta-ui.com/docs

Современная React-библиотека, построенная на принципе copy-paste — как shadcn/ui, но написанная с нуля под максимальную кастомизацию. В основе лежит Ariakit, что даёт хорошую доступность из коробки: keyboard navigation, screen reader support, WCAG 2.1 AA. Полная поддержка TypeScript, CLI для быстрой установки компонентов, несколько встроенных тем (Charcoal, Jade, Copper, Cobalt).

Для кого: Разработчики, которым нужна альтернатива shadcn/ui с упором на accessibility и полным контролем над исходным кодом компонентов.

❕coss UI

Ссылка: https://coss.com/ui/docs

Библиотека от команды Cal.com (бывший Origin UI), построенная поверх Base UI — а не Radix, как большинство аналогов. Философия та же: copy-paste, код живёт в твоём проекте, никаких чёрных ящиков. Компоненты разделены на три слоя: примитивы (базовые доступные элементы), particles (готовые паттерны вроде форм и таблиц) и atoms (умные компоненты с интеграцией API). Разрабатывается в открытую — это то, что сам Cal.com постепенно переводит под свои продукты.

Для кого: Разработчики, которые хотят уйти от Radix/shadcn в сторону более современного и accessible фундамента, либо тем, кто ищет production-tested паттерны из реального продукта.

❕uilib.co

Ссылка: https://www.uilib.co/

Коллекция из 100+ бесплатных copy-paste React-компонентов и Tailwind CSS блоков. Построена на shadcn/ui, Radix и Framer Motion. Всё open-source, можно использовать в коммерческих проектах.

Для кого: Тем, кто работает в экосистеме shadcn и ищет дополнительные готовые блоки — секции лендингов, карточки, hero-блоки и прочее — без необходимости устанавливать отдельные пакеты.

❕Shadertoy

Ссылка: https://www.shadertoy.com/

Онлайн-платформа и сообщество для написания, просмотра и шаринга GLSL-шейдеров прямо в браузере через WebGL. Здесь нет готовых React-компонентов — это инструмент другого уровня. Можно открыть любой публичный шейдер, посмотреть его исходный код и адаптировать под свой проект. Библиотека огромная: процедурные фоны, анимированные эффекты, фракталы, имитации жидкостей, огня, туманностей и многое другое. Многие шейдеры без проблем переносятся в Three.js или WebGL-проекты.

Для кого: Разработчикам, которые хотят нестандартные визуальные эффекты для веба и не боятся разобраться с GLSL-кодом. Также отличный ресурс для тех, кто изучает шейдерное программирование — можно смотреть как это работает у других и тут же экспериментировать.

Но есть одно «но»

Несмотря на то что многие сервисы предоставляют компоненты как open-source, у некоторых из них есть платные компоненты (что можно понять - таким образом авторы получают доход от сервиса). Однако есть один момент, из-за которого я в ближайшее время верну свою UI-библиотеку в интернет (она будет доступна по адресу ui.opensophy.com).

В чём проблема и зачем я хочу это сделать? В первую очередь это будет архив компонентов, который всегда будет открыт и бесплатен. Возможно, возникнет вопрос: зачем? Дело в том, что я начал замечать, как некоторые компоненты, которые раньше были бесплатными и считались open-source, теперь требуют либо регистрации в системе автора, либо покупки. Поэтому иметь собственный реестр, где все эти компоненты будут сохранены и всегда доступны другим, кажется мне хорошей идеей — даже если эти компоненты уже где-то встречались.

Статья доступна на Хабе opensophy: https://hub.opensophy.com/article/tools-and-services/vibecoders-and-web-developers-ui-components/

Статьи, блоги и документации в первую очередь выходят и обновляются на Хабе с указанием автора и соавторов.