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

Enjoying my videos? Sign up for more content here: www.coopercodes.com/
📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com
Radix UI Themes is my new favorite Next.js 13 UI library. If you are looking for a component library to use for your next Next.js project, then I seriously suggest checking out Radix UI Themes. The styling from Radix UI Themes is amazing alongside their world class accessibility features already shown in the well known Radix UI Primitives. In this video we build out a simple component which shows different Code issues similar to GitHub issues, this is fun project that allows you to understand flexbox, rows / columns, Radix UI Themes components, and more. This is a great starting point for those new to Next.js 13 as well.
Final project code: github.com/coopercodes/RadixU...
Radix UI Themes Docs: www.radix-ui.com/themes/docs/...
0:00 Intro
1:48 Setup Next.js 13
3:17 Setup Radix UI Themes
4:50 Build User Interface With Radix UI Themes
10:58 Using Radix UI Icons For Comments Feature
13:42 Finishing up UI design

[@plusplus940]

This is a great video, thanks for walking through Radix themes. It feels like you really understand it.

[@blakehunsicker9458]

So sick, thank you for this.

[@haritsnaufalich]

amazing video, love it

[@amirnoorani5017]

Amazing tutorial without extra fluffs, but how about responsive layout? how are we going to handle different screen sizes with props

[@optimbro]

Thanks for the video, and detailed replies to comments

[@geralddd.g]

Love it bro

[@AdnanSami-jp1en]

how to change the default font to inter. I followed the documentation but not working.

[@saademlyon]

I feel like this is more designed for SAAS websites rather than for e-commerce for exemple. Don’t you think? What do you think of NextUI 2.0 ? It seems more polished and comes with more components. ( Nav menu for exemple)

[@Diego_Cabrera]

Amazing video man. I have a question tho, what would be the benefit of using radix components for basic html rather than just tailwind? I get the Dialogs, According, etc. but I don’t see a benefit with using the “Heading” component

[@CooperCodes]

Hey Diego, thanks for watching! Completely valid question. One of the main reasons is that the Radix UI has a bit of a different Typography system compared to something like Tailwind CSS Typography (tailwindcss.com/docs/typography-plugin ). It is mainly just a preference from which one you prefer from a design perspective. Some differences are that Tailwind CSS Typography has size options 1-5, while Radix UI Themes typography has size options 1-9. Radix UI Themes maps each size to certain attributes (Check it out here under Type Scale: www.radix-ui.com/themes/docs/theme/typography#type-scale ). So when you use the Text / Heading components you can then adhere to this Radix UI Typography sizing system, instead of the Tailwind CSS Typography system. All in all, it is optional but recommended to keep design of text consistent across your application, you can technically just be very diligent and manually write sizing with Tailwind alone but the Typography system from Radix UI just helps simplify things. Hopefully this helps and is not too verbose :) thanks again for watching.

[@OnlyCleaning]

Can we make a theme.js file to define a new structure for all colors like making a new design system for colors and texts etc etc

[@cleiton22ify]

could you to do more video with radix ui, It is hard to find videos about.

[@cb73]

Nice job. Though doesn’t it seem weird to put layout styles as component props? For example, wouldn’t that make responsive layout choices more difficult? Like changing flex column to row depending on screen size?

[@CooperCodes]

Thank you for watching :). It can definitely be weird to put layout styles as component props, and honestly it was a bit strange at first. There are pros and cons to using something like this framework instead of just using the regular Tailwind CSS frameworks, but Radix UI Themes has a really interesting way of implementing breakpoints that is worth looking at. www.radix-ui.com/themes/docs/theme/breakpoints Check out the documentation above, you can create different values at certain breakpoints for any attributes. For example, with a Flex container you could do something like This can be seen as verbose, but I believe can allow for readability as opposed to using the inline Tailwind CSS ways of allowing for different flex values at different screen widths. Just thought I'd show that Radix UI Themes does have a way of addressing responsive layouts. Again thank you for watching.

[@cwwmbm]

I could tell that first issue comes from some internalized personal experience haha. "It's wrong shade of green, it's mission critical". I think we all dealt with life and death situation like this

[@CooperCodes]

Hahaha maybeee based off real experience :), thanks for watching!

[@magedibrahim1405]

Why do you use component since you're using tailwind css? You can just use classname="flex" I suggest using shadcn/ui If you're using tailwind css since shadcn/ui is built on top of radix

[@CooperCodes]

Thank you for taking the time to watch my video :). I personally found the setup / component download process of shadcn/ui tiring, and I've done a video covering shadcn/ui in the past. I do think shadcn/ui is a great option and you should choose whatever you're most comfortable with. I do believe there are solid benefits to be had when it comes to using something like a Flex component instead of a div with className="flex". I want to again emphasize that you are going to structurally get the same exact result, so choose what you are most comfortable with. Benefits of Flex component over div: * When quickly reading code, you can understand your overall layout more easily. Instead of seeing "div div div div" you can instead see "Container, Flex, Grid" etc. so it makes code more readable at a glance. * The attributes in a flex component are easier to read when compared to long lists of classes (in my opinion), I prefer something like over . This is simply preference, and if you prefer tailwind alone then I suggest to do such. Outside of the two points above, it really is just preference. Again thank you for watching

[@ABHISHEK-jc8kn]

Pretty cool but i still prefer shadcn. Its easy to setup with the cli and has themes too. I personally think it looks much better by default,plus you have full control on how u want to use radix premitives. Not being able to do that and having to create extra wrapper in other component libraries is so annoying