Во многих случаях при разработке веб-сервисов и сайтов возникает необходимость в поиске готовых UI-компонентов — как для вдохновения, так и для ускорения работы над интерфейсом. Подобные решения будут полезны всем, кто занимается веб-дизайном и веб-разработкой.
В статье представлена подборка ресурсов с качественными и интересными UI-компонентами. Список будет дополняться по мере появления действительно хороших библиотек.
Сначала — любимые
1. 21st.dev
Ссылка: https://21st.dev/
Реестр классных и популярных UI-компонентов в основном React с Tailwind CSS. Большинство публикуемых компонентов являются open-source. Здесь выкладывают свои работы как авторы-энтузиасты, так и создатели собственных библиотек (например, Magic UI). Поэтому помимо самого реестра можно познакомиться и с большим количеством других UI-библиотек.
Годно? Да. Лично я нашёл здесь действительно классные компоненты, повторяющие дизайн различных веб-сайтов (например, часто встречаются компоненты в стиле Vercel).
2. UIverse
Ссылка: https://uiverse.io/
Open-source библиотека готовых UI-элементов для веб-разработки и дизайна интерфейсов. На сайте собрана большая коллекция компонентов, созданных сообществом, которые можно копировать и использовать в проектах в виде HTML/CSS, Tailwind CSS или React, а также вставлять в Figma для проектирования.
Годно? По ситуации. Несмотря на большое количество компонентов, действительно ценных я нашёл только у 3–4 авторов (например, SelfMadeSystem, который хорошо повторил карточки с сайта Huly). Однако, если не учитывать мои достаточно жёсткие требования, библиотека действительно интересная, и, возможно, каждый найдёт для себя что-то полезное.
3. React Bits
Ссылка: https://reactbits.dev/
Один из моих любимых open-source React-авторов в области анимаций и фонов. Помимо этого, у него есть готовые компоненты для карточек, текста и других элементов. Однако приоритет здесь всё же отдан анимациям и фонам.
Годно? Очень. Кстати, автор недавно обновил сайт и добавил фичу, похожую на ту, что есть в моей UI-библиотеке — background studio. Также стоит отметить, что для тех, кто работает с Vue, автор делает компоненты не только на React: https://vue-bits.dev/
4. Magic UI
Ссылка: https://magicui.design/
Open-source библиотека UI-компонентов, ориентированная на frontend-разработку интерфейсов для React с Tailwind CSS и Framer Motion.
Годно? По ситуации. Лично мне здесь в основном понравился раздел Special Effects и несколько других компонентов, например Dot Map.
5. Spline
Ссылка: spline.design
это онлайн-платформа для создания интерактивного 3D-дизайна, которая позволяет дизайнерам (и не только) быстро и визуально создавать 3D-объекты, сцены, анимации и интерактивные элементы, а затем экспортировать их для использования в веб-проектах, мобильных приложениях и других продуктах.
Годно? Очень. Не могу назвать сервис полностью бесплатным, но фишка в том, что там есть огромная библиотека уже готового бесплатного интерактивного 3D-дизайна от разных авторов, и их достаточно легко скопировать в проект. Единственный, пожалуй, недочёт — оптимизация: нужно постараться, чтобы компоненты (особенно 3D и тяжёлые сцены) корректно работали на мобильных устройствах, то есть чтобы при заходе пользователя с телефона сайт не зависал.
6. Shaders Paper Design
Ссылка: shaders.paper.design
Open-source проект, представляющий легковесную библиотеку шейдеров для веба, которые можно использовать на сайтах и в интерфейсах для создания визуальных эффектов и динамичных фонов. Проект делает акцент на HTML Canvas / WebGL-шейдеры без зависимостей, которые можно установить через npm и использовать напрямую в коде.
Годно? Да. Несмотря на то что шейдеров пока немного, очень порадовало, что они не имеют зависимостей и в первую очередь ориентированы на популярные визуальные эффекты.
Остальной список
Radix UI
Ссылка: https://www.radix-ui.com/
Open-source библиотека UI-компонентов для веб-разработки, ориентированная прежде всего на React. Основная идея — предоставить базовые (примитивные) компоненты с полной логикой поведения.
shadcn/ui
Ссылки:
Open-source библиотека UI-компонентов и платформа для их распространения, ориентированная на React + Tailwind CSS и подход, при котором разработчик получает полный исходный код компонентов для гибкой интеграции и кастомизации.
В самом Registry Directory представлен огромный список других UI-библиотек, интегрированных в экосистему shadcn. Именно в этой экосистеме большая часть библиотек, на мой взгляд, действительно годная, особенно:
- tailark.com
- ui.paceui
- skiper-ui
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, теперь требуют либо регистрации в системе автора, либо покупки.
Поэтому иметь собственный реестр, где все эти компоненты будут сохранены и всегда доступны другим, кажется мне хорошей идеей — даже если эти компоненты уже где-то встречались.