Best FrontEnd & New ReUsable Component Libraries For React JS 2024.

andgoedu

ANDGOEDU

Posted on May 7, 2024

Best FrontEnd & New ReUsable Component Libraries For React JS 2024.

Preview.# Best FrontEnd & New ReUsable Component Libraries For React JS 2024
Youtube Video

1. ShadCN

  • ShadCN

    • Description: This is not a library of components. You can copy and paste this collection of reusable components into your apps.
  • Advantages:

    1. Ownership and Control over Components✔️
    2. Style is not coupled with the implementation✔️
    3. Works on Any Framework That Supports React Like Next.js, Astro, Remix, Gatsby etc.✔️
  • Improvements:

    1. Harder to Setup for beginners ❌

2. Plate.js

  • Plate.js
  • plate - github

    • Description: Plugin system & primitive component library. CLI for styled components. Customizable. Open Source
  • Advantages:

    1. Easier to Setup ✔️
    2. Code and Custom Plugins Can be Set.✔️
    3. Based On RadixUI, and ShadCN/UI.✔️
  • Improvements:

    1. Newer Library With a unique way to setup that can be simplified.❌

3. Radix UI

  • Radix UI

    • Description: A pre-styled component library called Radix Themes is intended to function right out of the box with little setup required. Visit Radix Primitives if you're seeking for the unstyled components.
  • Advantages:

    1. Works on Any Framework That Supports React Like Next.js, Astro, Remix, Gatsby etc.✔️
    2. Can Install an icon package as well npm i @radix-ui/react-icons✔️
    3. Can have a custom Color Palette like TailwindCSS Custom Colors.✔️
    4. Can Install individual Components using Primitives.✔️
  • Improvements:

    1. Harder to Setup ❌
    2. No Ownership and Full Control over Components❌

4. Acternity UI

  • Acternity UI

    • Description: A UI library with visually appealing components built on Next.js, React, TailwindCSS, and Framer Motion.
  • Advantages:

    1. Works on Any Framework That Supports React Like Next.js, Astro, Remix, Gatsby etc.✔️
    2. Best UI Looking Components✔️
    3. Can Install Multiple Free Reusable Components.✔️ Components
    4. Ownership and Full Control over Components
  • Improvements:

    1. Needs some dependencies to work properly (framer-motion clsx tailwind-merge @tabler/icons-react), however, these packages are what makes it simple to use something like Acternity UI.❌

5. NextUI

  • NextUI

    • Description: With the aid of the React UI library NextUI, you can create stunning and easily navigable user interfaces. Built around React Aria and Tailwind CSS.
  • Advantages:

    1. Independent community project From Vercel. ✔️
    2. Built on React TailwindCSS ✔️
    3. Can Install individual Components✔️
    4. Provides a set of accessible and customizable components, hooks, and utilities.✔️
💖 💪 🙅 🚩
andgoedu
ANDGOEDU

Posted on May 7, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React Basics~unit test/custom hook
webdev React Basics~unit test/custom hook

October 27, 2024

React Basics~unit test/async test
webdev React Basics~unit test/async test

October 24, 2024

React Basics~unit test/user event
webdev React Basics~unit test/user event

October 21, 2024

React Basics~unit test/ui
webdev React Basics~unit test/ui

October 20, 2024