Mantine is a respected open-source library has been around for awhile. They have some very nice enterprise-grade components.
They've split their components into several libraries that you can pick and choose from. They also have a nice selection of templates including ones for both the Next.js App Router and Pages Router.
Note that unlike the previous two libraries, shadcn and Wedges, Mantine does not use TailwindCSS. Instead it uses postcss.
Mantine is also a true component framework. You'll be composing everything from layout to typography with components. You'll also be using Mantine's useForm hook instead of react-hook-form.
After watching this video you'll understand how to setup Mantine, put together a blog app using its UI components and hooks, and understand its pros and cons.
Transcript
Mantine, I don't know which, is an open source component library. It's been around for a long time, very respected. It has some fantastic enterprise grade components. Take a look. You can see down in the Mantine core down here, all of the different components you have access to.
One of the really nice things about Mantine is broken into hooks and forms and core and dates and charts so you can pick off what you want. Another nice thing about Mantine is you get these awesome templates including of course templates for the App Writer as well as pages, whichever way you want to do it, and of course, Vite and Remix or any other frameworks. All right, let's go and create our Mantine app and try it out. So do that when you use Create Next App, and I'm going to call it Mantine Test. Now, the big deal here is that we do not want to use Tailwind.
It is not a Tailwind-based library. All right, let's bring that up. All right, now the first thing we need to do is bring in our Mantine libraries. Those are the core. That's going to give us our core components.
Hooks, obviously our core hooks. And then form, because we're gonna have a form on the page and that has our form controls. Now Mantine uses PostCSS for styling, so we're gonna bring in PostCSS as well as the preset for Mantine and simple variables. Of course all those are coming in as dev dependencies or dash D. Now if we'd installed Tailwind we would have gotten PostCSS for free but we've also would have gotten Tailwind which we would have had then pull out so easier to just go and add in PostCSS right here.
All right now to configure PostCSS we need a PostCSS config.js and into there we need to bring our config which we get to set some breakpoints. You can, of course, define those any way you want to. These are set up from the documentation. All right, now the next thing we need to do is bring in our layout. So I'm going to go over here and replace our global CSS with bringing in the core styles.
It also needs a provider. So I'm going to bring in provider as well as color scheme script from the Mantine core. And then down here in our HTML section, I'm going to replace all of this with an HTML tag that has a head section in it that has our color scheme script. It's gonna handle our theming, as well as our children wrapped in that Mantean provider. That also means that I can get rid of enter because we're not using that anymore.
And yeah, there you go, looks good. Now that we've got our app layout set up, we need to go and bring in our blogs and types. So I bring in the blog.ts and types.ts files, just what we always do. So we bring in our blogs for our server actions and our type to define the type of a blog. And now we've got to create a blog component that renders our blog.
So Mantine is a true component framework. You're going to do layout with components. You're going to do typography with components. In this case, the layout component is box. You'll see that a lot in different component libraries.
Box is just essentially a wrap around div that gives you things like padding. In this case, we're going to use padding bottom small or PB small on our boxes. You also get typography stuff like title and text. Title is obviously title and text is just text. We're going to use those components to then iterate through the entries and render them and then we'll bring that in our page.
So in our page we want to do that to column layout. To achieve that we're going to use the flex component from Mantine. That's going to give us our side-by-side flex. And then the box component again, in this case we're just going to specify that we have a 50% width and give it a little padding. And as always, you're going to bring in the blog, get the entries, and invoke our blog with those entries.
Let's take a look. All right, looking pretty good, but I want a default color scheme of dark. So let's go back over to our layout and add on the Mantine provider. Default color scheme is dark. And refresh.
And we get dark mode. So easy. All right. We're halfway there. Let's go and create our blog form.
Go again to our app, blog form. Now as always, this is a client component, so this is interactive and it's a form. And of course, you need a form manager. So in this case, we're going to get that from Mantine Form, and that's going to give us Use Form. I actually think Use Form is probably the same as React Hook Form, maybe just a thin wrapper around it, who knows.
But regardless, it works exactly like React Hook Form. Next up, we'll bring in the components, text input, and button and group. The only change in this case with the form is we specify the mode of uncontrolled. You can probably do that in the other examples as well. The onFinish is exactly the same as we always do.
We just call that server action and then reset the form. Now in that form instead of using controllers like we did before, we're going to use form.key and form.getInputProps. Maybe that's the difference between this and React Quick Form. I don't know. These are certainly slightly less verbose than using controller, which I like.
And then we have a group layout control around our button. Okay, let's see. Let's go over to our page, bring in our blog form. Now let's take a look. Oh, that looks nice.
Nice and centered that time. I guess that's that group. All right, let's add some content And there you go. So I only have two quibbles of this particular framework. That's this flash of unstyled content that we get here on refresh.
You can see it going to white first and then going to dark mode. The other quibble is a lot less serious. It's just a personal thing around dark mode not being particularly dark in this case. It's kind of a deep gray with an off-white for text. I don't think the contrast is all that great there but yeah I'm sure you can change that with the different theming options that they've got.
From the coding standpoint I gotta say this is one of the easiest provider frameworks that we'll see. The Mantean provider out of the box clearly is a defined as a client component which makes it very easy to use. It was just very easy as you saw to set this up.
Mantine, I don't know which, is an open source component library. It's been around for a long time, very respected. It has some fantastic enterprise grade components. Take a look. You can see down in the Mantine core down here, all of the different components you have access to.
One of the really nice things about Mantine is broken into hooks and forms and core and dates and charts so you can pick off what you want. Another nice thing about Mantine is you get these awesome templates including of course templates for the App Writer as well as pages, whichever way you want to do it, and of course, Vite and Remix or any other frameworks. All right, let's go and create our Mantine app and try it out. So do that when you use Create Next App, and I'm going to call it Mantine Test. Now, the big deal here is that we do not want to use Tailwind.
It is not a Tailwind-based library. All right, let's bring that up. All right, now the first thing we need to do is bring in our Mantine libraries. Those are the core. That's going to give us our core components.
Hooks, obviously our core hooks. And then form, because we're gonna have a form on the page and that has our form controls. Now Mantine uses PostCSS for styling, so we're gonna bring in PostCSS as well as the preset for Mantine and simple variables. Of course all those are coming in as dev dependencies or dash D. Now if we'd installed Tailwind we would have gotten PostCSS for free but we've also would have gotten Tailwind which we would have had then pull out so easier to just go and add in PostCSS right here.
All right now to configure PostCSS we need a PostCSS config.js and into there we need to bring our config which we get to set some breakpoints. You can, of course, define those any way you want to. These are set up from the documentation. All right, now the next thing we need to do is bring in our layout. So I'm going to go over here and replace our global CSS with bringing in the core styles.
It also needs a provider. So I'm going to bring in provider as well as color scheme script from the Mantine core. And then down here in our HTML section, I'm going to replace all of this with an HTML tag that has a head section in it that has our color scheme script. It's gonna handle our theming, as well as our children wrapped in that Mantean provider. That also means that I can get rid of enter because we're not using that anymore.
And yeah, there you go, looks good. Now that we've got our app layout set up, we need to go and bring in our blogs and types. So I bring in the blog.ts and types.ts files, just what we always do. So we bring in our blogs for our server actions and our type to define the type of a blog. And now we've got to create a blog component that renders our blog.
So Mantine is a true component framework. You're going to do layout with components. You're going to do typography with components. In this case, the layout component is box. You'll see that a lot in different component libraries.
Box is just essentially a wrap around div that gives you things like padding. In this case, we're going to use padding bottom small or PB small on our boxes. You also get typography stuff like title and text. Title is obviously title and text is just text. We're going to use those components to then iterate through the entries and render them and then we'll bring that in our page.
So in our page we want to do that to column layout. To achieve that we're going to use the flex component from Mantine. That's going to give us our side-by-side flex. And then the box component again, in this case we're just going to specify that we have a 50% width and give it a little padding. And as always, you're going to bring in the blog, get the entries, and invoke our blog with those entries.
Let's take a look. All right, looking pretty good, but I want a default color scheme of dark. So let's go back over to our layout and add on the Mantine provider. Default color scheme is dark. And refresh.
And we get dark mode. So easy. All right. We're halfway there. Let's go and create our blog form.
Go again to our app, blog form. Now as always, this is a client component, so this is interactive and it's a form. And of course, you need a form manager. So in this case, we're going to get that from Mantine Form, and that's going to give us Use Form. I actually think Use Form is probably the same as React Hook Form, maybe just a thin wrapper around it, who knows.
But regardless, it works exactly like React Hook Form. Next up, we'll bring in the components, text input, and button and group. The only change in this case with the form is we specify the mode of uncontrolled. You can probably do that in the other examples as well. The onFinish is exactly the same as we always do.
We just call that server action and then reset the form. Now in that form instead of using controllers like we did before, we're going to use form.key and form.getInputProps. Maybe that's the difference between this and React Quick Form. I don't know. These are certainly slightly less verbose than using controller, which I like.
And then we have a group layout control around our button. Okay, let's see. Let's go over to our page, bring in our blog form. Now let's take a look. Oh, that looks nice.
Nice and centered that time. I guess that's that group. All right, let's add some content And there you go. So I only have two quibbles of this particular framework. That's this flash of unstyled content that we get here on refresh.
You can see it going to white first and then going to dark mode. The other quibble is a lot less serious. It's just a personal thing around dark mode not being particularly dark in this case. It's kind of a deep gray with an off-white for text. I don't think the contrast is all that great there but yeah I'm sure you can change that with the different theming options that they've got.
From the coding standpoint I gotta say this is one of the easiest provider frameworks that we'll see. The Mantean provider out of the box clearly is a defined as a client component which makes it very easy to use. It was just very easy as you saw to set this up.
Jack Herrington