While developing large applications, we may need styled buttons, inputs, and other UI elements. Creating components for each of them can be time-consuming and tedious. You will also need to test them, and make sure they work well on different devices and browsers.
This is where component libraries come into play. Component libraries are collections of ready-made components that we can use in our projects. They save our time and effort by providing us with common UI elements that are already designed, coded, and tested.
Component libraries offer UI elements packaged as React components, which can be customized by providing specific prop values based on our needs.
Some popular component libraries for React are Chakra UI, Material UI, and Antd.
At BigBinary, we have developed an in-house component library named neetoUI. neetoUI is a collection of beautiful and responsive components that follow the neeto design system.
neetoUI provides us with components such as Buttons, Input, Modal, Table, Alert, and many more. We can customize them by passing different props as per our needs.
You can explore the neetoUI components on its official website.
Setup neetoUI
Step 1. Navigate to the root of the smile-cart-frontend directory and install neetoUI and its peer dependencies using the following commands:
Step 2. To get the styles working, import neetoUI and ReactToastify stylesheets to the main CSS entry point. In our project, the src/index.css file serves as the entry point for CSS. Replace the contents of src/index.css with the following lines:
Commit the new changes
Before committing your changes and pushing them to your repository, it is important to make sure that Git is installed and set up properly on your system. Git is a version control system that allows you to track changes, collaborate, and manage your project efficiently.
We want you to go through our Getting Started with git chapter to familiarize yourself with git.
Once you have set up git and are comfortable with its basic commands, proceed with committing the changes we have made in the lesson.
Once you have set up neetoUI, you can import and use neetoUI components by passing props according to your requirements. Here is an example that uses the Button component from neetoUI:
That’s it! We have learned how to use the neetoUI component library. We'll be using the neetoUI component library to build our project.
You can verify the changes here.
To learn why neetoUI is not imported as @bigbinary/neetoui but used as neetoui, please refer to Path aliases.