DEV Community

ANDGOEDU
ANDGOEDU

Posted on

12 1 1 2

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.✔️

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (3)

Collapse
 
senninseyi profile image
Senninseyi

You didn't add Ant Design .... compared to the rest antd >>> {...the rest of the UI Librarys}

Collapse
 
andgoedu profile image
ANDGOEDU

ANT Design is considered old UI Library , the first release was back at 2015 ANT-Design Release on GITHUBthis was targeted to new Libraries as mentioned i can make another article on Old UI Libraries too thanks for the idea.

Collapse
 
raymelon profile image
Raymel Francisco

Thanks for sharing this. Acternity UI looks promising, I am tempted to try this on my future projects!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Retry later