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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

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!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay