If there's a few things that are true
in this world, it's one taxes, two death, and three. Every developer has their favorite CSS
framework or library. Most people are in love
with Tailwind, some are in love with Material UI,
others Chakraui and me. Mantine Mantine is a CSS component library that works
with React and it is super fast to get any kind
of application going with plenty of support for things like
Pagination appshells and all sorts of other things that
make it super awesome. So by the end of this video I'll give
you a quick review of Mantine and let you know what's great about
it. So before I show you any code or anything cool that I've
built with Mantine, let's just explore from a docs
standpoint. So first of all, there are 120
customizable components built in with Mantine. It is free and
open source, which to me is always a big
old bonus. It's TypeScript based. So if you're a
lover of TypeScript, you're going to love this package. And
of course if you're not, it still works great. And they have
this thing about focus rings will only appear when a user
navigates the keyboard. Now this is a thing that Shakira UI
has that super annoying. If you like click in a certain area,
it will show the ring as if you were going to be tabbing
around on the screen and Mantine takes care of that. So
let's get in. They have all these different
packages and they're not all required to use the product. The only
thing that you need is the core and the hooks, the hooks for
state management and the core for all the input buttons, overlays, etc. Now if you want dates, they have the
Mantine dates package notifications notifications package, Prism for code highlighting, RTE which is a rich text editor that's built on
top of Quilljs which is one of my favorite features, and
Drop Zone for capturing files via drag and drop. And finally Modals
if you so wish. Now they have all sorts of
ways to get started. Gatsby, React, Beats and of course Remix, the newest hottest framework. And you can use a simple guide to get
started. Now some of the really cool things
that I love about this is as follows. So one of the most annoying things
about building any application is your app shell. It
needs to be responsive, handle, mobile, display, all the
things that you might need and Mantine takes care of that. It
gives you this great looking shell that you can then handle based
upon the size of your screen and it will be responsive. So this responsive version. If I open
the example in a new tab here you can see we have and
application header and a NAV bar. And if we F twelve and we Resize, you can see as we slowly start to
shrink down, everything seems fine. Now you can see
there there's a layout shift and then if we go all the way
down to smaller sizes, say 600 pixels or less. Now you have this hamburger menu that's already
built in and already ready to go and then you just have to fill
in all the data that's there. Now this is super useful for building
out the MVP. You don't have to worry about all
this kind of stuff, you just fill in the content and they'll handle
it via dark mode or light mode. Whatever you need. This is
handled. Next on my list of favorite things is
Pagination. Pagination is an absolute pain. When you implement
it yourself, you have to figure out a way to make
the UI look great and also obviously handle all the
JavaScript that comes along with it. So Mantine takes care of all the component based
things and you just have to fill in what you need. So here's an example.
And what I really love about their docs is they give you the ability to
sort of change the colors, size, shape, and with controls and edges, all those kinds of things all
in one place. So you don't have to be like oh, how
do I do this? What does it look like? Should I change it? You
can do it all in the docks. So right now this is a medium size and
you go all the way up to extra large. Bearing in mind this
is zoomed in at 150%, not quite this big, but you get the idea. Then you can
pick the color. So let's say Violet or grape here. And then let's
pick a radius. So we can have just a square, we can
have slightly rounded corners, more rounded corners
start to look like a circle and circles. And then we can add or remove these
controls and also with edges. And then down here they
give you the code to just copy and drop
right into your application. And this is for every single component
that you have. Here you can do this with, which makes it super
awesome to be like, oh, I really like the way this looks. Here is my
pre built components. On top of that, they show you how to
use controls as in the state. And then obviously you
can add all sorts of different things and
customize it further. So here we have siblings boundaries that you can
change and then they have accessibility, which is key
throughout. All their documentation is accessibility and that's super
awesome. Next on the list is Loading overlays.
If you ever just wanted to stop your user from using an
application while it's Loading data, saving data, modifying
data, whatever. And it becomes this kind of
battle between like, how do I stop this from happening using a
modal and also present something nicely. Well,
they have this Loading overlay, which I'll give you an
example right here. As you can see, we now have this disabled and we can't
actually do anything inside of here and it is doing a spinning
loader. What's cool about this is the Loading
part is actually customizable all the way up to how it looks. So
they have a separate feedback called the loader,
which you can see right here. And this is what we just
saw on screen. So we can change the color here, we
can make it huge, we can make it tiny, and then we can also do
different shapes and styles. So here we have bars,
which I really love, or dots, the classic loader. So with that, you can essentially stop
people from handling data after they've hit the
submit button. And you don't have to worry about all the
weird edge case where somebody has figured out that they can still modify stuff by
hitting Shift tab and then typing in a field. All of that is
disabled. Talking about data and Loading
notifications are really, really gorgeous in Mantine. So here we have some examples of their
notifications. They have a default one here, they
have one with a checkmark, one with a cross, and one that's
actually uploading data that you can then shift out with a
different type. These are all done really easily. It's
just the word notification. Loading title and then disallow close stops you from
being able to close this until it's done. This is really good for giving
feedback to your users. And then obviously if something goes
well, you can display a different notification, such as this
one here with that information. And last, and by me, not least, I
really like the skeleton component here that allows you to do some cool stuff. So
here we have a standard version unanimated. It just
shows a few different versions of skeleton. Here
we have a circle, and then here underneath we just have some
basic text that could be Loading in. And then when you
hit animate, you get this like nice sort of pulsing effect as it goes along. And you can also do this
with content. So toggle the skeleton, you can make
it visible propped so that it only shows when
certain conditions are met. So I've talked about a few of
my favorite features, and I think that you should check this
out on your own time and play around with all their different
things and items such as popovers maybe, or you want to
check out modals, which they do really well as well. Let
me show you what I've built with it. If you've been on the
channel for a while, you'll know that I run a SAS called Roll Your Tweets.
It allows you to roll a tweet into a blog post. Now
this has been revamped and revitalized
recently, and there's been a lot of improvements
alongside a lot of backend improvements. I actually
redid the UI to make it a bit more user friendly. So here you
can see I'm using that app kind of layout, and I've built my
own set of sections here. We have our creative section, we
have a settings section, a feedback and down here we have our
clerk user settings. If I click this I can
manage my account. Then we have this section which is
built using groups so I've built this using a group and a
card and this card is default so I didn't have
to do any styling. This is just how it came out of the box and if you
scroll down a bit further I have page nation here which allows
me to move through all my different items here and go
back all the way back to an old tweet from forever ago and I can go all the way forward to a
brand new tweet that I tweeted yesterday. On top of
that we have this little input section down here with a
cool little tool tip that was implemented with a single line of
code. Next up is the editing experience. I'm using
the Mantine RTE which was that rich text editor which is
powered by Quill in the back and this was implemented in basically three lines of code. I had
nothing else to do. All I'm doing is tracking the state
change here and the rest is done for me. Then that allows me to think about
other pieces of the back and and other technology without
having to worry about building out rich text Editors. If you've never
built a rich text editor before or used one, they're an
absolute pain to produce use and it just drives me nuts. One
thing to talk about is loader. I showed you
that Loading earlier in the video and we also have it here
in this app. You can see it just here and then finally I've
built some modules as well so you can see
there's a modal here was really quick to implement and I
really love it so that's enough about me talking
about my sass and Mantine. You should really check it
out if you want an easy to use component library that allows you
to move quickly and easily. If you did enjoy the video
make sure to drop it a like if you did really enjoy this video and
you want to see a Mantine tutorial please let me know in the comments. I
will happily do a tutorial on this and until next
time see ya.
