Лучшие интерфейсные и новые библиотеки повторно используемых компонентов для React JS 2024

Лучшие интерфейсные и новые библиотеки повторно используемых компонентов для React JS 2024

1. ShadCN

ShadCN

• Описание: Это не библиотека компонентов. Вы можете скопировать и вставить эту коллекцию повторно используемых компонентов в свои приложения.

Преимущества:

• Право собственности и контроль над компонентами✔️

• Стиль не связан с реализацией✔️

• Работает на любой платформе, поддерживающей React, например Next.js, Astro, Remix, Gatsby и т. д.✔️

Улучшения:

• Сложнее настроить новичкам ❌

2. Plate.js

Plate.js

plate - github

• Описание: Система плагинов и библиотека примитивных компонентов. CLI для стилизованных компонентов. Настраиваемый. Открытый источник

Преимущества:

• Легче настроить✔️

• Можно установить код и пользовательские плагины.✔️

• На основе RadixUI и ShadCN/UI.✔️

Улучшения:

• Новая библиотека. Уникальный способ настройки, который можно упростить.❌

3. Radix UI

Radix UI

• Описание. Предварительно оформленная библиотека компонентов под названием Radix Themes предназначена для работы сразу после установки и требует минимальной настройки. Посетите Radix Primitives, если вы ищете компоненты без стилей.

Преимущества:

• Работает на любой платформе, поддерживающей React, например Next.js, Astro, Remix, Gatsby и т. д.✔️

• Также можно установить пакет значков npm i @radix-ui/react-icons✔️

• Может иметь собственную цветовую палитру, например Custom Colors TailwindCSS.✔️

• Можно установить отдельные компоненты, используя примитивы.✔️

Улучшения:

• Сложнее настроить ❌

• Отсутствие владения и полный контроль над компонентами❌

4. Acternity UI

Acternity UI

• Описание: Библиотека пользовательского интерфейса с визуально привлекательными компонентами, созданная на основе Next.js, React, TailwindCSS и Framer Motion.

Преимущества:

• Работает на любой платформе, поддерживающей React, например Next.js, Astro, Remix, Gatsby и т. д.✔️

• Компоненты, выглядящие лучше всего в пользовательском интерфейсе✔️

• Можно установить несколько бесплатных многоразовых компонентов.✔️ Компоненты

• Право собственности и полный контроль над компонентами

Улучшения:

• Для правильной работы требуются некоторые зависимости (framer-motion clsx Tailwind-merge @tabler/icons-react), однако именно эти пакеты упрощают использование чего-то вроде Aternity UI.❌

5. NextUI

NextUI

• Описание: С помощью библиотеки React UI NextUI вы можете создавать потрясающие и удобные в навигации пользовательские интерфейсы. Построен на основе React Aria и Tailwind CSS.

Преимущества:

• Независимый общественный проект From Vercel. ✔️

• Построен на React TailwindCSS ✔️

• Возможна установка отдельных компонентов✔️

• Предоставляет набор доступных и настраиваемых компонентов, перехватчиков и утилит.✔️