Top 10 Shadcn UI Tools and Libraries to Elevate Your Projects

These are the top 10 Shhatzen friendly tools and resources from components to helpers and different templates that are

going to take your UI to the next level. And if I missed your favorite Chessian library or some resource, just drop it

in the comments and I'm always looking for new ones to try. Starting at number 10, we have motion primitives. This is a

UI kit of nice subal animations that are not too much for your application. So if you go to their documentation, the

components I use the most are these text effects. So if we check for example this text shimmer, this is really a great

option for your loading text. Then we have here this text shimmer wave which adds just a little bit more of

animation. So you can really see how the creator thought about small details like this. And check out this glow effect.

This is something I used on a realworld project and this can really make your landing page to stand out if used in the

right way. And implementation is really easy. You can just use the motion primitive CLI or I even prefer more shed

CM registry because this one would also initialize shed CM for you if you're starting project from scratch. So you

just run this command and you have here the usage. Use this code and you're good to go. Overall, I think that motion

primitives is a nice library. It adds a little bit of soul to your project. Little bit of animation here and there,

and it makes the app more appealing. Now, let's go to the next one. At number nine, we have components.work.

This is a collection of component blocks that you can just copy and paste into your shreden apps. And as you can see,

they have really nice and clean design. All modern apps look like this these days. You can see Versel for example.

And if we check the header on top, we can see here different component block sections. So this pricing, don't be

worried. It's not the pricing of these components. Those are actually pricing blocks. So you can use these pricing

blocks and just copy and paste them to your application. So they have, for example, good call to action components.

And this is something that is really used on basically every landing page. So you can go here and you can build your

landing page like Lego and just merge all these components from them. So you can create some nice looking app landing

page in like 3 minutes. The implementation is easy but it could be easier. We have here our whole code

section. We can just copy and paste it inside of our project. But they are not using the shetsen registry. So we have

to install these dependencies ourselves. And this component/craft, we need to pull this from their GitHub repo. So for

that we're going to their GitHub. We need to check that component. Here we can see component/ds. So we are going to

that DS and we just need to copy and paste this one inside of our project. So this one could be easier if they use

shreds registry. But it is what it is. good library. I hope they're going to continue pushing these Lego sections.

Let's go to the next one. Coming in at number eight is shed CN form. Obviously made to go together with shed CN. This

library makes creating forms so much easier. We can go here to this playground and here we can create our

form with React hook forms validation and everything that we need really really fast. So if you want to create

for example contact form we are going to do it here much faster than with AI. So I'm going to put in the inputs here. We

can say name for example. We save our change and we can already see it in preview here. So it's a classic form

builder but for the result we are getting the shet CN code. Next thing I'm going to put let's say input again. We

always need email for some contact form. So here email we are putting in the type email. Save that one. We can see it

again. Then there is really nice phone input. We have this flag and these numbers. Then we can put some multi

select. Let's see where is that one. Multi select. Here it is. Here we are. We have this multis select which is

looking really nice also. And now when we are satisfied with our form, we can go here to our code and we can just copy

this whole thing right here and it is going to work. And if you check the code, you can see that it is following

Shetty documentation perfectly. So we have this form form fields on submit function even name of the function is

the same. We have the use form from react hook forms form schema zod. So everything is nice and clean and we can

just put it inside of our component. This is one great helper thingy for sheden. I used it multiple times on

realworld projects and the creator behind this app is one really great developer and I hope he's going to say

hi in the comments. And number seven, I hope I'm going to pronounce it right. Chandai. Chandai is a person and this is

one of the best open-source dev portfolios I've ever seen. It's created in X.js with Shaden of course and you

can really see that he thought about every small detail that is needed in this dev portfolio template. We can type

in command K. So here we are getting all the sections from this portfolio and we can click project for example and check

out how smooth it is. Everything is so nice, minimalistic and fast. It really feels nice to use this portfolio. You

really have to try it out to see how awesome it is and how to use it for your own portfolio. You just go here to this

GitHub link and here you fork this repo, change the content like the name, projects and everything and just deploy

it as it is with your own data. I really love this portfolio. I had to put it in my list and I was a little bit

embarrassed when I compared it to my ordev.com. So I think I'll have to create a video of ordev.com remake. And

let's go to the next one. Number six is origin UI. Origin is a big collection of awesome looking components built with

Tailwind and React and it goes really well together with Shad Cenne. They have really a bunch of components. So I'm

going to show you the ones I like the most. For example, this image cropper. Look how professional it looks. And this

is not something that we can build quickly like badge or something like that. This requires little bit more

details. So we can see that on my scroll I can zoom in and we can then crop whatever we want. So it uses some kind

of API behind and we are saving basically that image on our project and we are getting this whole thing on a

platter. We can just put it inside of our project and it is going to work. There are also different variations with

different aspect ratio with custom mask overlay etc. So they really thought about a lot of things. The next

component I liked if we return back here is the stepper. Let me find it where it is. Here it is. These stepper components

look really nice. We have here classic stepper components and this one that I used on a real world project. So it's a

controlled stepper with track marks and loading state. When I click next step, we are getting here our loading state,

