UI libraries research

Context

To figure out which UI library should be used to develop my front-end, I researched UI libraries using the available product analysis research method.

Results

I researched UI component libraries that I could use to realise my designs.

Before choosing a UI library, it was important to set criteria for a library, as there are tons of options nowadays, ranging from complete design systems to simple copy and paste components.

The only libraries or components I would consider have to adhere to the following criteria that I based on my own experience, the project’s needs, and the stakeholders needs, with the most important criteria at the top:

• Default styling
• Compatibility
• Pricing
• Customizability
• Dependencies
• Accessibility
• Selection of components

With this criteria in mind, I looked at lots of popular UI libraries and how they fit in to my project:

For a full analysis, please refer to the full research document:

Conclusion

Since my design is rather straightforward and inspired by existing web shops, I want to use a library that has a focus on accessibility, good practices and good interactivity. It has to be based on Tailwind, should be free, and I should be able to directly alter the component to fit my own designs.

I have chosen to use shadcn/ui as my component library because it gives me the most freedom and flexibility over my components, as well as being very well designed in terms of interactivity and accessibility. While the default styling for shadcn/ui components might not always fit my designs, due to having the complete freedom over the component, I can adjust styles where needed and keep the interactivity aspect of the component.

Learning outcomes

4: Investigative Problem Solving

By analysing and researching more than 10 different UI libraries and picking one based on multiple criteria that fit my project's needs, I show that I take a critical look when researching possible solutions for my problems.