Menu

Radix UI crash course

In this article, we will learn about Radix UI and how to use it in our React projects.

What is Radix UI?

It is a UI framework for react which comes with reusable components. But unlike other UI frameworks it doesn't comes with any styles. You have to manually add them but it comes with all the features and logic just like other frameworks.

Why Radix UI?

  1. Custom styles. Since you won't be using any default styles, you can customize the styles as per your needs.
  2. You can download individual components instead of the whole framework. This will reduce the bundle size.
  3. It is built with accessibility in mind. So you don't have to worry about accessibility.

How to use Radix UI?

In your react project just install the components. For example, if you want to use just the form Component, you can install it using the following command.

1npm install @radix-ui/react-form

Patterns in Radix UI components

  1. All components are actually composed of multiple components. For example, the form component is composed of Root, Label, Input, etc. - Root is the main container
  2. Components can be styled using classnames and they also accept other props which can be found on the doc

We will go over some of the components in this article.

Dialog component

You can easily create modal with this component. It comes with all the features like closing on clicking outside, closing on pressing escape, etc.

Form component

Menu component

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostHow to add multiple documents to firestore from Nextjs14
Next PostBuild better forms with React hook form | Everything you need to know