Shadcn + Framer Motion = Aceternity UI

what's up YouTube it's your boy Michael I'm here to talk about this brand new beautiful Sleek UI library now if you're a big fan of shaten UI this is like Shaden plus framer motion had a baby and that's what we have here so we're going to check it out so it's called as aity I'll be honest I don't really know how to pronounce it aity UI aity UI or exterity UI whatever it is let's check it out I have it linked down in the description we could check out some of the components now a lot of these components are just straight gorgeous right you have a 3d effect card 3D animated pen let's just let's just go through them so nice clean card component hover over it and like the animation sort of follows this uh anticlockwise uh flow and it's very very clean and the thing I like about this UI Library it it's just like chatsi nuui where you get all the source code so I've actually sort of learned been learning a lot about framer motion um because the source code is all there right my favorite let's keep on going you have sparkles which are just these nice clean effect you have background gradient uh which is very nice uh let's see it's very very and it's very easy to set up we'll do an example setup in a bit we have Spotlight this is pretty cool image slider uh stuff you've probably already seen before but here here is my favorite stuff there's a lot of stuff going on but some of my favorite stuff we can just go to the overview here I really like this tracing beam where you're scrolling down and you see that beam right to the left that is just beautiful and it's like not instant like it sort of like follows you and like it's not super fast which I like it has that like slow nice um uh like Vibe or feeling to I I don't really know how to explain it but this it's itself I'm not going to lie this code itself would make a sick blog I might update my uh portfolio page uh to have a Blog with this code so I I really enjoy this I do like the uh tool tip as well where you know kind of if you I don't know if you noticed that but when you move the mouse on The like hovering on the subject that props up the tool tool tip it sort of follows you which is pretty nice it's just the little things you know um what else the Bento grid now I don't know if you know but um if you look at if you follow any designers on YouTube or on Twitter um particularly sorry X um Bento grids are just in right now like they're very clean it you know it design like you know the design is very aesthetically pleasing it explains everything um in one clear section and they're not the most funnest thing to make as in like it's not hard to make but to make it look this nice um and have it straight out the box is beautiful so again it's very easy to set one of these things up I will set up a Bento Grid in a bit but I just want to keep looking at the other components um you have this card stack which is pretty nice you get to see those layers added up and I'll also um oh this one's pretty sick too this scroll animation I probably won't use this anytime soon but I'm sure I'm sure there's someone there that would want to so you have that and then you have this again the these are just I wouldn't use this but this is beautiful right um and then you have a couple glowing cards backgrounds now this one is this one is uh is great especially the dotted uh background uh is it this one no it's this one right here I really like this one this kind of gives it like a very clean startup look oh there there's this sick layout grid as well where if you like click on the section it comes like a modal like a card that hovers over which I really really like um but where is oh the animated tab so this is one of my favorite one and I used it for uh an application I just recently made an e-commerce application check that out I just love how they swap just that animation now one thing I did is I don't like how like I don't like the space between the tabs and this right here I like how it looks when the car like you know when the cards are like stacked on on top of each other I like how that looks so what I did was I went into the code um was it here no I believe it's in this here so I went to the code you see this state right here where it says hovering so I set hovering to be true and essentially what it did was uh like these like the way it looks like right now when the cards are stacked on top of each other that's how it looks default and I prefer that personally so sick component um that I used and then there's this text reveal stuff which is again it'd be annoying making this yourself right and making it look this good so uh the person who created this UI library is a g and then there's there's buttons There's a Hero section a floating pointer which I like as well but really my favorite one if we haven't checked it out yet is we have the Bento grid so we're going to set this up right right now so so all right I have vs code loaded up this is just the my starter nextjs template um I'm sure most of you guys who um our web developers who work with nextjs just having to set up again and again gets annoying so I have my own little uh starter template that I just uh build off of so if I wanted to have this Bento grid first thing I would do is start off with installing these dependencies so let's do that right here all right let that let that install and then we're going to have uh cn. TS I'm pretty sure I might already have this but show you guys how I do it anyway so you create your util folder or I don't um and then we'll do cn. TS and then we just copy this code uh mpm errored out let's see okay maybe I'll just use yarn ad hopefully this works and then we're going to create the UI so we're going to go components UI Bento git so let me just copy this I'll go to components I already have UI and then it was called Bento DG grid. TSX right TSX of course it's not a TS file what are you doing Mike so we do that we'll drop that in here perfect perfect perfect so that code is already in now let's go let's go go to code here let's copy this let's create a simple component here called Bento TSX just copy it here we'll call this Bento why are you not happy oh it's cuz I'm the same directory okay Bento is good here so now let's go to page. TSX and let's add Bento and let's see how this looks wow look how clean that is look at how clean these look and let's see how mobile optimized this is that's beautiful so the cards just stacked together and that's what I love about this UI Library just like shat CN UI all I have to do is just install whatever dependencies frameware motion whatever it needs copy paste the code and I can use these components however I want I can customize them however I want and that just makes a beautiful developer experience where I don't want to build a Bento grid from scratch but I would love to have the code so I can tweak it to the exact specifications that I want but I hope you enjoyed this video guys make sure to check out the UI Library again I will have it linked in the description below it's an awesome UI Library if you enjoyed shaty and UI you will definitely enjoy this one make sure to like comment and subscribe I'm going to start uploading uh developer content frequently very very soon so I would appreciate every and all support thank you so much for watching this video I will see you in the next one

Channel: Ras Mic

Views: 9,645

Keywords: framer motion, shadcn, nextjs, nextjs animation, nextjs bento grid, react bento grid, aceternity ui, aceternity nextjs, nextjs vercel, nextjs shadcn, shadcn ui, nextjs shadcn ui, nextjs framer motion

Id: UihnYT39iQs

Length: 8min 28sec (508 seconds)

Published: Mon Jan 29 2024