Пользовательский интерфейс — это «вау!»-фактор любого приложения. Что касается React-приложений, UI может быть довольно сложным. В этой статье мы собрали лучшие библиотеки и фреймворки, содержащие компоненты UI для React-приложений. Они точно пригодятся вам при создании пользовательских интерфейсов.
1. Ant Design
Ant Design — это язык дизайна и UI-библиотека React. Собственно, если ориентироваться на звезды на GitHub, это самая популярная библиотека такого рода. В ней вы найдете более ста разнообразных компонентов, от типографики до таблиц.
Ant-компоненты позволяют разработчикам экономить время. Например, благодаря готовым компонентам форм, разработчику не придется возиться с их созданием форм и валидацией.
Также Ant Design экономит время дизайнеров. Ко всем компонентам приложены файлы Sketch и Figma.
Компоненты Ant Design поддерживают и JSX, и TypeScript. Есть поддержка хуков. Документация Ant Design ясная и понятная, в ней много хороших примеров.
Звезд на GitHub — 73,8 тысячи.
2. Material-UI
Material-UI — тоже одна из самых популярных библиотек React. Это собрание простых и настраиваемых компонентов, благодаря которому ваши React-приложения станут быстрее, красивее и доступнее.
В Material-UI вы найдете больше ста компонентов. Кроме того, там есть больше тысячи иконок.
Библиотека предоставляет файлы Sketch, Figma иAdobe Xd для дизайнеров (правда, на платной основе).
Документация у библиотеки хорошая, содержит примеры кода.
Material UI используется в таких компаниях, как Spotify, NASA, Netflix и Amazon.
Звезд на GitHub — 70,3 тысячи.
3. Chakra UI
Chakra UI предоставляет набор React-компонентов, которые отличаются доступностью и пригодностью для компоновки и многократного использования. Создавать сайты и приложения с их помощью можно очень быстро.
Компоненты Chakra UI соответствуют спецификациям WAI-ARIA и имеют aria-* атрибуты.
От редакции Techrocks. WAI-ARIA — технологический стандарт, разрабатываемый Консорциумом Всемирной паутины для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями. Больше на тему обеспечения доступности в вебе можно почитать в статье «Что такое веб-доступность и как научиться делать доступные сайты и приложения».
Эта библиотека отличается хорошей производительностью, а кроме того с ней приятно работать. Благодаря этому сообщество Chakra UI быстро растет.
Библиотека имеет хорошую документацию с примерами кода.
Звезд на GitHub — 20 тысяч.
4. React Bootstrap
React Bootstrap делает возможным использование Bootstrap JS для React-компонентов.
В этом пакете вы найдете все компоненты Bootstrap, которые мы используем с JavaScript. Они созданы с нуля на React и не содержат jQuery.
React Bootstrap имеет тщательно продуманную документацию с примерами кода.
Звезд на GitHub — 19,8 тысячи.
5. Semantic UI React
Semantic — это фреймворк UI-компонентов, основанный на принципах естественного языка.
А Semantic UI React — официальная React-интеграция для Semantic-UI. Содержит больше 50 компонентов. В них не используется jQuery: вся функциональность была заново реализована на React.
Если для вашего React-приложения нужен Semantic UI, обратите внимание на эту интеграцию.
Звезд на GitHub — 12,4 тысячи.
6. Fluent UI
Fluent — кроссплатформенная система дизайна с открытым исходным кодом. Она помогает дизайнерам и разработчикам создавать привлекательные продукты — доступные, интернационализированные, с хорошей производительностью.
Fluent UI разработана Microsoft. Дизайн Fluent используется для устройств и инструментов Windows 10 и Windows 11.
Платформа имеет коллекцию утилит, React- и веб-компонентов для создания веб-приложений. Документация хорошая.
Звезд на GitHub — 12 тысяч.
7. Evergreen
Evergreen — UI-фреймворк для создания веб-продуктов. Компоненты Evergreen построены на основе React UI Primitive с расчетом на пригодность для компоновки. Разработчики компонентов — команда Segment и внешние контрибьюторы.
Evergreen содержит больше 30 компонентов. Документация тоже производит хорошее впечатление.
Звезд на GitHub — 11 тысяч.
8. Reactstrap
Reactstrap — библиотека, содержащая React-компоненты для Bootstrap 4. Она проста в настройке и использовании, имеет хорошую документацию.
Звезд на GitHub — 10,1 тысячи.
9. Grommet
Grommet — фреймворк на базе React. Это доступность, модульность, адаптивность и красивые темы в одном аккуратном пакете.
В Grommet вы найдете больше 60 компонентов. Он также предоставляет Sketch, Figma, AdobeXd файлы и больше 600 иконок.
Этот фреймворк используется Netflix, Samsung, Uber, Boeing, IBM и другими компаниями.
Звезд на GitHub — 7,4 тысячи.
10. Reakit
Reakit — библиотека низкоуровневых компонентов для создания доступных высокоуровневых UI-библиотек, систем дизайна и приложений на React. Отличается маленьким размером и высокой скоростью.
Звезд на GitHub — 5 тысяч.
11. Mantine
Mantine — библиотека компонентов и хуков React с нативной поддержкой темной темы. В фокусе этой библиотеки удобство использования, доступность и удобство для разработчика.
Mantine содержит больше ста настраиваемых компонентов и хуков.
Звезд на GitHub — 1,8 тысячи.
Заключение
Использование UI-библиотек позволяет экономить время и снижает необходимость в большем количестве зависимостей. Конечно, таких библиотек значительно больше, чем представлено в этом списке. Мы собрали лишь самые широко используемые. Надеемся, вам они пригодятся.
От редакции Techrocks. Возможно, вас также заинтересуют другие статьи о React:
- 21 хорошая практика для очень хороших React-проектов
- 6 лучших практик для React-разработчика
- 7 проектов на React, которые стоит создать в 2021 году
Перевод статьи «10 React Packages with 1K UI Components».