then a check mark and we are off to our next step. This is really useful and it looks really nice inside of your UI when

the users are using it. And there are a bunch of variations. So we have this stepper with labels. This pageionated

stepper, I really like this progress stepper. This is something I haven't seen before in any other UI library. And

you can choose here whatever you like. And implementation is top class. We have here copy shen registry URL which we can

just copy inside of our clipboard. Then we have open inv0ero. So we can actually modify these components and suit it to

our needs. And we have this view code. So here we can choose between pmpp npmard and bun. Put in our shed cm

registry command and we can just copy this entire code inside of our project and put it in whatever page component

wherever we want. They also have these layouts and experiments which are really making them stand out from other

libraries. So we have for example this calendar app right here and we can go to live demo and we can see that every

single feature is here and they thought about everything. So this is something that is really hard to build yourself

and you're getting it with one CLI command right here. You can also see the code on GitHub. Everything is open

source. So this is something you definitely need to check. Maybe you're going to use something for a real world

application. For example, I really like this table component. I'm thinking about using it on one real app. So you

definitely need to go and check out these layouts in Origin UI. Origin UI is a strong library and you can build

really professional looking app with it. Let's go to the next one. At number five, Magic UI. This is one magical

library that adds nice and subtle animations to your components. And when you mix it up with shed CN, you're

getting both functional and visually appealing UI. And check out how awesome are their components. So we have this

marquee. This one looks really nice. Then this terminal is something that is really awesome for some dev portfolio

website or something like that. Then we have the orbiting circles. This is something that fits really awesome on

your landing page inside of your hero section or something like that. Then we have this lens here for example. This

one is so amazing. I don't know what to show you first. All the components are I just can't believe it that they built

this thing. So here we are zooming in inside of our image with this lens. This is really amazing. Then we have let's

see from special effects this animated beam. Check out this one. I mean everything is looking so nice this

border beam but I like shine border more. So this is really making your cards to stand out. It's really really

awesome. Then we have this neon gradient card. This one is also great for your hero section or something like that.

It's really standing out. Then we have pixel image. This is really a great thing. So when I refresh we are getting

it pixelized and it is merging together into an image. It's really looking powerful and also this highlighter. I

mean this is something that you have to try out and put at least one component from magic UI on your shed CN app. The

implementation easy peasy. We have the open invisro button. We have here the shed cen registry commands. We just

install it, put it inside of our project and we have the usage. We just import the highlighter inside of our component

and we use the highlighter like this. So it's the same for every component. Wherever you go, you have the usage, you

have the installation and everything. And that's it. Magic UI has really great animations and great ideas for your

project that you can see here and just apply to your project. And when you mix it up with shed cien, you can get one

really cool application. Let's go to the next one. We are pulling up the big guns. Number four, React Bits. Now, this

is the type of library that you don't see every day. Let me show you. So when we go to browse components we are

getting first the text animations and here already we have some really amazing components for example this circular

text. So we are getting here the text that is going in circle. Then we have I have to show you falling text. This is

something really amazing. So we have here text and when I hover over everything just falls down and the

physics is really awesome. I mean this is something that I haven't seen anywhere else but in React Bits. Then we

have for example this glitch text which is also really extraordinary. I mean check out this one how it looks and it's

for me it's impossible that this is just a plain text that you can put in inside of your project. And things get more

serious from here. So, we have this animation section and check out this sticker peel. So, you can hide your

content behind this sticker and make people unstick it to reveal something behind. This is really cool. Then we

have these cubes. So, here these cubes are following my mouse. So, wherever I go with my mouse, these cubes are

moving. This is really amazing. Then we have this metallic paint. For example, here the object has this metallic

effect. And the favorite one for me in the animations is this splash cursor. So check out this one. I don't know why

would anybody put this on their project, but it looks really cool. I mean, check out how awesome are these colors and

this splash cursor. And if you really want to go heavy on animations, you have to check out here backgrounds. So they

started creating some more subtle backgrounds like this dark wheel for example, this silk also. And I mean this

is not that subtle but light rays is subtle and it's looking really nice for some modern looking websites and landing

pages. But check out this one for example. They had this light thing. I used this before. This is really

awesome. It's looking really powerful. Then we can see for example this iridescence. This one is really heavy

for the memory. And also this ball pit. Check out this one. Bunch of balls. And when I go with my mouse, I'm hitting

them all over the place. And this orb right here. I said I'm going to use this component somewhere on one of my

projects, but I still didn't find the use case. And implementation is again really easy and they stepped up with

that game. So here we have the CLI with the commands and they are supporting both JavaScript and TypeScript and both

CSS and Tailwind. So that's really amazing that we can run these components on plain JavaScript although I would not

recommend JavaScript. I always recommend TypeScript. And we have here also the code. So we can install the dependencies

that we need. We see the usage and here we can choose between the default tailwind version and here between

JavaScript or TypeScript. I would call React Bits the king of animation libraries and you definitely have to try

it out. Let's go to the next one. At number three, we have AI elements by Versel. AI elements is a library built

