If you are looking for the tutorial! Here it is, I show you how to build a UI just with Mantine How to use Mantine Dev with Next.js th-cam.com/video/zhfkOjtBQNI/w-d-xo.html
This video right here is the one got me using Mantine and i have never looked back since. As of this comment, Mantine is on version 7, which doesn't use emotion with a focus on css modules and postcss, can be turned into a headless ui which is pretty much radix ui, extendable components, has a color generator, a much easier styles api that integrates well with Tailwind if you want or any other css solution of choice, support for css layers and it's absolutely glorious. The only "bad" thing about it is if you strictly want server components that don't hydrate on the client. It doesn't support that yet since the components need a provider that wraps the entire application for them to work properly and use hooks. Otherwise Mantine is a goated ui library that is heavily slept on. Admittedly, i think it's best use is in enterprise applications moreso than smaller applications but they all benefit heavily.
Subbed. Would really appreciate a video on how to implement the pagination and a few other components. You have a good skill with explaining this type of content.
I'm convinced I'm going to update my project this weekend with this library. Would love a tutorial but your explanations was perfect thank for the content
Mui is pretty pants performance wise. Tailwind is nice as you can strip it down easily enough so it’s not too weighty. How does this compare from your experience?
Yeah MUI was is perf heavy. I like tailwind except the DX isn’t as great as Chakra or Mantine. Performance for Chakra and Mantine is great, and the MVP outperforms tailwind
@@james-perkins yeah, it would be interesting to see how it’s implemented along the way of building a simple project, like blog or e-commerce landing page. For some reason this awesome tool is not really as popular as others, at least on TH-cam there are not many comprehensive videos about it. Thanks for the video nevertheless!
Man :) Thanks for making a video about this! I've never heard of Mantine before, this is really neat. Do a tutorial, if it's like this video it's gonna be great.
there is one problem tho. all component and everything is made in px so if you change font size from browser nothing will change on ui unless you overwrite the default styles in e everything
But it depends as well on how you feel, if you really like Mantine or Chakra or any CSS Framework or maybe if where you work, they already have a CSS Framework chosen. But, it is great to learn many different things
Looks almost identical to MUI in implementation and syntax. Not necessarily a bad thing since it makes the switch easier. Been browsing the documentation for an hour now, and I can see that it's much more thorough and better organized (IMO) than MUI's. They even cover 3rd party library implementation like yup for forms. The documentation is holding your hand and guiding you through everything, lol. And then there are the other packages, which are all mind-blowing. This is pretty much MUI, but with more features and better documentation. I wouldn't compare it to Tailwind UI because that's a utility-first CSS framework and therefore incomparable. As for Chakra UI, I love using OpenChakra to turn Figma mockups into React code with Chakra UI. That's a massive time-saver, so I won't say there's a clear winner here.
My dev guy been using it very nice but seem to return w3c validation errors on behalf mantine have you ever check w3c validations with mantine ? Thanks
@@james-perkins he's only doing front-end no apis and returning errors, I pretty much prefer him to follow w3c standards but it's out of his control if there's any tips for him for front-end only I would appreciate it. Thank you
you are never too far in, I was about to get expert in AngularJS before switching to React because of the market, took a long time but I eventually succeedeed lol
I did watch many comparison videos for tailwind vs other css and finally decided to go with tailwind. But, now I fee like I was wrong. This explanation was unique & your confidence for mantine made me think on tailwind vs mantine. I hope you are actually right. 👍
Nope, he is wrong. Use Tailwind CSS. And if you want to fast style your application, like he is doing here, use Tailwind UI or Daisy UI. What advantage you have over Mantine ? Well You can use Tailwind UI in every framework, not only React same as Daisy UI. Tailwind UI is a set of cases ready to use in plain HTML, and Daisy UI just extends Tailwind CSS with their own classes.
@@mises9863 Yes boss. You are absolutely right. Tailwind is king. And Daisy UI makes it easy for you. Just let me know, Which one is better - Tailwind UI or Daisy UI??
@@samnayakawadi I abuse Daisy in Development and if customer wants some changes I can easily do them using Tailwind CSS and because Tailwind CSS is really close to plain CSS I can do what ever I want in every framework I use.
I fixed your comment “Nope, I think he is wrong” Development is very opinionated. I believe in mantine and the flex it gives me. Not saying tailwind isn’t good…
@@james-perkins Mantine same as Bootstrap is not flexible. You can use it only in React. Daisy UI is doing exactly the same thing, and You can use it in any framework! What you not understand? You like to learn together with new Framework like Vue or Angular, another UI styling library/framework?
Web3 vibes are not a good thing for me and a lot of other devs that hate blockchain and see it as a huge waste of the planet resources! WEB3 IS NOT WEB 3.0
If you are looking for the tutorial! Here it is, I show you how to build a UI just with Mantine
How to use Mantine Dev with Next.js
th-cam.com/video/zhfkOjtBQNI/w-d-xo.html
This video right here is the one got me using Mantine and i have never looked back since. As of this comment, Mantine is on version 7, which doesn't use emotion with a focus on css modules and postcss, can be turned into a headless ui which is pretty much radix ui, extendable components, has a color generator, a much easier styles api that integrates well with Tailwind if you want or any other css solution of choice, support for css layers and it's absolutely glorious.
The only "bad" thing about it is if you strictly want server components that don't hydrate on the client. It doesn't support that yet since the components need a provider that wraps the entire application for them to work properly and use hooks.
Otherwise Mantine is a goated ui library that is heavily slept on. Admittedly, i think it's best use is in enterprise applications moreso than smaller applications but they all benefit heavily.
Yesterday I had implemented Chakra UI for a new personal project, but after seeing this video I'm going to take a deep look into Mantine! Gracias!
same
Thank you so much I love this new library!
Looks good , definitely gonna use it for my next project
Hope you enjoyed it as much as I did
@@james-perkins ITS AMAZING MAN, THANK YOU FOR SHOWING ME
Thanks for the title , I was searching how to learn tailwind and Chakra...but landed here ..it's seems far better than above 2
Damn, the interactive builder in the docs is amazing!
Sooo nice! Speeds up learning to implementation.
I saw this recently and love it as well!! Great video going over the best parts of it👏
being a contributer for mantine, thanks for making this video 😃
Absolutely thanks for an awesome project
@@james-perkins 😊
Yes, we want a Mantine tut!!! :D
Awesome!!!
Tailwind and Mantine have completely different purposes. One is css+ other is just a component library.
Yes. I am aware of this. Tailwind is still last on my list of things to use ever.
@@james-perkins vay u use that bolşit?
Subbed. Would really appreciate a video on how to implement the pagination and a few other components. You have a good skill with explaining this type of content.
Good vid, mantine really looks helpful
I'm convinced I'm going to update my project this weekend with this library. Would love a tutorial but your explanations was perfect thank for the content
I remember this project...i was about to use chakra for my next project, but uve changed my mind 🤣
Continue the nice work. Congrats!
Thanks, will do!
Great tutorial. Would like to see a tutorial
can i use mantine js without typescript?
sure.
Mui is pretty pants performance wise. Tailwind is nice as you can strip it down easily enough so it’s not too weighty. How does this compare from your experience?
Yeah MUI was is perf heavy. I like tailwind except the DX isn’t as great as Chakra or Mantine.
Performance for Chakra and Mantine is great, and the MVP outperforms tailwind
@@james-perkins excellent! Thank you for your prompt response. I’ve just been checking the docs… looks promising. Thanks for the heads up.
Thanks for this ! Would love a tutorial, btw
Noted!
Subscribed, a tutorial on this would be nice.
Anything you’d like to see be built out?
a simple blog
@@james-perkins yeah, it would be interesting to see how it’s implemented along the way of building a simple project, like blog or e-commerce landing page. For some reason this awesome tool is not really as popular as others, at least on TH-cam there are not many comprehensive videos about it. Thanks for the video nevertheless!
I dropped a tutorial already it’s on the channel should be the 2nd latest video
Man :) Thanks for making a video about this! I've never heard of Mantine before, this is really neat. Do a tutorial, if it's like this video it's gonna be great.
You are welcome! Glad to bring it to new eyes.
This is going to be a perfect candidate for my MVP.
Awesome!
sold
A link to the site would be nice trying to find it and only getting Pokémon
Sorry forgot to pin the comment it's mantine.dev
@@james-perkins awesome thanks!
i love using chakra but mantine is on another level..
using it for my next project
What advantage u saw then Chakra ui , seems both same
hey just some advice for your saas. good idea, but there needs to be a way to select tweets by date of post instead of just a card layout
Mantine is the best UI lib period
there is one problem tho. all component and everything is made in px so if you change font size from browser nothing will change on ui unless you overwrite the default styles in e everything
wrong
@@antoineweb1 what do u mean. i already tried it. and developer himself told me that everything is made in px like buttons etc
@@feeltrig8822 "if you change font size from browser nothing will change on ui" this part is wrong
@@antoineweb1 i tried on few browsers and is not working for me
But it depends as well on how you feel, if you really like Mantine or Chakra or any CSS Framework or maybe if where you work, they already have a CSS Framework chosen. But, it is great to learn many different things
Hi James, thank you so much for this video.. I'm excited , yes could you please help us with full length in detail tutorial please..
Already done one on the channel.
How to use Mantine Dev with Next.js
th-cam.com/video/zhfkOjtBQNI/w-d-xo.html
Thanks James for the quick reply.. Didn't expect though.. Really great..
Check it out at mantine.dev You won't be disappointed
Looks almost identical to MUI in implementation and syntax. Not necessarily a bad thing since it makes the switch easier.
Been browsing the documentation for an hour now, and I can see that it's much more thorough and better organized (IMO) than MUI's. They even cover 3rd party library implementation like yup for forms. The documentation is holding your hand and guiding you through everything, lol. And then there are the other packages, which are all mind-blowing.
This is pretty much MUI, but with more features and better documentation. I wouldn't compare it to Tailwind UI because that's a utility-first CSS framework and therefore incomparable. As for Chakra UI, I love using OpenChakra to turn Figma mockups into React code with Chakra UI. That's a massive time-saver, so I won't say there's a clear winner here.
Great presentation! I would also like to see a tutorial.
Almost there, stay tuned
@arslan
🙏 thanks
I use mantine too. But it’s far from perfect yet.
component library looks impressive, but how to you style all the other stuff. Do you use plain CSS for that?
You can build anything with it, if you need a plan div to style… you can use the Box component mantine.dev/core/box/
now that's been a while since the upload, do you still recomend Mantine over Chakra?
Yup 👍
Building an app Mantine for sure
Building marketing stuff Chakra
@@james-perkins thx
My dev guy been using it very nice but seem to return w3c validation errors on behalf mantine have you ever check w3c validations with mantine ? Thanks
I have, it depends a lot of how you are using it. If you are tapping into styles correctly using their api correctly.
@@james-perkins he's only doing front-end no apis and returning errors, I pretty much prefer him to follow w3c standards but it's out of his control if there's any tips for him for front-end only I would appreciate it.
Thank you
That is the front end. If he is getting W3C errors he needs to make sure he is using the correct style APIs or props that are offered.
Awesome video +++++++++++++++++++++ 😃
Damn, I am currently using Chakra ui, but I wanna switch.... butt I am too far in :(
This was me about a month ago 😂
you are never too far in, I was about to get expert in AngularJS before switching to React because of the market, took a long time but I eventually succeedeed lol
Mantine is underrated
Facts
I did watch many comparison videos for tailwind vs other css and finally decided to go with tailwind. But, now I fee like I was wrong. This explanation was unique & your confidence for mantine made me think on tailwind vs mantine. I hope you are actually right. 👍
Nope, he is wrong. Use Tailwind CSS. And if you want to fast style your application, like he is doing here, use Tailwind UI or Daisy UI. What advantage you have over Mantine ? Well You can use Tailwind UI in every framework, not only React same as Daisy UI. Tailwind UI is a set of cases ready to use in plain HTML, and Daisy UI just extends Tailwind CSS with their own classes.
@@mises9863 Yes boss. You are absolutely right. Tailwind is king. And Daisy UI makes it easy for you. Just let me know, Which one is better - Tailwind UI or Daisy UI??
@@samnayakawadi I abuse Daisy in Development and if customer wants some changes I can easily do them using Tailwind CSS and because Tailwind CSS is really close to plain CSS I can do what ever I want in every framework I use.
I fixed your comment “Nope, I think he is wrong”
Development is very opinionated. I believe in mantine and the flex it gives me. Not saying tailwind isn’t good…
@@james-perkins Mantine same as Bootstrap is not flexible. You can use it only in React. Daisy UI is doing exactly the same thing, and You can use it in any framework! What you not understand? You like to learn together with new Framework like Vue or Angular, another UI styling library/framework?
vanilla extract is the another good css library
can use with vuejs ?
No, only React based (React, Gatsby, Remix and Vite)
You should try primereact, see you again.
mantine is very good
i live in kuwait and we dont have taxes
True, but maybe soon for excise taxes on goods.
It’s more a saying than anything “death and taxes are the only guarantee”
Really nice but I like chakra ui more
Don’t get me wrong I still use Chakra on some projects as well.
I use Mantine for those MVPs I want to be fast from ground to working
Try NextUI next
They have a long way to go but looks promising, and gives me web3 vibes
Waiting for them to mature a bit, I’ve used it a few times. Not sure if gives Web3 vibes but it does look good
Web3 vibes are not a good thing for me and a lot of other devs that hate blockchain and see it as a huge waste of the planet resources! WEB3 IS NOT WEB 3.0
And this isn't better than tailwind
I'm the first one Here👍🏻.
Is it usable in svelte?
You lost me at "that works with React".
Sometimes I win, sometimes I lose. Sorry you aren't a fan of React / React Frameworks
No thanks
Great tutorial. Would like to see a tutorial