Chakra is another incredibly popular UI framework that's compatible with the App Router.
They are open-source and provide a large library of enterprise-level components.
Instead of Tailwind, Chakra is emotion based. Since emotion is being used, creating a Provider client-component will be necessary unlike Bootstrap and some of the other UI frameworks.
Chakra is a strong component framework so you'll be using their components to build your UI. One nice feature about their components is that there are various style props such as mb (margin bottom) that you can pass so you don't have to wrap everything in a Box if you want to adjust layout.
Server components are also well supported. So typography components don't need to live inside client components like they do in frameworks such as Ant Design.
Transcript
Another very popular UI framework to use with React, and also the next JS App Writer is Chakra. So let's go take a look at how to use Chakra and its amazing components. Take a look at our amazing components over here. You can see all the different integrations over here with the frameworks, and you can take a look at the components. An awesome list of enterprise-level components, of course, open source for you.
That's fantastic. And it's also got some excellent documentation on how to get started with the App Writer. Let's try it out for ourselves. So we'll create our Chakra test. We're not going to use Tailwind.
Chakra does not depend on Tailwind. Other than that, we'll make sure to use the App Writer, and we'll bring it up in VS Code. Of course, the next thing we need to do is install the libraries. That includes the Chakra React library as well as the Next.js library that integrates with Next.js. Also use Emotion for styling.
So we're going to need to bring in those as well, as well as Framer Motion for animations. Now because it's Emotion-based, it pretty much means that you need to have a provider. So we're gonna go and add that. We create our own providers over in a providers.tsx file, just as the installation tells us to. It's gotta be a client component because it is a provider.
So it has to be a client component. We're gonna bring in the shocker provider to actually do the heavy lifting. Then we're going to go and set up the theme. In this case we're just going to say that as a dark mode theme and then we're going to set up the Chakra provider with that theme. To use this we're going to go over into our layout.
We're going to place our globals with importing those providers that we just created as well as the color mode script. The color mode script is going to initialize color mode. Then down in our HTML, we'll put our color mode script in our head with the initial color mode of dark, so we get our dark theme by default. And then we'll wrap our children in the providers tag that we just created. Alright, let's go bring in our blog infrastructure.
Those are the two files, blog.ts, that has our server actions and types that define our blog. That's the standard set that we use for every single one of these examples. And now that we have our blogs, we can actually format them in a component. We'll call that blog. Chakra is another strong component framework, so you're going to do your layout as well as your typography with components.
The layout in this case would be using box, and then the text and the heading are used for typography. Now the cool thing about Chakra in this case is that even though heading is a typography element, you can still think use things like MB3 to put some margin at the bottom of it. So you don't actually have to wrap heading in a box just to get the padding, which is quite nice. All right, let's go bring that into our page. To do that, we're gonna replace page with some code that brings in stack and box from Chakra.
Stack is a vertical or horizontal, I guess, stack, and box is a wraparound div that gives you things like margin and all that. So inside of our main box, which has some padding, we're going to use a stack. So that's going to give us the directionality of rows. So we're going to get some columns and then we're going to say each box is 50% and we're going to put in our blog entries. All right, let's go have a look.
All right, that looks pretty good out of the box. Now there is that foowok, that flash of unstyled content as I hit refresh. That's not great, that's because of my motion, but otherwise I would say that's quite nice. Again, the dark mode isn't 100% dark, but yeah, that's fine. Okay, so now let's go and do our form, so you can see how that works.
Chakra does not have a forms manager, so we're going to use React Hook Form. Personally I actually think that's a good choice not to have a Forms Manager, but that's just me. I think Component Library should do components and Form Hook should do Form Hooks. All right, let's go to our app, create a blog form. Of course, as always, this would be a client component.
We're gonna bring in UseForm and Controller from React with Form, and then we're going to bring in all of our UI presentational components from React, including Form Control, Form Label, the layout components like Stack and Box, and then Button and Input. Our UseForm is going to be standard React with Form, or RHF UseForm, as well as our onSubmit. We'll have a form tag with our onSubmit handler and then we'll use a stack to give us a vertical stack this time where we have our controllers, our form controls, our labels on our inputs, the two for text and content, and then our button inside of a box. Okay, let's try that out over our page. Hit save and let's give it a go.
All right, nice, well formatted and yeah, perfect. Other than this flash of unstyled content that you get on startup, this is really nice. I would note that unlike other frameworks in the blog, this is a React server component. We're doing typography in here, And this does not have to be a client component. So that's really good.
I'm really appreciative of that. I understand having to use useClient for interactive components like we do here in our blog form, but I don't think that when you do just basic typography and laying out data, that it should necessarily be a client component. I think you should be able to render that on the server and then send that out just like you can here with Chakra. Very nice. So if you're looking for an enterprise set of components that works reasonably well with RSCs, other than that flash of unsolved content, Chakra's pretty good.
And solid content, Shaka's pretty good.
Another very popular UI framework to use with React, and also the next JS App Writer is Chakra. So let's go take a look at how to use Chakra and its amazing components. Take a look at our amazing components over here. You can see all the different integrations over here with the frameworks, and you can take a look at the components. An awesome list of enterprise-level components, of course, open source for you.
That's fantastic. And it's also got some excellent documentation on how to get started with the App Writer. Let's try it out for ourselves. So we'll create our Chakra test. We're not going to use Tailwind.
Chakra does not depend on Tailwind. Other than that, we'll make sure to use the App Writer, and we'll bring it up in VS Code. Of course, the next thing we need to do is install the libraries. That includes the Chakra React library as well as the Next.js library that integrates with Next.js. Also use Emotion for styling.
So we're going to need to bring in those as well, as well as Framer Motion for animations. Now because it's Emotion-based, it pretty much means that you need to have a provider. So we're gonna go and add that. We create our own providers over in a providers.tsx file, just as the installation tells us to. It's gotta be a client component because it is a provider.
So it has to be a client component. We're gonna bring in the shocker provider to actually do the heavy lifting. Then we're going to go and set up the theme. In this case we're just going to say that as a dark mode theme and then we're going to set up the Chakra provider with that theme. To use this we're going to go over into our layout.
We're going to place our globals with importing those providers that we just created as well as the color mode script. The color mode script is going to initialize color mode. Then down in our HTML, we'll put our color mode script in our head with the initial color mode of dark, so we get our dark theme by default. And then we'll wrap our children in the providers tag that we just created. Alright, let's go bring in our blog infrastructure.
Those are the two files, blog.ts, that has our server actions and types that define our blog. That's the standard set that we use for every single one of these examples. And now that we have our blogs, we can actually format them in a component. We'll call that blog. Chakra is another strong component framework, so you're going to do your layout as well as your typography with components.
The layout in this case would be using box, and then the text and the heading are used for typography. Now the cool thing about Chakra in this case is that even though heading is a typography element, you can still think use things like MB3 to put some margin at the bottom of it. So you don't actually have to wrap heading in a box just to get the padding, which is quite nice. All right, let's go bring that into our page. To do that, we're gonna replace page with some code that brings in stack and box from Chakra.
Stack is a vertical or horizontal, I guess, stack, and box is a wraparound div that gives you things like margin and all that. So inside of our main box, which has some padding, we're going to use a stack. So that's going to give us the directionality of rows. So we're going to get some columns and then we're going to say each box is 50% and we're going to put in our blog entries. All right, let's go have a look.
All right, that looks pretty good out of the box. Now there is that foowok, that flash of unstyled content as I hit refresh. That's not great, that's because of my motion, but otherwise I would say that's quite nice. Again, the dark mode isn't 100% dark, but yeah, that's fine. Okay, so now let's go and do our form, so you can see how that works.
Chakra does not have a forms manager, so we're going to use React Hook Form. Personally I actually think that's a good choice not to have a Forms Manager, but that's just me. I think Component Library should do components and Form Hook should do Form Hooks. All right, let's go to our app, create a blog form. Of course, as always, this would be a client component.
We're gonna bring in UseForm and Controller from React with Form, and then we're going to bring in all of our UI presentational components from React, including Form Control, Form Label, the layout components like Stack and Box, and then Button and Input. Our UseForm is going to be standard React with Form, or RHF UseForm, as well as our onSubmit. We'll have a form tag with our onSubmit handler and then we'll use a stack to give us a vertical stack this time where we have our controllers, our form controls, our labels on our inputs, the two for text and content, and then our button inside of a box. Okay, let's try that out over our page. Hit save and let's give it a go.
All right, nice, well formatted and yeah, perfect. Other than this flash of unstyled content that you get on startup, this is really nice. I would note that unlike other frameworks in the blog, this is a React server component. We're doing typography in here, And this does not have to be a client component. So that's really good.
I'm really appreciative of that. I understand having to use useClient for interactive components like we do here in our blog form, but I don't think that when you do just basic typography and laying out data, that it should necessarily be a client component. I think you should be able to render that on the server and then send that out just like you can here with Chakra. Very nice. So if you're looking for an enterprise set of components that works reasonably well with RSCs, other than that flash of unsolved content, Chakra's pretty good.
Jack Herrington