How to select the Right UI Framework for your next React Project?

Key Personnel

Dilsher Singh

Sr. Manager Creatives

Pramod Sai Naik
     Megavath

Asst. Project Manager

Jobanjit Singh

Sr. Software Engineer

Vishal Pandey

AGM- Operations & General Management

Manjot Singh

Sr. Software Engineer

React Hooks (into The Future of React)

Author: Sathwik Edupuganti
July 2, 2020 | SimbaQuartz

In this article, I’ll be discussing how to choose the perfect UI framework for your next React Project. Being an Intern at SimbaQuartz it was my first encounter with a project of such Complexity. I was told about the requirements, workflow, and the scenarios that were to be handled in the project.

With such a huge project to be developed, the task was to implement the functionality making sure not to compromise on the appearance of the project. Using a UI framework made our task pretty simple. Now, all we have to do is to make a perfect and optimized code.

Our Judgemental Criteria Included :

The breadth of the components
Quality of implementation
Ease of re-styling
Quality of documentation
Project Support

Our main contenders were :
1. Ant Design ProSemantic UI
2. Ant Design ProSemantic UI

1. Ant Design Pro

a) The breadth of Components:

Ant Design Pro has a vast number of inbuilt components which can be Imported from the Ant-d environment.

b)  Quality of Implementation:

Good looking components had plenty of options and had good interoperability.

c)  Ease of Re-Styling:

The Ant-D components are re-styleable but not made to be Overhauled. The default ant-d style was sufficient for our requirement.

d)  Quality Of Documentation:

Though the documentation is provided in Chinese, it had a good translation. And were provided with thorough examples.

e)  Project Support:

Ant-D Pro has around 20,000 stars on GitHub and has good support on Stack Overflow and Github.

2. Semantic UI

a) The breadth of Components:

Good selection of components, but may need to complement with others (i.e. date picker, filtering/sorting on a data table)

b) Quality of Implementation:

Good looking components had plenty of options and had good interoperability.

c) Ease of Re-Styling:

The components are re-styleable very easily. The documentation for every component is provided very clearly.

d)  Quality Of Documentation:

Interactive examples of each component, clear navigation & information on theming, component options, and sample layouts.

e)  Project Support:

Has around 1,500 stars on github.com and is maintained by Open-Source contributors.

For Our Project’s use-cases, Ant Design React appears to be the best fit. It offers a great number of components, and each is quite easy to use and integrate with others. We’re doing a lot of quick prototyping, and Ant is exceptional for these purposes. Its documentation and extensive examples are supremely helpful for getting started quickly.

However, for Everyone Ant-D isn’t necessarily the best option for everyone: If you need easy theming, then Semantic UI React might be a great fit.

We’ve been happy with Ant Design since we started using it, though we had some hiccups we were able to find a solution either through the documentation or Social Forums. Simply picking one UI library and sticking with it solves a lot of problems with consistency and bugginess that you might have with roll-your-own solutions or picking various single components from who-knows-where.