Во многих случаях при разработке веб-сервисов и сайтов возникает необходимость в поиске готовых 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. Именно в этой экосистеме большая часть библиотек, на мой взгляд, действительно годная, особенно:

• tailark.com

• ui.paceui

• skiper-ui

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

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

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

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

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