Radix UI component with Next JS and Tailwind CSS

hey views so in this video we are going to build this component from the Twitter UI and the nice thing about focusing on this small part of the UI is that I learned how to use next Js which is a react framework Radix UI which is UI components and also Tailwind CSS which is our which is what I've been using for quite a few years now and the last one is also react icons and before we start building this component I would assume you'd have a tiny bit of knowledge with next to yes and you're comfortable with Tailwind CSS HTML basic JavaScript so we are going to start off with next Js so here I'm just going to copy this command I'm going to go into terminal I have a folder so CD or LS insights and this is called YouTube so I'm going to now paste that command it's called this and let's just call this Twitter and would you like to use typescript we'll go no eslint no Tailwind yes no and yes we're just basically going with all the defaults so now it's installed the dependencies I just got LS so we have the CD into Twitter and then code space dot this will open up your vs code and now I'm going to do I'm just going to try and organize this a bit okay so we just close that click command J to bring up the terminal and we're going to do npm run Dev we're just going to hide that and what we're also going to do we're just going to bring this up a bit so here's the Local Host 3001 and you'll probably have three thousand I'm gonna touch command and then click let me just see if I can turn on my keystrokes as well show keystrokes yes okay so here we go this is up and running and we're going to go into app and we're going to get rid of all of that so I'm going to get rid of Main and we're just going to type in Main oops we're gonna go Main and then hello you can see it's made changes already we want to get rid of that CSS so just gonna go up here and then go delete save so we are going to create a folder called components and in that folder we're going to call that tweet dot j s x and this is a little shortcut so if you type r a f c e and then we're going to hit enter this will bring in some code I'm just going to delete that top one there so we don't know as we don't need that if I hit save I want to now bring this component into the page so here I'm gonna then say tweet so now it's not coming up because what we need to do is we need to import it so sometimes it actually does it by default not sure why it didn't do it then so import tweet hopefully it'll come up hit enter save and then now we can see our component with tweet so the very first thing we want to do is actually get an avatar we go to Radix UI we go to documentation and there's some feedback that the documentation is not very clear and this is how I managed to navigate it so I'm going to go to Avatar now what they've done is they've put a really good example here but what I did is I started down here so let's install the react Avatar so now don't worry about how this looks this looks a bit weird I don't know why my tonal looks a bit funny so I just pasted that in and hit enter now it's installed this so you can look in your package you can see we have the react Avatar so now we just need to import it so if I go to tweet and we go to the top and we also want to bring in these so here I'm gonna paste that in and it's straight away converted between brackets which is pretty nice so hit save and we have to do npm run so I'm just gonna go up it should select recent ones but my my turn was really strange for some reason so I just cleared it so npm run depth oh it's going really funny npm run depth nope I think there's something wrong with my terminal npm run Dev enter enter okay so I'm just going to close this one down go back okay so now there's nothing inside and we want to get some of this content so we're going to get this middle one here which is the root so you just want to copy that paste that in save hopefully we're gonna see this here and we are not and that should be a reason why hmm so Ctrl C to get out of that I'm going to npm run Dev again and I'm going to command r ah okay so we have an error here this is simply to do with use client so what we have to do is just include this up here so use client command save and then hopefully we can see the Avatar there we go so we have our very first component from Radix UI into next JS which is pretty cool so next we need to do is we're going to go back to Radix UI and we actually want to do we actually want to use their form and all we want is this and this we want the Tweet text area so again we just install the component so Ctrl C command V enter hopefully that's installing it and it looks a bit funny on my one again you can check here and we have the form so here's the anatomy and you're gonna copy the form go back to tweet and we want to go here and paste now we have to also import it as well so copy that hit save now we want to mpm on dev again but my this whole thing is really strange npm run depth hit enter okay so if we go here we hit enter okay so we got an error here and what I want to try to do is here it says children is not a function so from what I from my limited knowledge I'm just going to delete the uh let's see if we delete this and this because we don't need any validation at the moment and also get rid of the message okay so that is back there is no there is nothing at the moment so we need to go back to Radix and now from the anatomy we want to now get the the bones so here we actually want the question so here we go to we actually want this one here so I'm going to go to label paste that then from the control we actually want the text area and paste that we actually want the button as well so form submit as child and then paste that as well save let's go back and there we are so let's make a couple of changes on the Tailwind side so command B to hide the side menu so I'm just going to get rid of some of these default styles we actually want it to be rounded full and we want the background to be blue hyphen 600. we also want the PX which is the horizontal padding to be uh let's say four and then py top and bottom two adding none and let's get rid of The Shadow and let's get rid of all of this as well oops I'm just getting rid of these you don't need to make it perfect we're just learning how to create this component and let's just say text White we actually wanted to say tweet okay so there we go one thing we want to do by default is have it disabled because you cannot use that button until you've tweeted something or entered something in the text area but we also want to have a disabled styling so if we put disabled and we want the opacity to be 50 percent okay so that's disabled and now the text area we actually want that to have a placeholder of what's happening there we go and we also don't want it we don't want there to be any padding we're gonna say text large it's not going to be ticks white it's going to be text Gray 900. so if we start typing there we go and I think that should be it so just want to get rid of all of these Shadows I don't think I'm selecting them correctly so when you hover yeah you can see that Radix have got some pretty nice uh default Styles we'll just leave it like that okay so the next thing to do is to get the icons in we are going to use a library called react icons so we have to install this again so I'm just going to copy all that control C and then paste hit enter okay so let's go to hero icons 2. and the one I want is photo so if I go to tweet we actually need to import the icon so paste that in and enter again we're getting the second one here copy then we replace it here like so so therefore if I go down to the button I'm going to have a div which is gonna paste that in and self-closing so now if I go to npm we're on dev we should hopefully see the icon and we're not seeing anything because we probably need to give this some style so class name I'm gonna say with five height five in line in line Flex save okay so still nothing might just hit command on let's see if there any difference in that because we might have to restart the server and it probably is the case so control oh no there we go just took a while so there we go and now we we just need to do that another four times I'm not getting all the icons to save time and we hit save now we go back hopefully we see four there we are so we go div and we're doing this because we're gonna wrap them all in a div because we actually want that to class name Flex I'm gonna do command B just to hide the sidebar we're going to say Gap four okay because my computer is very slow now we want to combine both of these into a div because we want the button to be on the right so I'm going to go div and then we want to wrap this and the button like so so here we do class name would be knighted if you can just put class and we do Flex we want them to be items Center and we want it to be justified between so push it all the way to the right next thing we need to do is we need these two to be in its own div so let me just close the Avatar and close the form root so here we go class name Lex so that's pretty cool and then we do gap of so we say four not sure why this is down so let's just double check why oh yeah and for this we actually that's probably why you can't see the label so let's give it a gray of nine however for this which is a tweet we don't actually want to show this so what you can do is do for screen readers Sr only so now that should align up there we go but what we want is for this row to be margin top of four because we want it to be a bit of a gap and that's it now one thing is you can see this is not going to fall with we want this to be the full width so let me just put in BG pink 100 just so we can see the whole thing so in this route I'm going to go class name width for there we go so that's gone nice and full and yeah just get rid of the pink okay and there we are we have our tweet component and then probably lasting just to make things a bit neater is we have a border bottom of Gray 200. and then we need to have some padding of four all around there we are so now if I go command B we go back to page so now if I was to um so the next thing you want to do is you want to think about layout right so this is where you can have all the different components so the nice thing about this is you've now built a component using well starting with next.js you have a component folder you've managed to use Radix UI go through the documentation install it integrate it and then a bit of telling CSS to customize the look of it so now you have the flow or the process on how to do other components such as the sidebar you've got the multiple tweets below the Tweet feed so it's very similar to this if you are up for that challenge go ahead and start building the other components one by one but for this let's think about the layout just very quickly so there's going to be three columns so here we can imagine a div oops gosh contact today and just for now we're gonna align this in the middle we can have a Max width of let's say large and it's MX Auto so it's going to go in the middle and now you can see that kind of resembles the Tui okay and then and then that middle column is going to have a border left and a border right with Oh Come on B can I hide that it's going to be Bulldog Gray 200. okay so we got that middle column with the lines so now if I was just to option shift and down this basically copies the whole line Sorry I'm a Mac User not a window user and then hit save you can now see it Stacks so this is the really nice thing about components which is pretty sweet and let me just make that a bit larger so yeah I think we've learned quite a lot of different Technologies please let me know in the comments what do you think about this video it's obviously a very simple video but you're using a lot of different Technologies and the only thing about this is if I'm being picky we want that to be fully rounded so I just go back to tweet and let me just go here and let's just say 40 by 40. and hit save okay and we want there to be Flex shrink zero okay so that looks a bit bad to me we're not doing any um there's some weird flex stuff that happens sometimes when you have responsive well there we are so leave a like leave a comment subscribe so I'd love to know in the comments have you used Radix UI for client projects so let me know what you think about this tutorial in the comments do you think that is quite easy to follow do you now have the confidence to then go on and start creating more components using Radix UI next JS and telwyn CSS I'll see you in the next video [Music]

Channel: Ready Designer One

Views: 9,545

Keywords: figma, figma tutorial, figma design, figma ui design, web design tutorial, figma web design, web design, figma tutorial for beginners, figma website design, figma tutorial web design, ui design tutorial, website design, web design process, website design tutorial, tailwindcss, startup, startup ideas, design startup ideas, readydesignerone, radix ui, radix ui tailwind, radix ui tutorial, radix ui nextjs, nextjs radix ui, next js radix

Id: qSUxpqIfBPQ

Length: 23min 50sec (1430 seconds)

Published: Mon Jun 19 2023