Believe it or not, but I found the ultimate set of powerful and stunning components built on top of Tailwind CSS and Shadcn UI.

These libraries offer simple but powerful components for daily use perfect for building a foundation, all the way to components beautifully animated with Framer Motion (honestly, I've never seen animations this smooth), up to full on UI sections that are stunning and ready to use for your next project. At the end of theis, I'll also share a bonus library which offers a collection of beautifully crafted open source layout UIs built with Shadcn UI. As always, all of these libraries are 100% open source. from clean, simple base components that are perfect for building a solid foundation to insanely smooth animated components powered by Framer Motion. And trust me, you haven't seen animations as smooth like these. I even found complete UI sections that are built to impress literally everyone. And if you stick around till the end, I will show you a library with the most beautiful sidebar layouts I've ever seen. Oh, and as always, all of these component libraries are completely open source and with that, free to use. let's start with

Component Library Number. 1

It's called efferd. And what does this library even offer? Well, it offers beautiful Shadcn UI blocks for busy and smart developers. Now, I found this library relatively recently, like one week ago. And I will be honest with you, this is a game changer. It's probably in the top three of all libraries I ever shared with you guys because the code is clean, the design is beautiful, everything is responsive, everything works both in dark mode and light mode. And this library has a consistent design language which is very important and often overlooked. So let's start with the off section. So this section offers two beautifully crafted off blocks. Let's look at the first one. And this at first glance is relatively simple, but if you hover over it or if you move your mouse a bit, you will see that we have like stars in the background that move with the mouse. Doesn't this look beautiful? Let's look at the second block. So this is already a bit more sophisticated. So if I refresh the animation, you will see on the left side we get these lines that animate in. And then on the right side we have the static section where users can then sign in, sign up and so on. This is perfect. This is all I ever wanted. And I for example also use this block in my starter kit. So if I click on sign in, do you see these lines on the left side? They animate in. On the right side, I for example updated the theme a bit. But at the end of the day, I literally just copied this installation command. I installed the component, updated the text, and that's it. It works right out of the box. And by the way, this is of course mobile responsive. So if I make my screen a little bit smaller, you will see that it still works. Bum. Isn't that cool? Let's look at a few more sections like for example the footer section. So this section has five beautifully crafted footer blocks. The first block does not have any animations. But this radial gradient blur thingy, I'm not sure how you call it, makes everything pop right away. If this wouldn't be there, I think this block would be relatively boring. But this blur gradient thingy makes everything 10 times better. Let's look at the second block. And this is a cool block because it animates in. So if I refresh the animation, wow, isn't that smooth? So we again have this radial blur and then everything animates in and the animation is very smooth because this uses framer motion. And if you look at the code, you will also see that this is clean code. This is also something very overlooked in most cases because design is one thing but if the code quality is bad then this won't help you. But here I reviewed the code, the code is good, the code is clean. It would be cool to have some comments but I guess that's fine. The important thing is that the code is clean and that the UI is beautiful and this is what we have right here. So nothing to complain about. Let's also look at the pricing section. So this is the first block. It looks relatively simple. It does not have any animations. I think they should add little micro animations right here. For example, when you click on yearly, but okay, that's fine. It's not so hard to add yourself. But look at the second block because wow, doesn't this look beautiful. It instantly pops because the button pretty much glows and we have this nice contrast. Orange, green, red. like this is something you would see in some sort of Figma design and you would say, "Wow, this looks beautiful, but it's probably super hard to implement." Well, you have it right here. You can just use it. It's completely free. Here's the code. Isn't that nice? Yes, it is. And by the way, since everything builds on top of shared CN UI, you can also use the CLI to install all components. One thing that I have to mention is that not every block is free to use. So, for example, the hero section is a pro block. So, you can't access the code. You have to pay for the library. But all of the other blocks that I showed you are completely free to use. And honestly, I understand it. The library creator has to earn money. And I think this is a great model. You have free blocks and you have paid blocks, but the free blocks are high quality. So, again, this is a great library. It's in my top three. and I heavily use it in my starter kit because it has this beautiful blend between simplicity but also very high quality animations. So, let's now continue with

Component Library Number. 2

It's called SolaceUI. Please don't flame me in the comments for my pronunciation, but okay, let's look at the library. So if I do a hard refresh, you will already see that this is one of the more fancy component libraries because literally everything is animated. So this again uses framer motion to create these smooth animations. But let's look at the website in general. So here we already have a little component showcase, a little sneak peek, but we will look at the components in a second. Why should we even choose this library? So as they say production ready UIs, dark mode compatible, TypeScript based and of course responsive and accessible design. So responsiveness is important for every website and this library is accessible like every other library because it builds on top of shared CN UI. Nice. But let's look at the components in general. So if you scroll to the top, you will see in the navbar that they have components, sections, and templates. Well, actually templates currently are not offered. They are coming soon. So currently we only have components and sections that we can I guess use. But let's look at the components. So they have three in total. Not that many. Yeah, I know. So first of all, phone mockup. And if you hover over the phones, this animates, but you can also switch the view if that makes sense. So I can click on this right arrow button and then the phone moves to the left if that makes sense. I mean isn't that beautiful? What I like is that they have like a little you could say documentation section where all of the properties are explained. This was missing in the previous library. This is quite important. Let's look for example also at the chat messages component. And here we see these messages animate in quite smoothly. This is dark mode friendly and light mode friendly as always. They also have like this outgoing component. So if I refresh everything, this is outgoing. The previous one was ingoing. So this is quite cool. Right now here's something that I have to mention. This library has only three components. That's not a lot, not enough. We need way more components. But at the same time, the real power are not the components that this library offers, but rather the sections. because there are hero sections that they offer, team sections, and also a few bento grids. So, let's look at the hero sections in general. So, what do we have right here? This is the first one. So, if I refresh this, the text animates in. And then at the bottom, we have like these websites. So, if I scroll a bit, they also move. Oh, that's fancy. Oh, and by the way, do you also see how it like moves in the 3D? That's super fancy. And then we have this hero. So if I refresh this, the text animates in. And if I scroll a bit to the bottom, then we have this phone popup, if you want to call it like that. So what I like about this library is how smooth everything is. Like the previous library that I showed you also had animations, but this literally takes it a step further because it heavily uses frame of motion. Everything is animated and it animates so smoothly. Damn. Let's also look at the bento grid sections. Okay. So, if I do a refresh, it animates in, but if I hover over it, nothing happens. That's fine. You don't always need to throw animations at the user. You don't want to overwhelm the user. Animations that come in when the website loads are cool. Sometimes micro animations are also quite cool, but please don't overdo animations. You need to find a good balance. And let's look at the other example. So, if I do a hard refresh, everything animates in. And then if I hover over each you could say block, we also have a nice little hover animation. So this library is pretty much the complete opposite to the previous library because it does not try to find a balance between animations and basic components. It literally tries to animate everything. So in my opinion, this library works very well for landing pages when you want to impress the user. And also this library is still quite small. There are not a lot of components, not a lot of sections, but I see quite a good future for this library because the creator is definitely talented. I think we can both agree on that. Let's now continue with component

Component Library Number 3.

The website URL is blocks.so. Great name, by the way. And this, in my opinion, is the perfect all rounder component library because it offers components that pretty much appeal to everyone. Let me show it to you. Let's look at the AI components. And look at this input. Like this is pretty much one to one, the input that you get in chat GPT. And it just looks good. It's high quality. If I type something, we instantly see the submit button on the right side. This of course is mobile responsive. And there are no hardcore animations. What I mean by that is if I do a hard refresh, there is no animation. And that's a good thing because these components work very well for dashboard type applications where the user is already logged in and where the user does not need to be overloaded with animations. Still there are micro animations. So if I click on the plus button, we get the drop down. There is a smooth animation, but it does not overload you. We can look at a few more examples. This is already a bit more sophisticated, but still no annoying animations. Perfect for any dashboard type application. One of my most favorite components that they offer is the stats component. Or what I mean by that is they have a few stats components. But look at them. Again, no animations, but everything is high quality. And of course, this is mobile responsive. So on a mobile screen, we have one column, then two columns, then four columns. Isn't that beautiful? And this does not mean that there are no animations right here. This author, as you see, is someone who knows what he does. Because if I do a hard refresh and scroll to the bottom, these components, for example, animate in. So there's a very good contrast between high quality static components and then components where animation has been added in. But these animations don't overload the user. So for example, the previous library I showed you is perfect for landing pages. You can overload the user in a landing page, but in a dashboard scenario, you don't want to overload the user. One thing that I also like quite a bit is that we have one consistent design language. All components are very similar to each other. That's something that you don't see with a lot of free libraries. With a lot of free libraries, you have one component and another component that looks completely different. Every component here shares the same similar design language. And one reason for that is probably because the creator of this library works for document. So this guy knows what he is doing. He knows what real websites need, what professional websites need. They just need clean, sophisticated and beautiful UIs. Oh, and by the way, the code is clean as always. And we can use the Shadcn CLI since all of this builds on top of Shadcn UI.

Component Library Number. 4

It's called fancy components because literally everything is fancy. What I mean by that is they went heavy into animating everything and you see that right away. So this is perfect for landing pages. And before I even show you what I really like, let's look at a few components. Like for example this letter 3D swap. If I hover over it, you see how it like swaps the text in 3D. So I will hover over it one more time. Set your mind to it. Yes, do it. And in general, this is beautiful. Let's look for example at this component. Text rotate. It rotates. Oh, fancy. And then right. Yes. Scroll and swap. Text cursor proximity. Okay, that's interesting. I'm not sure if I love this, but it's definitely interesting. What else do they have right here? Carousel box carousel. Okay, this is a normal carousel. What else? Elastic line. So, this animates in like this line. Okay, that's interesting. What else? Blocks. Drag elements. Can I drag this? that's so cool. This would work perfectly for a landing page. I think I will implement this in my website. What else? Screen saver. Page not found. This is perfect for a four not found route. Float. So, this floats. And what else? Stacking cards. So if I scroll to the bottom, the stacks everything. Isn't this beautiful? Like this is literally the complete definition of fancy. And I think that's why the library is called fancy components because it literally is fancy. And now here is what I love about the library, the documentation. I have never seen such in-depth documentation for literally anything. This is a free library by the way. And here we have a section on understanding the components, splitting the text into characters, how everything works, 3D transforms, and then look at this. We even have diagrams that explain how everything works. I have never seen something like that. This is a free library. You have to realize that something like this takes forever to create and the creator did it for free and then took the time to explain everything. Like this is state-of-the-art. I have never seen something like that. So, in my opinion, this library is perfect if you want to create a fancy landing page or even if you want to just learn about animations because again, this author explains everything and how every component works internally. So, if you want to learn about animations in general, then you should check out this library. And if you want to create a fancy landing page, then you should also check out this library. It's powerful. It's easy to use. You can use the shad CN CLI and it just works which is important. And if you look at the code, look at how clean it is. This is TypeScript code. All of the types have been added. Number number, we have comments. This is everything that I have ever wanted from a free library. And this is what I mentioned at the start. I said, "Hey, I want you to have comments in the code. Look at what the author did of this library. He added comments everywhere so that developers like us can understand what the code does. This is literally the best thing I have ever seen. Let's

Component Library Number. 5

It's called EldoraUI. So it's a UI library for design engineers and it's built with React TypeScript Haven CSS and of course framer motion. Let's now look at a few components. So here they have a component demo showcase like the two features and look at these two components. So we have this line that animates these cards that animate. Then look at this section. Do these components look familiar to you? If so then that's because you have seen them for example on the clerk website. Look at this toggle. Look at this animation. Looks cool right now. Look at this. Isn't that the same thing? Yes. And that's what I like about this library. A lot of things that I have seen on other websites are shown right here. So if you go to the components and scroll a bit to the bottom, then you will for example find this component orbit rotation or for example logo timeline. I have seen this component already before on some website. I can't remember right now which one. What other components do they have? Dock in text. So if I hover over the text, it's like this MacOSS doc font weight text. What is that? Ah like the font weight changes. Okay, that's a bit wavy if you want to call it like that. What else do we have here? Animated frameworks. That's what I showed you at the start like this micro animation. And now I want to show you one more component that I liked a lot and that's GitHub inline comments. I mean look at the component. It could have literally been taken from GitHub. I would even say that this looks better than the one provided by GitHub. The colors are nice. We have this add comment button. It even works. And since all of this is built on top of shad CNN UI, we can use the shad C and C cli or install the component manually. So if we look at the code, the code in general is fine. The only thing that is again missing are a few comments. As you saw with fancy components, fancy components is a gamecher in terms of just explaining things. But this is fine. It's like all other libraries. We have a few basic comments. The code is also fine. It works. And that's important. In general, this library is somewhere in between of you could say blocks and then also effort and so on. So, we have a lot of animations. There are also a few more basic components. It pretty much offers everything. The only thing that I'm missing right here is consistency. What I mean by that is for example, look at this component. The line is like blue, right? It has this bluish color. And if you then scroll to the bottom to this clerk demo, we have like this light blue tealish color. So I missing the consistency but besides that there are a lot of components which are powerful and something that you don't see every day so unique. And now as an extra bonus I want to show you one more library. So

Bonus Library Number. 6

This is not a component library but rather a collection of beautifully crafted open-source layouts built with Shadcn UI. So this library is called square UI and it has been created by in-depth UI. So it offers a lot of fully built pages like for example this modern CRM dashboard with revenue charts and so on. Let's open it. Why not? So this is the live demo. And by the way, if you look at the URL, you will see that this is the actual production URL. So this works in production. So we can switch the theme. Everything works. Of course, we have animations and everything uses right here shad C and UI. So, this has been created with the charts component. The same thing is true for this lead sources diagram. This has been created with the charts component. This uses the table component. At its core, everything has been built with Shadcn UI. Let's look at a few more examples. And by the way, on the left you will see this has been released on the 11th December. This on the 8th December. So the developer ships as you see right here. So this is like a modern employee management dashboard. Yeah, looks quite nice. Oh, payrolls. Let's look at this one. Yeah, this is something that I like. So if I switch the theme to not blind you guys, we have this beautiful chart and these little bars. This looks quite nice. And now let me show you my most favorite example right here. My most favorite UI example. And that's this one. It's called email. And this for example is relatively similar to mail zero. So on the left we have all of the conversations. So the inbox pretty much on the right side the message itself the threat. I mean doesn't this look beautiful? Like for example this is mail zero. And then let's look at this example again. Yes. It's not one to one but this here is offered for free. You can create your own email client. What other examples do they have right here? Oh this is like chat GPT. Let's open this. Doesn't this look beautiful? So, we have a theme. Not theme switcher, model switcher. Think deep research. Chat GBT. Hire this man. This literally looks better than chat GPT cla whatever. Damn, this looks so nice. Wow, I'm mind blown right now. And since this is open source, you can also view the source code for this chat UI. I can click on GitHub. It will redirect me to the repo. And this is the full on repo for the example. This is completely open source. I'm super impressed with this offer. So, whoever you are, good job. Great job. This is exactly what you want whenever you search for professional libraries. And this is free to use by the way, right? Not paid. So, definitely one of the best libraries I found recently. And a lot of people don't know about this library. So, what do you think? Are there any libraries that I haven't mentioned or shared with you guys yet? Please let me know in the comments. I read every comment and I would love to create another video in the future with components that you guys shared with me.

I Found the ULTIMATE React Component Libraries Built on Shadcn UI