I Just Discovered The Most Underrated UI Library for React

so after so many of you recommended Mantine after my last video I finally got a chance to try it out by myself and man this library is super super great it is very underrated and it's super nice so this magical UI library is called mantin and it's a really really awesome UI library for react and from the home page you can easily say that it's free and open source it's types crep based and literally you can use it anywhere for all the Frameworks from next s Remax or any other framework and for the versions it's already in version 7 so you can easily see that they have come so far they've published so many versions so that means it has a pretty good Legacy so if you go into the get started in here it's just going to get you started in here with a bunch of template you can just easy get started with most importantly like the next GS here you've got like the up Pages at V gasby whatever you want and it gives you detailed Guides of how to use it with every single one for example if you click on next GS in here just going to going to give you all the details of how you install it and what I really really like about it like when it comes to installation here it lets you choose the actual package or the components that you want to install so it doesn't actually install everything for you which is pretty good and it makes them optional so instead you can just you know have a selective installation you can install whatever you like and you can emit whatever you like so for example in here you can go ahead and select form and you want to install dates charts it has tons and tons of like different components from Like A Tip Tap in here notification for example drop zone and from down here you can go and actually copy the installation command using mpm or yarn and by the way this one uses post CSS which is pretty good as well just to process everything up for you for me what I really really like about it and actually what makes it or breaks it for me when it comes to a UI library is the number of components it provides and the fixability of each component so for example in here if I go to mantin Cory which actually just going to offer you all the components actually where all the you know standard reusable component is going to live so like main time cord in here if you just scroll all the way down like just keep scrolling you're going to find tons of component like an endless list of components so example for an input in you can click on the input just gives you a disclaimer allows you in here to play around with the different props and how you can style and customize and UT however you would like maybe disabled in here ER uh filled unstyled and you can go down here with like an icon without an icons there's different variations and it never ends like you can just you can clearly see here the number of like you know examples it provides on the documentation so this actually plays a major role for me because it helps explaining what's happening and how I can use that UI library to its most I mean I can't go over all the components here because there's tons of them already so that will take the whole video but cre in here like for example skeletons if you want to animate and every single one of these component Works seamlessly in in in harmony with the rest of the components so that makes it very complete and very well made up I mean look at these menus they look really cool with the icons and the animation in here pretty simple as well and there's actually older components as well for example when it comes to dates and times there's actually a date picker in here for you it works really well as well maybe a year picker uh time input and literally even for charts like for Designing and displaying charts in here there's like different both of charts in here and you can actually play around with the different properties just to customize it however you like even like a donut chart and the crazy part about this one that I really really like I never seen like another view ey Li maybe I missed one or maybe haven't seen a lot but this one that is ships with custom made hooks in here just to help you reuse those hooks and actually type and and and quickly build up products actually comes with this hooks for example I've got oh use click outside for example I can click outside in here and just like uses this hook to know when you click outside this drop down or not maybe use hover in here to know know when the mouse is over bunch of these hooks can be used and of course installed separately and the last crazy part about this one is actually if you head up in here men UI click on it it's going to take you to this really awesome website this actually pre-built or pre-made sort of components using M UI that you can just simply copy and paste for example you go to browse component there is tons of them from nav bars hitters Footers grids y y yet for example when you go to the stats these are already pre-made using M UI for example I like oh this dashboard or maybe this bluish one looks pretty good so like you having preview you can go to the code and you can clearly see in here everything in here is built using mentin it just like you know brings everything from Menon even gives you the custom CSS that is involved into like the creation of that one simply you can just go copy code and you can just put it in here side of your project and you're good to go well I'm not going to talk any further because that library is self-explanatory and you can just go and explore it by yourself to M.D this video isn't sport whatsoever I'm just in love with this library after so many of you guys recommend it didn't know that before but this is in crazy good Library

Channel: CoderOne

Views: 26,975

Keywords: react, shadcn, shadcn ui, shadcn/ui, shadcn-ui, radix, radix ui, react shadcn, vercel shadcn, react shadcn ui, nextjs shadcn, react ui, react ui library, react components library, ui library, top ui library, components library, ui components, react ui components, react ui components library, top react library, react chakra ui, react ant design, react mui, react material ui, material ui, evergreen, react bootstrap, bootstrap ui library, mantine ui, mantine, eceternity

Id: sXwdGmY9SAY

Length: 5min 4sec (304 seconds)

Published: Mon Mar 04 2024