Building a Great UI is Easy with this React Library

as far as I know Red X UI the UI Library I'm going to introduce to you in this video recently got acquired by a company and then in turn they stopped their marketing efforts resulting in not a lot of people knowing about Red X UI and that's a shame because it has served me super well in my freelance project in production open source projects that I did and it's overall a really great library that comes totally unopinionated in terms of styling meaning it allows you to implement your completely owned design system you don't need to override Styles you don't need a context provider which is especially useful in Nexus 13 and it has a lot of great advantages in this video you're gonna get used to Red X UI by building a component together with me it's kind of like the hello world of Red X UI we're gonna build a super simple pop over component together and it's going to be really exciting I hope Radix serves you as well as it did me and now let's get started in building this Radix component together what Radix UI does for you is it gives you the building blocks that you need for your application you can imagine them like Lego bricks that you stack on top of each other only importing and installing whatever you need for your application making your final bundle size way smaller as compared to something like material UI and I much prefer this approach you don't need to provide any context if you style them you don't need to overwrite anything else because they are unstyled by default now you can obviously go with some styles that they have done in their documentation but this is totally unopinionated when it comes to styling a very clean approach that I really enjoy also you don't need to worry about accessibility now that goes for most UI libraries Redix is not special in that sense but it does adhere to all the area standards which means if I press tab it will take me to the next input field and then if I press shift and tap it takes me to the previous one and always pressing escape will close the dialog now if you want to have more information on these area standards accessibility standards so you can make your app accessible to everyone visually impaired people people navigating with a keyboard you can read up on them I'm gonna put a link in the description to the official area dialog model however you don't need to worry about that it's already done by Red X UI for you now to get started with red X UI and the experience why I really enjoy this approach and have used it in previous freelance projects in my open source projects let's actually build a Radix component together I think that's going to be the coolest approach to learn to use it yourself now to get started with Radix we install the component that we want to create as I said earlier each component is a separate package which allows it to be super modular the one we're going to use is the add Radix Dash UI slash and then react hyphen pop over and that needs to be yarn at so we're going to say yarn and then add Red X so I react pop over that's going to install this particular component and all its Primitives for us now Primitives when you're working with Radix is a special term describing these Lego bricks that Radix gives you that you can then use in your application now in our app there is no need to worry about any context provider whatsoever they are unstyled so an extra s13 in case of a server component we can literally just start building that is super convenient we can import everything as pop over from and then add Red X UI slash react popover so now we have access to everything that is contained in this package it's pretty lightweight and we can use it in our app right away we can replace the main div and we're going to replace this by the pop over dot and then we can see there's a bunch of properties we have on this popover that we can use to create our components there's a trigger root a portal and a bunch of other stuff now what we need right now is the root if you're wondering why exactly the route read up on the Red X UI documentation it's super well written it's definitely up there as one of my favorite documentations this is what we're going to be building this little pop over a simplified version of that it's fully customizable you can see a lot of the features on the Redix page and you can also see right here under the API reference why exactly we're doing what we're doing the root contains all the parts and then you can see the types of props you can pass it's super integrated with typescript which I really enjoy they trigger the anchor and we'll take a look at each one of them while we need them right now so let's go back and then inside of the pop of root we are going to initialize our trigger because the pop over and GitHub copilot is already spoiling us here because the pop over is going to be opened by pressing a button so we're going to say pop over and then dot trigger and this can say whatever we want so let's say open pop over super simple let's save that and start up the development server and let's visit that development server of nexjs13 right here in our browser let's go to localhost 3000 and see what this little pop Overlook and that didn't work because we need to put this inside of a client component so a little best practice that I'd like to show you is we're going to take this component and move it into our components and then let's create a new file called pop over dot TSX this could also go into a UI folder because it's going to be a very reusable UI component however I'm not going to worry too much about reusability right now just so I can show you the main benefit of Red X UI and not get too caught up in architecture of this particular application if you want to see how proper clean architecture looks like I've done a open source image generator that I'm going to link in the description and you can take a closer look at that let's call this Radix pop over so we don't have a naming conflict right here and then replace or pop overs with the Radix pop over and that's all we need to do now let's declare this as a client component because this Redix primitive does need a use effect meaning we can't do it on the server if you react that's going to be client by default you don't need to worry about that then we can render the pop over right in our page now let's see if this works the arrow is gone if we click the open pop over nothing happens just yet because we're still missing one or two more steps and there really is not a lot that is missing so we can say pop or Radix pop over and then dot portal the reason we are creating a portal is that we want to move all the content that is inside this pop over to the document body instead of being rendered with the other HTML so it doesn't get any styling conflicts any layout shifts in the pop over and then in here we can say pop or Radix pop over I guess dot content and this is the content we want to show while the pop-up is open so we can just say hello world inside of here save that go back over to our development server here on the left hand side refresh and if I click open pop over this opened if I click close it closes that is the beauty of Radix UI right here not literally because this is really ugly I know but it gives you all the building blocks and I pressed Tab and this is focused right away now to demonstrate the keyboard accessibility let's try something else instead of the hello world let's put a div in here with a class name of flex Flex column and then Gap off to just to apply a little bit of styling so it's a bit easier to see and then let's put two buttons in here one saying you know Change option one and the second button saying Change option two let's format this save it and take a look at what this looks like in our server or or application I guess it's not just a server we can open the popover and then navigate using tab shift Tab and close this pop over using Escape we can also Focus this with the arrow keys the first option after we press it if I press the arrow key it's focused and all the keyboard accessibility features that we talked about at the beginning of the video this area pattern that I introduced to you are fulfilled with Radix you don't need to worry about that and all you need to worry about is building a great UI system or styling system for your application and that's it those are the reasons I like Radix great documentation super extensible they provide the examples in regular CSS with stitches even though I have no idea what that is and then also tail 1 CSS I guess if you like this channel then chances are you have heard of Tailwind CSS before they give you installation they can you can copy paste their code that has styling in it it's great it's really really good not sponsored by the way I just I like their system I think it's great you can focus on the more important part and already have the accessibility all done for you that's all I want to share I hope you enjoy it as much as I do and let me know your thoughts down below if you like or prefer other UI systems I'd be interested in hearing that and I think my lighting is already giving out so that's gonna be it thank you very much for watching I'll see in the next one and bye bye

Channel: Josh tried coding

Views: 12,345

Keywords: build portfolio website with react, chakra ui, josh tried coding, joshtriedcoding, mantine, mantine ui, material ui, mui react, nextjs, nextjs 13, radix, radix ui, react, react 18, react component library, tailwind, typescript

Id: EUrbuROiuaA

Length: 9min 21sec (561 seconds)

Published: Sat Mar 25 2023