Top 7 React Component Libraries Built on ShadCN UI in 2024

I literally found the best React component libraries built on top of Shad and UI. But wait,

hold up. Wait a minute. Something ain't right. Didn't I say the exact same thing 1

month ago when I released this video right here? Yeah, I did. But guess what? I found even more gems. Everything from

clean base components that are perfect for building foundations to slick animated ones powered by Framer Motion.

I mean, just look at the smoothness. And I even found complete UI sections designed to impress you, your friends,

and your non-existent customers. Okay, I'm joking. Or am I? And if you stick around till the end, I will even show

you a cool website that gives you access to over 100 backgrounds that you can use to make your websites look unique. Oh,

and of course, all of these libraries are completely open source and with that, free to use. So, with all of that

out of the way, let's check out the seven component libraries I found. Let's go. All right. So, the first library I

want to share with you guys is called Reui. And by the way, all of the names are

right here listed on the top left corner. Now, this is a very interesting library because it's more on the basic

side of things, but this isn't a bad thing. So, it uses tin CSS, React, Nex.js, Radics UI, Chat CN UI, and even

Framer Motion for nice animations. So let's look at a few components. If you scroll to the bottom, you will find a

lot of components or in other words, categories for components. Let's maybe start with the tabs component. So this

right here is just the standard chat and UI component as we all know it. But if we scroll a bit to the bottom, then you

will find nice variations with these beautiful icons or with badges or right here. This is like a button design which

also looks kind of cool. They have a pill design. Yeah, I like that. A line design. And just in general, you will

see that it's very shad C and UI heavy, but with nice variations. They also have this data grid component. If you scroll

a bit to the bottom, you will find nice variations. This looks kind of cool. And if I click on the buttons, everything

works, of course. And this is also built on top of tan stack table. Now, if you have ever built data grids, then you

will know how complicated it is to build such a nice looking table. And let's scroll a bit to the bottom. W this is

even better. Approved, pending. Again, everything works right here. We also have this variation. What I like quite a

lot about this library is that they literally ship the whole time. Weekly new feature releases. If you go into the

change log, you will see right here they literally ship pretty much every week. What's the most recent release? The

charts component. So, let's look at the preview. Oh my god, it looks beautiful. Damn, this is like Stripe. I wish I

would also generate so much revenue. Sadly, I don't. On the top corner, you will find two links. A components link

with all of the components and a UI blocks section. And here you literally find sections. So for example, statistic

cards, line charts, area charts, and this is also quite cool. Now, if I would have to rank this library on a scale

from 1 to 10, then I would give this a solid eight because it's powerful, the team ships a lot, and just in general,

the components are built very nicely. But now before we continue with the next library, I want to thank today's

sponsor, Kodo, for supporting this video. So, Kodo has this feature called Merch. It's a Git plugin that literally

reviews your code for you. But here's the crazy part. It actually understands your code base, like your naming

conventions, your structure. This is not just generic AI stuff. How, you might ask? Well, it indexes your codebase.

Check this out. I'm in APR. I just drop a slash review comment and it spits out legit feedback, security notes, logic

bucks, cleanup tips, all tailored to this project. And you can even ask questions about the code using the slash

ask command like what is this function doing? It replies with contextaware answers. Then if I want to change

something, I just type /implement fix logic and it writes the code for me. That's wild. And here's the best part.

You can try out Kodo merch and the whole platform completely free right now. No strings attached. Just hit the link down

below in my YouTube description and get started right away. Big shout out to Kodo for supporting this cool video. And

now let's get back to some saucy component libraries. The next library I want to share with you guys is called

Tail Arc. Now this is the complete opposite to Wii UI because these are complete full on sections. So as they

say right here, blocks for modern websites and they are responsive and just beautiful. Let's look at this hero

section and look at this animation again. I will do a hard refresh. Oh my god, this looks so beautiful. And if you

scroll to the bottom, this background image is kind of cool with these stars. And then we have these logos. And also,

if I hover over them, we get this nice animation. Just in general, this is super high quality. Oh, and by the way,

look at the navbar. If I scroll to the bottom, it literally like contracts and we have this blur. It's beautiful. Let's

look at a few more components. So, this is the hero component. Here they have another hero section. Then for example,

this features section. This right here does not have any animations, but that's fine. It's still beautiful. And in

general, they have a lot of components. So if you click on blocks, you will find all of the sections on the top navbar.

