It's hard not to fully recommend NextUI. It's built on top of React ARIA and Tailwind CSS. And, it comes with an excellent default dark theme.
The biggest issue is that it's kind of a pain to install. The automatic installation introduces a lot of boilerplate that you have to strip out. In my opinion, manual installation is the way to go. So, we're going to walk through that in the video.
Once you're through the manaual install, like shadcn, you install the individual components as packages. But, unlike shadcn the code isn't being copied into your project.
As you build your app with NextUI you'll see what makes it so great. The components are elegant and ARIA compliant. And, Tailwind gives you a lot of flexibility!
If you like NextUI, they also offer premium components with NextUI Pro.
Transcript
Next UI makes some absolutely gorgeous components for your App Writer application. It's hard not to recommend it, although I would say that installation can be a bit of an issue, as you'll soon see. There is an automatic installation that you can use. Problem is that it brings in a ton of boilerplate. So yes, it's super easy to set up, but one, you probably don't understand what it set up.
And two, there's a lot you're gonna have to cut out because when it installs its boilerplate, it's a lot of just, hey, we're Next UI, you're going to love us kind of stuff. You probably don't really want, so you're going to want to pull that out. So what we're going to do instead is we're actually going to follow the manual installation instructions, which are quite lengthy. So if you're into this, I think the payoff is definitely worth it. I liken it to a saltwater fish tank.
It's going to be a lot of work to set up, but once it's there, there's nothing else like it. So, all right, let's get into it. Let's take a look at how to install Next UI into a Next App app router. I'm going to create a Next UI test. Now Next UI is actually built on top of Tailwind, so let's use that.
Okay, let's bring that up. Now the first thing we need to do is install a bunch of different libraries. We'll bring in theme as well as system from Next UI org. We're going to use frame of motion for our animations. We're going to bring next themes for themes and then CLSX is a very old school class builder helper function.
All right. Next thing we need to do in any of these Tailwind frameworks is we need to install this in a Tailwind. So we'll go over to our Tailwind config, we'll bring in the Next UI plugin, we'll add that to our list of plugins. We also need to add in the location of Next UI. This is so that Tailwind can see as we use Next UI components that the Next UI component classes need to be in our classes.
And finally we're going to use the dark mode as the class. All right now this actually is a providers-based framework So we're gonna go and create a providers in our app. All right, our providers component is going to create two sub-providers, one's for Next UI. I guess that's gonna push around some ability for Next UI to manage navigation. And then the themes provider provided by Next Themes Provider.
Next up, we're going to bring in fonts. So over in our source directory, we're going to create a new file called fonts. That's going to define what we want to use for Mono and Sans fonts. And now we actually get to deal with the layout. So we'll go over here to our layout, we'll bring in CLSX, as well as our providers and our fonts.
We'll get fonts from there. And then we'll replace the HTML with the suggested code from the instructions. Now I gotta say, I'm not super keen on them suppressing the hydration warning right at the top there. That's not particularly great, but that's what they suggest. We're also going to bring in viewport from next, and then we're going to do something interesting.
We're going to create this viewport exported constant that is going to give us our themes. We're going to say that if we see prefers light, then we're going to set the color to white. Otherwise the color is going to be black. Interesting. All right, I think, I hope that everything's set up.
So we're going to bring in our blogs. So blog has our server actions and types has our type for the blogs as always. Let's get rid of that enter in there. Now let's format our blog. So to do that, as in all of our Tailwind examples, We're simply going to use Tailwind for both the typography and the layout.
So in this case, we're gonna format the title using H1. We're gonna bold it, we're gonna give it a little bit larger a size, as well as a margin on the bottom. And then for the entry, we're just gonna use a light font and a little more margin. Let's go and put together our page. In this case, we're just going to get the entries from the blog, we're gonna bring in that blog component that we just created, and we're gonna use that to then render our blog.
We're gonna use the flex as well as the width and the padding to manage the layout of this component. So we did all that work and we haven't really used any of Next UI yet. Let's go over here to our app. Interesting. I think I still need to bring in globals.
So let's go bring that back in. That was a mistake to take that out. All right, That was a mistake to take that out. All right, that was a mistake to take that out. Ah, there we go, better.
Ah, yeah, without globals, it didn't bring in tailwind. It's hard to do anything on Tailwind if you didn't bring it in. Okay, now the next thing we're gonna do is we're gonna go and build out our form. And this is where it gets interesting. So we're gonna bring in a couple of things.
So we're gonna bring in React-Like-Form because Next UI has no built-in forms management, but we're also going to bring in Next UI's input and button. And that's actually kind of where this starts to get interesting. Next UI is inspired by, but not the same as ShadCN, where ShadCN actually copies code into your project. Next UI instead has different packages for every single component you might want to use. In this case, input and button are two different components and so we want to bring those in to manage our UI.
Nice thing is in this case once they rev Next UI or input and button, we get those updates for free. So if they find any bugs in it, then they can fix them, which is awesome. All right, let's bring those in and let's build out our blog form. To do that, we are over in our app and we do blog form. And then we bring in our code.
We use React QuickForm as we often do if the component library doesn't have a Forms Manager to bring in useFormController. We're gonna bring in those input and button that we just added. And then down our implementation, we use exactly the same React QuickForm code as we always do in any RHS example. The controllers in this case are just going to run to those inputs and the button is going to be a button. Let's hit save and let's bring it into page and try it out.
That looks good. Let's launch it. And there we go. Not looking too shabby. I would say I'm not a huge fan of how roundy the inputs are.
Of course that is theme controllable, but otherwise a really nice set of components. Very easy to use once you get it set up. And I mean, I would say maybe the installation isn't as arduous as I thought. And kind of in my notes, it seemed a little more arduous than it is. So there we go.
Next UI, if you're looking for a nice set of commercial grade, open and free components, you can get those. They also, as I understand, have a Next UI Pro that also has more components that are, I guess, pro level or premium and you can then buy those as well.
Next UI makes some absolutely gorgeous components for your App Writer application. It's hard not to recommend it, although I would say that installation can be a bit of an issue, as you'll soon see. There is an automatic installation that you can use. Problem is that it brings in a ton of boilerplate. So yes, it's super easy to set up, but one, you probably don't understand what it set up.
And two, there's a lot you're gonna have to cut out because when it installs its boilerplate, it's a lot of just, hey, we're Next UI, you're going to love us kind of stuff. You probably don't really want, so you're going to want to pull that out. So what we're going to do instead is we're actually going to follow the manual installation instructions, which are quite lengthy. So if you're into this, I think the payoff is definitely worth it. I liken it to a saltwater fish tank.
It's going to be a lot of work to set up, but once it's there, there's nothing else like it. So, all right, let's get into it. Let's take a look at how to install Next UI into a Next App app router. I'm going to create a Next UI test. Now Next UI is actually built on top of Tailwind, so let's use that.
Okay, let's bring that up. Now the first thing we need to do is install a bunch of different libraries. We'll bring in theme as well as system from Next UI org. We're going to use frame of motion for our animations. We're going to bring next themes for themes and then CLSX is a very old school class builder helper function.
All right. Next thing we need to do in any of these Tailwind frameworks is we need to install this in a Tailwind. So we'll go over to our Tailwind config, we'll bring in the Next UI plugin, we'll add that to our list of plugins. We also need to add in the location of Next UI. This is so that Tailwind can see as we use Next UI components that the Next UI component classes need to be in our classes.
And finally we're going to use the dark mode as the class. All right now this actually is a providers-based framework So we're gonna go and create a providers in our app. All right, our providers component is going to create two sub-providers, one's for Next UI. I guess that's gonna push around some ability for Next UI to manage navigation. And then the themes provider provided by Next Themes Provider.
Next up, we're going to bring in fonts. So over in our source directory, we're going to create a new file called fonts. That's going to define what we want to use for Mono and Sans fonts. And now we actually get to deal with the layout. So we'll go over here to our layout, we'll bring in CLSX, as well as our providers and our fonts.
We'll get fonts from there. And then we'll replace the HTML with the suggested code from the instructions. Now I gotta say, I'm not super keen on them suppressing the hydration warning right at the top there. That's not particularly great, but that's what they suggest. We're also going to bring in viewport from next, and then we're going to do something interesting.
We're going to create this viewport exported constant that is going to give us our themes. We're going to say that if we see prefers light, then we're going to set the color to white. Otherwise the color is going to be black. Interesting. All right, I think, I hope that everything's set up.
So we're going to bring in our blogs. So blog has our server actions and types has our type for the blogs as always. Let's get rid of that enter in there. Now let's format our blog. So to do that, as in all of our Tailwind examples, We're simply going to use Tailwind for both the typography and the layout.
So in this case, we're gonna format the title using H1. We're gonna bold it, we're gonna give it a little bit larger a size, as well as a margin on the bottom. And then for the entry, we're just gonna use a light font and a little more margin. Let's go and put together our page. In this case, we're just going to get the entries from the blog, we're gonna bring in that blog component that we just created, and we're gonna use that to then render our blog.
We're gonna use the flex as well as the width and the padding to manage the layout of this component. So we did all that work and we haven't really used any of Next UI yet. Let's go over here to our app. Interesting. I think I still need to bring in globals.
So let's go bring that back in. That was a mistake to take that out. All right, That was a mistake to take that out. All right, that was a mistake to take that out. Ah, there we go, better.
Ah, yeah, without globals, it didn't bring in tailwind. It's hard to do anything on Tailwind if you didn't bring it in. Okay, now the next thing we're gonna do is we're gonna go and build out our form. And this is where it gets interesting. So we're gonna bring in a couple of things.
So we're gonna bring in React-Like-Form because Next UI has no built-in forms management, but we're also going to bring in Next UI's input and button. And that's actually kind of where this starts to get interesting. Next UI is inspired by, but not the same as ShadCN, where ShadCN actually copies code into your project. Next UI instead has different packages for every single component you might want to use. In this case, input and button are two different components and so we want to bring those in to manage our UI.
Nice thing is in this case once they rev Next UI or input and button, we get those updates for free. So if they find any bugs in it, then they can fix them, which is awesome. All right, let's bring those in and let's build out our blog form. To do that, we are over in our app and we do blog form. And then we bring in our code.
We use React QuickForm as we often do if the component library doesn't have a Forms Manager to bring in useFormController. We're gonna bring in those input and button that we just added. And then down our implementation, we use exactly the same React QuickForm code as we always do in any RHS example. The controllers in this case are just going to run to those inputs and the button is going to be a button. Let's hit save and let's bring it into page and try it out.
That looks good. Let's launch it. And there we go. Not looking too shabby. I would say I'm not a huge fan of how roundy the inputs are.
Of course that is theme controllable, but otherwise a really nice set of components. Very easy to use once you get it set up. And I mean, I would say maybe the installation isn't as arduous as I thought. And kind of in my notes, it seemed a little more arduous than it is. So there we go.
Next UI, if you're looking for a nice set of commercial grade, open and free components, you can get those. They also, as I understand, have a Next UI Pro that also has more components that are, I guess, pro level or premium and you can then buy those as well.
Jack Herrington