7 New React Component Libraries You Need Now

7 Amazing React Component Libraries You Need to Know Built on Top of Shadcn UI (That Are Actually New!)

Remember when I shared the best React component libraries a month ago? Well, turns out I was just scratching the surface. I've since discovered seven more incredible libraries, and honestly, they might be even better.

I'm talking about everything from clean, foundational components to slick, animated UIs powered by Framer Motion, and even complete, ready-to-use website sections that will seriously impress... well, whoever sees your projects.

And the best part? Just like before, all of these libraries are completely open-source and free to use. Oh, and stick around to the end because I have a bonus website to share that offers over 100 free background patterns to make your sites look unique.

Let's dive into these seven new component libraries!

1. RUI (Re-UI)

First up is RUI. This library is a bit more basic, but in a really good way. It's built on top of Tailwind CSS, React, Next.js, Radix UI, shadcn/ui, and Framer Motion for those smooth animations.

What makes it special:

• Beautiful Variations: RUI takes standard shadcn/ui components and gives them a fresh look. For example, their tabs come with variations featuring beautiful icons, badges, and pill designs.

• Powerful Data Grid: Building data grids is notoriously complex. RUI offers a pre-built data grid (based on TanStack Table) with features like status indicators (Approved, Pending), all working seamlessly right out of the box.

• Frequent Updates: The team behind RUI is incredibly active, shipping new features and components almost every week. Their latest addition is a stunning charts component.

• UI Blocks: Beyond individual components, RUI also offers UI blocks like statistic cards, line charts, and area charts.

My Rating: 8/10. It's powerful, actively maintained, and the components are beautifully designed.

2. TailArk

TailArk is the complete opposite of RUI. Instead of individual components, it focuses on complete, full-on sections for modern websites.

What makes it special:

• Stunning Hero Sections: TailArk's hero sections are beautiful and responsive, featuring smooth animations and cool effects like contracting navbars on scroll.

• Diverse Blocks: You'll find a wide variety of sections, including logo clouds, feature sections, and clean, powerful signup sections.

• Bento Grid: Their bento grid component is particularly impressive, offering a trendy, responsive layout that looks great on any device.

• Themes: TailArk comes with two themes: "Dusk" (with animations) and "Mist" (a simpler, animation-free theme).

My Rating: 9/10. I love this project. It's a hidden gem that offers high-quality, responsive sections that are easy to integrate.

3. Motion Primitives

You might already know Motion Primitives, but it's worth mentioning again because it's such a powerful library. It heavily utilizes Framer Motion for smooth animations.

What makes it special:

• Framer Motion Integration: All components are built with Framer Motion, resulting in incredibly smooth animations and interactions.

• Unique Components: Motion Primitives offers some unique components like a macOS-style dock, a spotlight effect, an animated toolbar, and a scroll progress bar perfect for blogs.

• Simple & Clean Code: The code for these components is simple, clean, and easy to integrate, especially with the shadcn CLI.

My Rating: 7/10. It's a high-quality library, but it could benefit from more components.

4. kokonut UI

kockonut UI is another fantastic library that heavily leverages Tailwind CSS, Framer Motion, shadcn/ui, Next.js, and React.

What makes it special:

• Smooth Animations: Coconut UI excels at smooth animations, something that Tailwind CSS alone often struggles with.

• Bento Grid with Internal Animations: Their bento grid is a standout, featuring not only entrance animations but also smooth animations within the cards themselves.

• Interactive Components: They offer a variety of interactive components like a currency transfer component with state updates, a file upload component with progress indication, and a beautiful AI input selector.

• Unique Buttons: You'll find unique button types like hold buttons, social buttons with hover options, and command buttons.

My Rating: 9/10. This is one of my favorite libraries. It offers a wide range of high-quality, free components with beautiful animations.

5. Smooth UI

As the name suggests, Smooth UI is all about smoothness, powered by Framer Motion.

What makes it special:

• Smooth Interactions: Every component, from buttons to cards, features smooth and delightful animations.

• Dynamic Island: They have a beautiful "Dynamic Island" component that mimics the iPhone feature, perfect for notifications or calls.

• Expandable Cards: The expandable cards component is excellent for showcasing more information in a visually appealing way.

• Testimonial Block: Their testimonial block impressed me with its smooth transitions and progress bar.

• Theme Selector: It even comes with its own theme selector, allowing you to easily switch between pink and blue themes.

My Rating: 8/10. High-quality components with beautiful animations, but again, more components would be even better.

6. Cult UI

Cult UI is a powerful library built on top of shadcn/ui and Framer Motion, offering a large collection of components.

What makes it special:

• Large Component Library: Cult UI has a wide variety of components, including feature carousels, intro disclosures, popover forms, and a YouTube video player.

• Dynamic Island & Tweet Grid: They also offer a dynamic island component and a tweet grid, perfect for social proof on SaaS websites.

• Optimized Workflow: The library is optimized for developers, offering easy integration with V0 and clear code examples.

My Rating: 8/10. It's a powerful library with many components, but it lacks a consistent design language across all components.

Bonus: Pattern Craft

Okay, this last one isn't a component library, but it's an incredible resource for making your websites look unique. Pattern Craft offers over 100 professional-grade background patterns and gradients.

What makes it special:

• 100+ Patterns & Gradients: A huge variety of backgrounds to choose from, including options for both light and dark modes.

• Instant Preview: You can preview the patterns instantly on the website.

• Easy Integration: Once you find a pattern you like, you can copy the Tailwind CSS JSX code directly and paste it into your project.

There you have it – seven amazing new React component libraries (and one bonus background resource) to elevate your projects. I hope you found this helpful!

If you enjoyed this post, please don't forget to like and share. It really helps me out. Happy coding!