So they have hero sections, logo cloud sections, features sections, and for example, I quite like the signup

sections because they are clean, but they are powerful, and that's what I want. And by the way, the feature

section is also kind of mind-blowing because these components are simple. Yes, not groundbreaking. But if you

scroll to the bottom, you will find these nice looking sections. This is probably one of my most favorite

components because this is like this bento grit which is kind of hyped as you all know and it looks beautiful and

again it's responsive. So if I go to a mobile screen it works totally. Let's maybe also quickly look at the code. I

reviewed the code. The code is good. They have area labels and in general I have been following the team that has

built this library already for quite some time and they did a great job. Now here's the interesting thing. They have

two themes. First of all, the dusk theme. That's what we see right here. And then they have a mist theme. The

mist theme is pretty much a theme which is a bit more simple. There are no animations, but that's fine. Again, you

don't want to always have animations. Sometimes animations overpower the whole web experience. And right here, for

example, this is the pricing section. Again, it's simple but beautiful. On a scale from 1 to 10, I would give it a

solid nine because honestly, I love this project and it's a gem that I have been hiding myself already for quite some

time. The next library I want to share with you guys is called motion primitives. Now, I think some people

already know about motion primitives. Nevertheless, I want to share it with you guys because it's a powerful

library. So everything is built on top of framer motion or I guess the centerpiece of this website is framer

motion and all of the animations are smooth. This means if I click on this plus we get this nice dialogue or model

however you want to call it. If I scroll a bit to the bottom we get these nice components. Let's maybe look at all of

the components. You will find all of the components on the left side. And what components did I like? Well, first of

all, I was quite a big fan of the doc. This is quite similar to the MacOss dock. As you see right here at the

bottom, it has beautiful animations. And if we also look at the code, then you will see right here that this is simple

code but good code. And again, you can install it using the shad CN CLI. We can also look at the spotlight component.

This means if I hover over this thing, I get this nice spotlight in the background. Let's look at the toolbar.

If I click on the search bar, it has this animation. And in theory, this would be quite cool for a search bar.

So, who knows? Maybe I will update my search bar and add this beautiful component. Here they also have the

scroll progress component. I love animated scroll. This means if I scroll, it will have this nice progress bar on

the top. This is perfect for block applications. And if you have a block application, then please add this

component. This is a gamecher for customers because they know how many% they already wet. And in general, this

is a fancy component library. And if I would have to rank it on my beautiful scale, then I would give this a solid

seven. Why a seven? Good question. The reason for that is quite simple. This is a relatively simple library, which means

we don't have a lot of components. And if they would add more components, I would also update my score.

Nevertheless, all of these components are high quality and that's again a good thing. The next library I want to share

with you guys is called coconut UI. And if I do a hard refresh, you get this beautiful animation. So again, I will do

a hot refresh. It looks beautiful. So this again builds on top of tin CSS motion chats and UI next.js and React.

And also maybe you might ask me, hey Jan, why do all of these component libraries use motion and not Tin CSS?

Well, it's quite simple. Taywin CSS cannot create such smooth animations. So if I hover over this design systems

card, it's smooth. And let's look at the components in general. So here on the left side, you will see that they have a

lot of components. And let's start with the first component, the action search bar. Now, this as you see right here is

your typical search bar as I just showed you with my website Marshall Code. And in general, if I type something, we get

a result. It looks nice and we have animations with framer motion. Now, one of my most favorite components was this

bento grid. We have four cards and in general, not only do the cards animate in once they load, no, they also animate

inside. So, again, if I do a hard refresh, we have this animation. We have a animation right here and we have a

animation here. So this heavily uses frame motion and if we also look at the code. So I can just copy this and paste

it inside of here. Then you will see again that this is clean code. It uses frame motion. It has all of the class

names and it works. They also offer the shad CN UI CLI. Let's look at a few more components like for example the currency

transfer component. If I do a hard refresh, we get this beautiful animation and then it also updates the state.

Let's look at the file upload because this is a new component. I will upload a file. How about this one? It uploads and

once it uploads, we again get the initial state. Let's look at a few more components. As you all know, AI is very

hyped. Right here, we have the AI input selector. And my god, it looks better than the one which chat GPT offers. we

get this nice drop down. Oh my god, it looks beautiful. They also have a few buttons like for example the hold

button. I have to hold on this button for it to release or for example the social button. If I hover over it, I get

all of the options. Twitter, Instagram, the command button. If I click on command K, I get the search bar. This is

