4 Beautiful React UI Components Libraries You Should Be Using

if you're looking to speed up your process as a react developer and you want to go in and start using some react components that are pre-built that are greatly designed or you know semi-designed enough where you could customize them uh just enough to make it like an original design for yourself then this is some of the best resources that I'm about to give you right now okay so let's get into it all right guys you already know it's your boy Joe back at it again codingface.com if you like this type of videos make sure you subscribe and you like the content and leave a comment tell me what you think okay so today I want to introduce you guys to tremor.so so this right here is a react Library ready to build dashboards fast okay it's a series of components right you have things like area chart bar charts line charts scatter charts Donuts right accordions um again pretty much everything that you need to start building a dashboard now again this is really useful for someone building some type of full stack application and you want to have an admin section or a dashboard for the user to see some data and some stats okay instead of you having to build everything from scratch come in and use this library and again all of these libraries that I'm about to show you guys right now they're pretty much free so they're open source so any one of you guys can use it without having to pay a dime which is always a good thing right now the next one that we have right here is called Radix Dash ui.com and I really like this one because it's very nice and clean there's a lot of different examples of things that you can use so again you could theme this out right you got colors right dark mode right typography that's already laid out for you you got things for your layouts right you have grids Flex rank again it's just to make your life much easier you have things like a container right let's get into some of the components that it has uh you have an alert right again aspect ratio badges Avatar cards again you have different examples of things that you can go and build so it's really to save you some time as you can see edit profile which is like a dialogue right you have other things like hover cards as you can see here you have insets uh scroll area separator you also have tables tabs text area so pretty much everything that you need to start building a web application and again it has a lot of utilities that you can also use another thing that's pretty cool it has some Primitives right some examples of things that you can build with it you also have icons again if you're looking for some really clean icons this is one of the best ones that I've seen another thing that you have again is colors and you know accessible colors that can really work in a situation okay so that's Radix right there guys now again guys if you want to learn how to code and you like this type of content trust me you definitely want to come to codingface.com and try to service out um pretty much we don't teach coding as a hobby we focus on the things that's going to get you a job or you can start freelancing with or start building your own business if this is something that you're really passionate about and you want to start doing guess what definitely come to codingface.com we have the gold membership Diamond membership right so anyone with any type of budget can come in and get started now again you can always come in check out the Hall of Fame right don't believe me check out some of the students that we've had success with and people that have uh came through coding face and are killing it right now okay so yeah let's go to the next one that we have here now this one is a very popular one which is Chad dcn not chat CDN but chat uh dcn um again this one's another one that you can use for dashboards right they have a lot of different examples of things that you can do with their components you have different cards again if you want to build like a UI for some type of application that you're building especially with full stack this pretty much gives you every simple uh example that's out there for whatever it is that you're trying to go for you have a playground you see you got different modes texts right um you also have forms so you can see here some examples how let's say a profile page could look like okay now again you could go in and style this however you want but what's really cool is that the components are there already pre-built for you so definitely pretty cool again you have some examples here if you wanted to create like some type of application for maybe electron as you can see you could even have your your top menu already set up for you um again it's a lot of different things that you can do with this and yeah man you can see all of the different components and what's really cool is that you can pretty much integrate this with anything uh especially like next year yes wheat remix Gatsby Astro laravel um and just manually for any type of project that you might want again this does add Tailwind CSS so if you're using Tailwind this is going to be something that you can use and pretty much get started now for those of you guys that don't know Tevin CSS is just pretty much utility classes so it's pretty Bare Bones right so I know somebody that's coming from bootstrap they might say well why would I use Tailwind when you know none of the components really work or you know are actually something that I can use on day one right away is like I have to write the JavaScript but guess what this is why you use one of those components libraries where they're using tell with CSS and you can still customize it however you want using Tailwind but at the same time you already we have all of these components here that work for you um perfectly again you have buttons you have commands right you have date picker right if you guys have seen this this is one of the most difficult projects that you can do as a beginner you know building with JavaScript right a day picker is not as easy as people might think so guess what you could go in and choose something like this where it's already pre-built and all you have to do is style it however you want okay so again you have drop menus you have input Fields right different examples of input fields that you can use okay let me see what else we have in here scroll area you have select separators right sheets skeleton right when the data is loading up you can use that again you have tables of course so text area toast okay you see like a little menu or the pop-up model that pops up at the bottom okay so you can use that so yeah this is pretty cool again uh this is called Shad CN you can definitely check it out again I'm gonna put all of those links on the description for each one of these projects so you guys can go and check them out on your own time um then the last one that I have here is one that to me is probably like the most beautiful one um especially when you're somebody who might not have like a background in design and you just want to start building something that looks really good but again you want to focus on the functionality of your application you're like okay what do I do now do I have to now become a designer no guess what you use one of those libraries to help you build beautiful uis and get you started again if you go over here you have the documentation this pretty much works with everything that's out there next to yes beats remix Astro again this R uh react component so you're not just stuck with doing it with like the JavaScript way like next.js and and let's say um remix you can also go in and use those components for an application that you're doing with maybe larabelle or maybe c-sharp.net right or Java Etc you can pretty much use this and start building some pretty cool uh website so as you can see here this is like avatars that you can use um you have badges as you can see right so again there's a lot of little things that you know just save you time that you might need for your application but you might say you know what let me see if I could get a designer for this let me see if I could go get somebody else uh to build this for me it's like okay you might as well just use one as a libraries and just save you that time okay so again you have drop downs dividers images um so as you can see pagination right and it looks really good like I'm not gonna lie bro like this is really nice very smooth okay um again you have skeletons over here different examples of how you can use it when the data is loading all right um You have the popovers okay as you can see you have your scroll Shadow you also have like a spinner if you might need one for your application you have different tables okay organize and as you can see this was it has like more of a design and like a design style for this but um all the other ones you can customize and just like this one you can customize it as much as you you like you're just using the components to be able to you know speed up your process of building the application so you don't have to do everything from scratch okay so definitely go check it out guys um again I want to give you guys some quick videos just like this one where I just come in and give you guys some resources as I find them and yeah man definitely go subscribe to the Channel show some love tell me what you think which one have you ever used from this one chat dcn have you ever used um Tremor have you ever used something like the next UI let me know I mean I'm I'm interested in seeing what you guys think about these okay uh by the way also let me know what you think about this guy you like this new look this new style new camera new lenses new everything like let me know what you guys think in the comment section all right guys it's good to see you guys I'm back we're about to drop a lot of content for you guys so yeah let's get started man definitely go check out codingface.com and today is actually Monday so you already know accountability meeting 7 P.M eastern time for all the diamond members so if you want to become a diamond member you want to get into codingface.com it's pretty much the best thing to do because again you get access to me we get to look at your portfolio help you with the process of getting a job right um and again and you get access to every single course that's encodingface.com that's like 90 plus courses plus more that we're adding right now as we speak okay so I'm gonna see you guys later this your boy Joe back at it again codingface.com

Channel: CodingPhase

Views: 35,342

Keywords: codingphase, coding phase, codingphase.com, web developer, web development, css, javascript, html, Tremor, Radix-UI, ShadCN, Next UI

Id: lMPMD-7ZrBc

Length: 11min 27sec (687 seconds)

Published: Mon Aug 28 2023