UI Library
Component Libraries
#Overview
A component library is a collection of reusable UI elements to easily add complex functionalities with a focus on accessibility. Unlike CSS frameworks which use class for applying styles in an HTML element, a component library provides ready-to-use ‘components’ for a developer to implement. But what is a component? In development, a component is essentially a reusable and modular piece of code that performs a function to make up an application. A component returns HTML code with JavaScript functionalities and animations as well. Developers can then import the required components like a button, dropdown, date picker, and many more into their document.
These libraries are usually designed to be used with a specific JavaScript framework. As React is the most popular framework, there are lots of component libraries built for it compared to other frameworks. Hence, two of the libraries used as an example in this article are based on React.
#Material UI (React-based)
Material-UI (MUI) is a popular and widely used open-source UI component library for React.js applications. It is based on Google's Material Design guidelines, which provide a set of design principles and visual language for creating clean, modern, and intuitive user interfaces. It has been around since 2015 so it has formed a large community while also being used by major companies.
MUI uses emotion; a library for writing CSS in JavaScript as default for its styling engine. But there are also options for using plain CSS or other frameworks like styled components and Tailwind CSS. So you can easily customize a property of a component using CSS properties. Or you can also customize the default themes like palette, spacing, breakpoints, and so on.
Below is an example of using the button and accordion components in a React application. Using a button is pretty straightforward forward as you just import the component from the MUI library and use the Button component. Some basic customization can be done using variants and color props to switch to a different pre-defined style. Or the sx props can be used for CSS-in-JS styling as seen in the second button where the color and borderRadius is changed.
Meanwhile, complex components like accordion can use multiple components. The three important components required here are Accordion as the parent element, AccordionSummary for the title, AccordionDetails for the description that can be toggled. By using this, you will have a fully functioning accordion in a few lines without needing to write any JavaScript codes while being accessible which makes the development process so much faster and easier.
As the core library of MUI is based on Google’s material design principle, developers may find it limiting. So some other React libraries like Mantine and Chakra are still great options that have modern designs with high customizability and functions.
Resources
#Vuetify (Vue-based)
Vuetify is a comprehensive UI component library designed specifically for Vue.js, a popular JavaScript framework for building user interfaces and single-page applications. It is also based on Google’s material design principle.
Setting up a component library may differ depending on the framework but the main concept remains the same. So just like in Material UI, components in Vuetify can be customized using the variants, color and other props. And Vuetify does not require styled libraries like emotion or styled components so the components can be styled using CSS classes or through their utility classes.
The components are not styled with any colors by default leaving the choice to the developers by using the material color palette or define their own as seen with the second and third button components.
An accordion can be created using the expansion panel component and setting the variant to “accordion”. They can then be styled using CSS.
Some other popular Vue component libraries to consider are primevue element plus
Resources
#Radix UI (unstyled React-based)
Radix UI is a React-based component library that provides a collection of accessible and composable components that can be used to create complex UIs. One of the unique features of Radix UI is that it is an unstyled library, meaning that it provides components with no visual styles attached. This allows developers to customize the look and feel of the components to match their specific design needs.
Unstyled libraries have been getting popular recently due to their unopinionated styling while still providing functional and accessible components. They can be styled using CSS or other libraries making them highly customizable and adaptable to a wide range of design requirements.