My New Favorite Next.js 13 UI Library (Radix UI Themes)

what's going on guys it's Cooper codes and in this video we are going to take a look at one of my new favorite next js13 component libraries this video is going to cover the new component library from Radix called Radix UI themes so initially Radix was just a bunch of things called Primitives which means they had no styling initially and you had to style everything yourself but with Radix UI themes they're giving you a bunch of pre-made components to make development as easy as possible Radix UI themes has amazing documentation for all the different components and it also fully supports server side and client-side rendering in this video we are going to build a very simple coding issue tracker just like this it seems simple but we're going to learn a bunch of different things for example how to use cards in Radix UI how to use the row styling and the flex styling and also we're going to subtly show how to use icons in Radix UI with this common component right here this project is a great introduction to Radix UI themes and it's going to show you all the initial functionality you need to understand after this video you you can continue to build the Radix UI and I think you'll have a great Foundation from the concepts we discuss here a really great addition to Radix UI themes is that inside of any of your applications you can import this theme panel the theme panel lets you see what your application looks like with different settings on its appearance for example we can change the accent color and you guys will see everything changes just a little bit I personally prefer the icy looking color so I like to choose the blue for this one and it really gives you a bunch of control as to what your application looks like overall and also these gray colors will change what the Grays look like and you can also go to a light or a dark mode as well the theme panel is a really cool addition to the project especially if you were to imagine you have a full software as a service you can just go in there and change everything and just get the most ideal look you want now we can get started by building our next js13 project I'm getting started here by going over to an empty folder in Visual Studio code and using the command npx create Dash next Dash app to create a nexjs application want to make sure to use add latest to get the latest version and then the name of your folder you're going to create so I'm just going to say my Dash app to make things easier in the command line you can tell it to use typescript by saying dash dash typescript then dash dash Tailwinds to make sure to install tailwind and then also dash dash eslint we can then press enter we do want to use the source directory we do want to use the app router that's the latest router and we don't need to do the default import Alias so we can say no so now our application is set up we can go into the folder which created our application by saying CD my app as always we have that Source folder which is incredibly important within the source folder we then have the app directory if we want to see what the application looks like by default we can go into the command line and say npm run Dev everything is going to be running on localhost 3000 and we have the boilerplate next.js application let's get started by removing some of this boilerplate code so we can go into our app directory and we can go into page.tsx this is pretty much all the code we just saw on the screen for 4 to simplify our lives I'm going to delete everything except this outside main tag because we're going to use some of that styling ourselves so go inside of here and delete everything inside of Main now that everything is deleted we should have a completely blank application which is exactly what we want now we can set up Radix UI themes which is super easy the first thing we can do is go into our command line and then npm install at Radix Dash UI themes then press enter inside of our layouts.tsx Could Be Imagined as like the base route of our application and so we're going to want to go in here and then set up some styling so we can go to the top and then import a CSS document from Radix UI which has all the CSS for all the different components so we can go in here and say import at Radix UI themes slash styles.css and then we are going to want to import the theme component from at Radix UI themes this is a component that's going to wrap around our application and give it access to Radix UI themes and all the different styling and functionality it needs so in your layout a basic way of understanding this is that your entire application is rendered within children here so to give our entire application access to the theme we can use a theme tag and wrap it around the children like this and so now we can save our application and npm run Dev again and now we're completely set up to use Radix UI themes within our application one quick thing you guys don't really have to worry about is inside of our globals.css is some boilerplate CSS from nexjs to make sure we're only using the styling from Radix UI themes we're going to delete everything except the Tailwind stuff imported at the top here so delete everything there and then save your CSS file now we can go on over to page.tsx and start to actually using components from Radix UI themes so the first thing I'm going to do is I'm going to import a container from at Radix UI themes a container is a very simple way for us to contain the content in our website to a certain length for example the project we're going to build is kind of like a single column so everything is going to be contained with the container and Radix UI is interesting because it gives you a bunch of different sizes you can choose from you can just look at these visually if you want but they are defined in the documentation if you want to look into the specifics of the sizing but for this video I'm going to go with a size of one Radix UI themes is really nice because they give you very Sim simple components to use flexbox which is one of the common ways to structure out your layouts so we can import the flux component up here and I want to make an initial heading for our website that has a heading and then also a description so we can make a flex row technically is what we're making right now because these Flex components are a row by default but we can change the flex Direction by saying direction is equal to all these different options I'm going to choose column and I'm choosing column because we want things to stack on top of each other so within our flux column now we can have two pieces of text that we're going to stack on top of each other for typography and Radix UI themes you have some options so the first thing we can use is a heading which has specific styling for being a heading as we're going to see in a second here and also a text block so we can see what the default heading looks like by just making a heading here and I'm just going to name this one coding issue tracker and then under our heading we can have a little text here which is just going to say here you can find the issues relevant to your certain project these typography elements also have the ability to have certain properties on them for example the color property can change it to a bunch of different colors but for this I'm just going to say the color of gray if you stop running your application you can just say npm run Dev in the console but I'm still running here so I'm going to head on over and see what our application looks like and you can see that the text is being contained to the middle of the screen because of the container we're using and also because of some Tailwind CSS styling that we took from the default next JS layout I actually bring attention to this default styling here because it shows you that within Radix UI themes you can still use Tailwind CSS wherever you want and so that's another reason why I really like this library is it's super compatible with Tailwind CSS so right now our project is in light mode I don't want to Blind you guys this entire tutorial so we're going to go over and change it to dark mode so if we head on over to layout.tsx we can actually pass properties into our theme to change what it looks like one of the main ones we're going to use here is his appearance an appearance has a very simple dark inherit and light so we can just choose the dark mode here to change our application to a dark mode and so if you refresh your application over here it's going to change to dark mode which is great news let's continue building our user interface by building out the little column here that's going to hold our cards for the different coding issues we can head back over to page.tsx on top of our initial Flex box here I'm going to put a padding bottom of four so this is going to create some distance between a box here and something we might make under here I'm going to use the flexbox again and I'm going to make a gap of 4. this means the items within the flexbox are going to have a gap between them and because we're going to have a column where the cards stack on top of each other I'm going to make this direction is equal to column so now we can go to Radix UI and import the card component so cards are a common way to group together information web development so I can just make a basic card right here and if I make very simple text that just says hello just as a test to show you guys we can see that the card over on our localhost is going to look something like this just to show you guys what we're working with and because we're going to be stacking these texts on top of each other I'm going to make it yes another Flex column I know I'm using it a lot here but it makes sense for our design so Flex Gap is equal to one and direction is equal to column we're kind of making a big column is why we have to use a flux column so much and So within this column we can start stacking elements I'm going to have the first row just have some text like this and I'll be like issue number 24 button is wrong color so you know that's a pretty complex issue you probably see that at Google or something like that so we got to make sure it says high priority so under our text I'm going to make a flex row so I'm going to say Flex Gap is equal to 2 and these Flex boxes are rows by default is why I'm not saying anything else there and now we can stack little badges side by side inside of this Flex row and a badge is a little icon that is kind of like small text and it's pre-styled for us and we can grab it from Radix to buy themes by just going up here and saying badge like this and now we can go into here and say badge let's see here this is pretty serious so we got to get all the teams on this devops is the first one I'm going to make the devops color be say orange and I'm also going to make a UI tag and I'm just going to make that blue and so you'll see these will stack side by side because we're using a flex row and so we can already see how simple these little Flex boxes make our lives when it comes to developing user interfaces so under this flux here I'm going to make another row which is going to be a text and it's just going to be discussing the issue itself so I'm just going to make some random text here you guys can just say whatever you want all right so I've made my story behind the issue here so we can save this and see what it looks like in our project very serious issue five users the wrong shade of green you never know what's going to happen next okay but this is a good example as to how you can make little cards like this within our applications something important to recognize is that these three things are all within the same Flex column and it has a gap property so if we go over here and make the flex Gap here let's say like four or something like that it's then going to give a gap of 4 from every item in our flexed column just to show you guys how that's working I'm going to go change it back to one on the bottom of our card I want to show a little comments feature to show if people have commented on a certain issue or not and this is going to involve using an icon icons from Radix UI are super simple to use we can install this pack package here and get access to a bunch of professional looking icons that already make sense for the Radix UI styling so I'm going to copy this command here go over to our console and then do an npm install of Radix UI slash react icons and then press enter we can now run npm run Dev again to make sure everything's good to go so if you go into this Radix UI icons page and you scroll over a certain icon for example I want to use the chat bubble icon right here you can generally scroll up to the top of your application and then import chat bubble icon so it will usually be the name of the icon and then icon at the end as dumb as that sounds and so you can then import that from react icons like this and now inside of our code we can actually reference this icon and it's going to give us that little 15 by 15 icon so make sure to go under the text we just made here and I'm going to make a little Row for the bottom of our card so inside of here we can say Flex padding top is equal to one to kind of make some separation between the rest of the things and this Flex at the bottom and so now this is a flex row and I know this is kind of confusing but inside of the flux row we are going to create another Flex box here and this is going to be a flux row where everything is aligned to the Center and so if you're confused as to what this align Center does it's pretty much a trick to align the icon to our text this allows you to have your icon and your text all on one straight line so it's easy to read so within here we can reference the chat bubble icon just like this it's that simple you can also put more properties on it if you want to change the size of it but I'm going to keep it at its default size then I'm going to make a text property here I'm going to say text and I'm just going to say three comments so let's go see what that looks like so they're in a nice straight line which is exactly what we want but the three comments is a little too close to the icon so let's go change that we can do a margin left of two and remember all these sizings are relative to Radix UI themes is where they're coming from and I'm also going to make these size the comments smaller so I'm going to say size equal to one so this is actually the text size so instead of having to do like font size 24 pixels there's a bunch of predefined sizes within Radix UI themes that make that text sizing a bit more simple and listen I'm not like a UI expert but to put the emphasis off the comments I'm going to make the color equal to Gray and so if you were to actually link this up to a full website you could wrap this Flex box here in like a link or something like that that would bring you to a different page so I didn't show this in the beginning but I think it's worth showing off a cool design trick right now because this three comments is kind of locked into its little Flex box and this entire row right here is a flux row that we have we can actually put something in the bottom right of our card if we wanted to we can do this by telling the flex row at the bottom to be justify is equal to between this means it's going to prioritize this space between the two things and so if you only have two items in a row it's going to make the most space between them as a can so this Flex box here is counted as one thing in our row and we can just put another chat bubble icon to be on the other side of our row and so you could have this be a different icon or have it say something different but it's a cool part to flexbox that I feel like was worth discussing even just as an example so I'm going to get rid of this thing sadly and we can even keep the justify between because it starts your first thing at the beginning of the row so we don't even have to change anything there and so now that we have this full kind of card built out we can copy this thing and have more than one so I can make let's say two more cards here just pasting them in so we have one two three cards and as we can see there is a little bit of spacing in between each card and if you're curious as to where that spacing is actually coming from is it's because remember these cards are all contained within this Flex column right here look it goes all the way to the bottom right and it has a gap of four so anything within that column is going to inherit that gap of four and so if we wanted to we could change up anything inside of here we could change the text of each card we could change the little rows here for example in our second card we could do something like the back end team and it's going to be red because that's the hacker color I guess and on the bottom card I'm going to make a hacking team that's the most serious team in any company and we're gonna make that green so let's save that in my opinion Radix you themes is a really beautiful looking and it allows you to build this kind of like software as a service type look and also be super accessible hopefully this has been a great introduction to using Radix UI themes now we have one more cool thing to show off if we go over to our layout.tsx we can import that panel I showed you guys at the beginning of the video so the theme panel just comes from Radix UI themes and we simply just put it alongside our application so inside of theme we can just import the theme panel right here make sure to save your page here and it really is that simple it's instantly going to put this little theme block on top of your application and you can change the colors around for your application so I like the blue one with the so I'll be adventurous and choose this like brown gray color I don't know what that's going to look like and I'm going to make the full radius here so it's kind of rounded but I just want to show something kind of ridiculous I'm going to make the scaling be 90 I'm also going to do solid backgrounds from here you can actually copy the specific theme you have so remember it's going to look like rounded corners and be a little smaller I guess so we can copy the theme here and if we go back over to layout.tsx you'll see we have a theme that we can copy in right here and so I know that was kind of a big step but it literally copied this line of code right here and so we can paste it in and once we save our application we're going to be able to see our application into that theme now so even we can get rid of the theme panel we're done with it now make sure to save this page and we now have the ridiculous rounded corners for the rest of our lives so I'm not sure that's a good thing but it's something we can do jokes aside I think is a really cool feature is being able to change your theme on the Fly is kind of interesting and you can completely change where your app looks like especially if you have a bunch of components we just have a simple little tutorial app here right but if you have a full application and you're able to change your theme like that I think it's really interesting if you made it this far in the video I'd seriously recommend going over to thecodelater.com and checking out my newsletter service called code letter code letter features articles that are written by professionals and they give you in insights to the latest things happening in software engineering if you think a news service with the latest software engineering content is interesting to you go over to the codeletter.com and check it out hopefully this video gave you some great insight into Nexus 13 and using Radix UI themes thank you all for watching

Channel: Cooper Codes

Views: 10,167

Keywords: radix, radix ui themes, nextjs 13 component library, nextjs 13 ui library, nextjs ui, nextjs ui library, nextjs server side, nextjs client side, nextjs radix ui themes, radix ui themes npm, npm themes, themes radix ui, radix ui themes nextjs 13, nextjs 13 radix ui themes, nextjs 13 beginner, radix ui introduction, radix ui nextjs 13 introduction, nextjs 13 radix ui, radix ui primitives, radix ui tailwind css, radix ui shadcn, shadcnui, shadcnui radix ui, radix ui setup

Id: 9bsZNic2WBw

Length: 18min 0sec (1080 seconds)

Published: Sat Aug 19 2023