# 8 UI Frameworks for your React App [React](https://reactjs.org/) is an open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by *Facebook* and has over 170k Github Stars making it the most popular framework (although stars may not be the best-ranking factor), according to the [stack-overflow 2020 survey](https://insights.stackoverflow.com/survey/2020), React ranks #1 on the list of most-wanted tools. ![CleanShot_2021-07-24_at_10.53.33_2x_sapbkojasjas.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634889693290/rddbZqxIi.png) In this article, we would look at some of the *UI Frameworks* you can use alongside your **React** project, judging based on sources such as: - GitHub - Npm - StackShare - Stackoverflow So let's start; ### 1. Ant Design *Ant Design* (or AntD) is an enterprise-class UI design language with a set of high-quality React UI components. It is one of the best React UI libraries for enterprises. It offers many polished components that could be used to build an entire application. The documentation is extensive, with tons of examples, and stays up to date. It's also my personal favorite :) #### Maintained by: [Ant Design](https://ant.design/). #### Github Stars: 73.4k #### Website Statisics: Used by [13, 741 websites](https://trends.builtwith.com/websitelist/ANT-Design/Historical) #### Used by: Binance, Alibaba, Alipay, Coinrule #### Pros: - Good Documentation and Examples - Typescript Support - Internationalization Support - Quality Icons [Visit Ant Design](https://ant.design/components/overview/) ### 2. Material UI *Material-UI* is the most popular React UI framework that provides Google Material Design out of the box. Material design takes inspiration from the physical world and textures while keeping the actual UI elements to a minimum. #### Maintained by: [Material UI & Google](https://mui.com/). #### Github Stars: 70.1k #### Website Statisics: Used by [193, 121 websites](https://trends.builtwith.com/websitelist/Material-UI/Historical) #### Used by: Medium, Roast, Meisterplan #### Pros: - Good Documentation and Examples - Exciting React themes and templates - Wide range of components [Visit Material UI](https://mui.com/) ### 3. React Bootstrap *React-Bootstrap* replaces Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. React Bootstrap is one of the oldest React UI libraries and has grown steadily with React itself. While React-Bootstrap doesn’t offer any official support, there is a massive, active community and plenty of resources supporting Bootstrap. #### Maintained by: [Mark Otto](https://markdotto.com/about). #### Github Stars: 19.1k #### Website Statisics: Used by 11, 221 websites #### Used by: Butterflynetwork, Scoutbee, Isgood.ai #### Pros: - Bootstrap’s grid system allows a fully responsive series of containers, rows, and columns for your layout. - Easy to use and edit [Visit React Bootstrap](https://react-bootstrap.github.io/) ### 4. Semantic UI *Semantic UI* React is the official plugin for Semantic UI. The library boasts a collection of over fifty components, including segments, progress bars, transitions, pagination, and more. However, despite all of its unique features, if you do not have hands-on experience in JavaScript, you may find the library a bit complex. #### Maintained by: [Jack Lukic](https://www.crunchbase.com/person/jack-lukic#:~:text=Jack%20Lukic%20has%202%20current,%2Dfounder%20at%20Myfav.es%20.). #### Github Stars: 12.4k #### Website Statisics: Used by 7, 033 websites #### Used by: Lumeneo, Hacker.works, Rev.io #### Pros: - Impressive customization and theming capabilities. - Wide collection for UI Components. - Zero traces of any jQuery code, simplifying the application development. - Declarative API. [Visit Semantic UI](https://react.semantic-ui.com/) ### 5. Chakra UI *Chakra UI* provides a set of accessible, reusable, and composable React UI components that make it easy to create websites and apps. Chakra UI components are built on top of a React UI Primitive for endless composability. The community of Chakra UI is very active. You will get all the help required whenever you feel stuck. #### Maintained by: [Segun Adebayo](https://ng.linkedin.com/in/thesegunadebayo). #### Github Stars: 19.6k #### Used by: Bonton, Orbital, LUGGIT #### Pros: - Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props. - You can use the same react component as much as you want and customize it for further use. - This library does not require any heavy set up to implement and is simple and easy to use. [Visit Chakra UI](https://chakra-ui.com/) ### 6. Blueprint *Blueprint* is a newly open-sourced design system implemented as a collection of composable React components and optimized for desktop applications. This is not a mobile-first UI toolkit. #### Maintained by: [Palantir](https://www.palantir.com/). #### Github Stars: 18.2k #### Used by: Allocate, NatML, Onedot #### Pros: - The React UI library has over forty components optimized in particular for complex data-dense interfaces for desktop applications. - Contains many useful components like breadcrumbs, buttons, callouts, cards, dividers, navbars, tabs, tags, and much more. [Visit Blueprint](https://blueprintjs.com/) ### 7. Fluent *Fluent UI* web represents a collection of utilities, React components, and web components for building web applications. It has Web Components and native libraries for iOS, macOS, Android, and Windows. #### Maintained by: [Microsoft](https://www.microsoft.com/en-us). #### Github Stars: 11.8k #### Website Statisics: Used by [97 websites](https://trends.builtwith.com/websitelist/Fluent-UI/Historical) #### Npm Downloads: 53,498/Week #### Used by: Microsoft #### Pros: - It has components for building forms and lists but also offers very specific ones like a PeoplePicker for example. - Good default styling capabilities without any code. [Visit Fluent](https://developer.microsoft.com/en-us/fluentui/) ### 8. Grommet *Grommet* is a React-based framework that provides accessibility, modularity, responsiveness, and themes in a tidy package. Grommet is a component library designed for responsive, accessible, and mobile-first web projects. It even has a list of SVG icons. #### Maintained by: [Hewlett Packard Enterprises](https://www.hp.com/in-en/home.html). #### Github Stars: 7.3k #### Npm Downloads: 23,278/Week #### Used by: Netflix, Uber, Boeing, HP #### Pros: - It embraces atomic design methods and allows for keyboard navigation, screen reader tags, and more. - Powerful theming tools which let you tailor the component library to align with your color, type, and layout needs. You can even control component interaction. [Visit Grommet](https://v2.grommet.io/) ### Conclusion With the above resource, you now have a list of 8 different UI Frameworks to pick from while building your next React project. Let me know if I'm missing any in the comment section 🤔 #### Resources used: - [Raftlabs](https://www.raftlabs.co/development/top-react-ui-frameworks?utm_source=medium&utm_campaign=crosspost) - [TrendsBuiltWith](https://trends.builtwith.com/websitelist) 👉🏾 [Learn more about me](https://abdulqudus.com) 👉🏾 [Connect on LinkedIn](https://www.linkedin.com/in/jideabdqudus/) 👉🏾 [Subscribe to my blog, let's feast](https://blog.abdulqudus.com) `QOTD: We are what we repeatedly do. Excellence then is not an act, but a habit. `