probably one of my most favorite component libraries which I found on the internet. Everything is high quality.

It's free to use. And if I would have to rank this library on my beautiful scale, then I would give this a solid nine.

There are a lot of components, everything from simple components to quite advanced components, and they are

free to use. The next library I want to share with you guys is called smooth UI. And here everything is centered around

smoothness. This means if I do a hard refresh, it's smooth. So, let's scroll a bit to the bottom. And you know what?

What's quite cool, they even have their own theme selector. So, if I'm not a big fan of pink, I can use blue. And you

know what? Let's use blue. Let's check out the first component. If I click on this button, we get this smooth

animation. If I click on these buttons again, it animates smoothly. We have this slide to power off button. This is

probably right here one of my most favorite components. This is like this dynamic island as you see right here.

The creator of Versel is calling us. And again, it animates smoothly and that's because everything is built on top of

framer motion. Let's look at all of the components. So, this is a very simple component, a job listing component. But

you know what? This would work very nicely in a real website. Damn, maybe I should create my own job listing portal.

Let's look at a few more components like for example the AI input one ask AI. Let's look at the photo tab. So if I

click on these buttons the images update and again it animates using framer motion. Let's look at the code quickly.

So they again offer the shared CN CLI. And here we even have the code if we want to just copy it. And the code is

also clean. Again I checked it out. And the nice thing is the creator took the time and he created comments for all of

the properties and in general it makes it way easier to work with these component libraries or in this case with

smooth UI. And let's look at one of my most favorite components and that's the expandable cards component. This means

if I click on this card, it animates beautifully and then we get this text. So, this probably would work very nicely

for an about section because it just looks beautiful. They also have a few blocks, not that many blocks, so three

in total. And I'm a big fan of the testimonial block because it impresses with its smoothness. As you see right

here, it has this progress bar and then we get a new testimonial. Now, if I would have to rank this on my beautiful

scale, then I would give this library a solid 8 out of 10 because the components are high quality, but it would be nice

to get even more components because as you see, the creator is skilled. The creator knows what he does. So, it would

be cool to get even more components. The next library I want to share with you guys is called Cult UI.

Cult. Now a lot of you probably already know about this library but I didn't show it to you last time so I will show

it today. Now this again is a powerful library built on top of chat and UI and of course framer motion and they have a

lot of components so we can go through them quickly. For example the feature carousel. If I click on step two we get

this nice update. We have this intro disclosure. For example the popover form. If I click on feedback, it

animates smoothly. And since this component library is already quite big, they also pretty much optimized

everything. You can open it in V 0ero. You get the code right here. It looks beautiful. I'm a big fan of this YouTube

video player. This is the thumbnail. And if I click on it, it will then play the video on YouTube. Oh my god, who

remembers this song? I was in school back then when this released. They also have this dynamic island component. And

for example, this tweet grid component is perfect for pretty much any SAS to validate that you have a great product.

This is powerful. It does not have any animations, but that's not needed. Now, if I would have to rank this library on

my beautiful scale, I would give it a solid eight, and that's because they have a lot of components. But there's

one thing that I'm missing, and that's one common design language. Not every component has the same design language.

This is a beautiful card component. Don't get me wrong, but the design is completely different to for example this

component. So I'm missing a consistent design language. But if you are fine with different components, then this is

a powerful library. And now the last library I want to share with you guys is not a component library, but instead it

offers professionalgrade background patterns and gradients for your websites. and they have over 100

patterns or in other words backgrounds for you to use. So let's check them out. So you can instantly test them out

because you can click on preview and then you instantly get the background and they have a mix. So they have

backgrounds that work for light mode and also backgrounds that work for dark mode. And this means you can test them

all out and if you like them then you can just click on copy and this will copy a taven CSS class. This means if I

paste it inside of here, this is JSX with T1 CSS and we even get comments which is again very handy. And by the

way, this library is called Pattern Craft. It's powerful. It looks beautiful. And they have a lot of

categories as you see right here. And in total, they have 120 backgrounds. Oh my god. And yes, everyone, these were in

total seven libraries. everything from basic components to nicely animated ones to complete UI sections and even a

website that offers over 100 backgrounds. If you enjoyed this video, then please don't forget to like and

subscribe. It would mean a lot to me and my heart. So, please do it. And now, enjoy your day. And I hope I can see you

in the next one. Thank you, Codo, for making this video possible. And now, over and out. Bye-bye.