specifically for AI apps. It is working with AI SDK under the hood and we are getting set of full stack components

that we can use to create our own AI applications. And check out what can we build in just 2 minutes. So we have here

chatbot example and we can see the showcase right here. So here some user is communicating with AI and we can see

the response how beautiful it is. So it is using MDX. We can see that even the code is looking really awesome. We can

even copy and paste it. So everything is handled for us and the interface here is looking really similar like chat GPT. We

can of course change this one. Everything is shed CN so everything is flexible and we can put in some input

test. I'm hitting enter and we are getting the response. So we have everything back end front end the

streaming is also working and implementing it is really easy. We have here all the CLI commands. So they have

AI elements command but we can also use shed CM registry. We add all the dependencies and we just copy and paste

this entire code block into our project. After that we have the back end for that one. So we can just create a new route

and everything that is left is to put in our open AI API key or whatever AI you are using to create your chatbot and we

can see here different components. So we have these actions this branch for choosing between different response

branches then code block. So everything that you seen in that chatbot is separated in different components.

Everything is really organized in a good way. We can also check this prompt input. We could just import this

component alone. We don't need the whole thing. So we have the installation for each component. We can put it inside of

our project and just use it. And it's not like that we have to use Versell AI gateway. We can put in our manual

provider from AI SDK and use whatever we need without VCL. I saw some people were complaining like is this only Versel?

It's not, but it is better of course to use it with the Versel AI gateway. AI elements is definitely the easiest and

cleanest way to create your own chatbot and I highly recommend it. Let's go to the next one. At number two, we have

aity UI. Here we have a collection of modernlooking components and one amazing developer that is following all the

trends how the modern apps need to look today. And I really used multiple externity components on my projects. For

example, the one that I'm using the most is this spotlight. So here we are getting a simple spotlight on our hero

section that is making our text to stand out. We also have this spotlight new which is like two spotlights from the

left and on the right. And this looks really amazing. It's so subtle. You see it's moving just a little bit, just

enough to make it look perfect. Then we have this glowing effect. So you can see when I'm going with my mouse, this

glowing effect is following me through this bento grid of these cards. Really amazing user experience. And check this

3D marquee for example. This is something that people say, "Oh, I remember that app. It had that amazing

background." Same thing like the globe. This globe right here. When you see it, you remembered this app for good. And

while we are at this globe, check out this world map. This is one really, really amazing component. And whatever

you use from here, you cannot go wrong. Everything is highly interactive. It's looking awesome. It's modern and it is

really simple to implement. So we go here to our code. We just copy and paste the entire thing. There is also a

JavaScript support. So that's awesome. We have the CLI with the shed CN registry. We have the manual

installation of all the dependencies and everything. So it's really easy to implement. Aity UI is one amazing and

useful UI library and it was really hard for me to decide is it going to be on the first or in the second place. So

let's see that first one and the moment we've all been waiting for. Number one, Tail Arc. Tailark is a collection of

modernlooking sheds and blocks that you can use to create your landing pages in minutes. It's got the perfect design for

2025 and that's the reason why it's number one on my top 10 list. Let me show you what they have inside of their

blocks. So, first thing that we see is this hero section. So, we have everything. We have the header. We have

the login sign up. All the links. Then we have here introducing support for AI models. This call to action title,

description, start building. We have here this screenshot. And if I refresh the page, check out. We also have these

nice animations. So for the text, for the background, we have this highlight right here. Let me refresh again. So we

can see the highlight coming out from the top left. So we are getting the whole package with only one block. It's

also looking nice both in light and dark mode and on mobile devices. So everything is supported here. And this

is not the only hero section. There are a couple of them here. I think 10 or something like that. So you can choose

whatever is the one that you like most. This one is really interesting with this crystal. And then when we create our

hero section, they have all other sections that we can just copy and paste. Same like this one. So we have

the lower cloud for example. Then features here we have on hover a little bit of highlight and also bunch of

variations. Then we have this content. I really like this one. So this also looks awesome on mobile devices. So we can

take all these blocks and merge them together like Lego and in 3 minutes have whole landing page from scratch using

this library. We have also these cool testimonials and anything that you can think of that you need on a modern

landing page today. Also, these pricing cards. I use this on a real project and it really looks nice. All we have to do

is just use the shed cm registry command. We can also open it in vis zero or here open the entire code and just

copy and paste it inside of our project. And let me show you what I've built with this app. I also have it on a video. I

built this literally this whole landing page in two or three minutes using tailor. So everything that you can see

here is tail arc. This hero section, the header, also this here we see the features that we saw there on tail arc.

Here some call to action and the footer. This was literally created in 2 minutes. Reason that tail is number one for me is

that you don't need to think about anything. You have the design, you have the animations, you have the whole UI

built for you. So, you can just copy and paste it and you don't have to worry about a thing. You can just create your

landing page, build it. Again, I'm saying it too much, but like Lego, you just merge all the sections that you

need, change the content, and you're good to go. And that's it. I hope you like my list. Tell me in the comments

what would you rearrange in this list and if you would add some other library instead of something. And for more

content like this, join the mighty horde.