Editor’s Note: This guide was reviewed and revised on 14 April 2022 to update information for MUI and to include two additional popular React UI kits: Semantic UI React and Blueprint UI. This post was previously updated on 30 July 2021 to include Chakra UI and Ant Design.
React is currently atop the JavaScript food chain. Stack Overflow’s 2021 Developer Survey shows React as the most commonly used web framework.
Due to its popularity, many UI libraries have built custom React components to facilitate easy integration and improve the developer experience.
There are countless React UI kits and libraries today. In this guide, we’ll highlight 11 of the most useful kits and libraries and show how you can use them in your next React app. A few of them are popular, some are more obscure, and any of them could help address the unique needs of your next React project:
- Shards React
- React Suite
- PrimeReact
- Grommet
- Onsen UI
- MUI
- React Bootstrap
- Chakra UI
- Ant Design
- Semantic UI React
- Blueprint UI
1. Shards React
Shards React is a UI library created by DesignRevision. It was built from scratch according to modern development best practices and enables blazing-fast performance.
It’s very easy to get started with Shards React:
npm i shards-react
Now, we can import the components and the required styles:
import { Button } from "shards-react" import "shards-ui/dist/css/shards.min.css" function ButtonsEx() { return ( <div> <Button>Primary</Button> <Button theme="info">Info</Button> </div> ) }
These commands will display two buttons, each styled with Shards UI.
As you can see, Shards is simple to use. See the documentation to learn more about Shards and its components.
2. React Suite
Another awesome React UI kit, React Suite is, as its name suggests, a suite of React components. It boasts of a sensible UI design and a friendly development experience and is designed for middle-platform and backend products.
Check it out on GitHub.
The kit is quite simple to use. First, install it via npm:
npm i rsuite --save
React Suite has a massive pool of components. To use one of them, simply restructure it from rsuite
.
To use a component from its huge pool of components, we just destructure it from rsuite:
import { Button } from "rsuite"
3. PrimeReact
PrimeReact is one of the most extraordinary React UI kits I’ve ever seen. It features a huge collection of more than 70 components to choose from and really accelerates frontend design and development.
This UI kit was built by PrimeTek Informatics.
In addition to a wide variety of components, PrimeReact features custom themes, premium application templates, a11y, and responsive and touch-enabled UI components to deliver an excellent UI experience on any device.
For more details, check out PrimeReact on GitHub.
The kit is easy to install and use:
npm i primereact --save
For icons, you can download the PrimeIcons library:
npm i primeicons --save
To use a component, import it at the import section of the component’s documentation:
import { Button } from "primereact/button" function PrimeButtonEx() { return ( <div> <Button>Button</Button> </div> ) }
4. Grommet
Part-design, part-framework, Grommet is a UI library based on React. It features a nice set of components that make it easy to get started. The library also provides powerful theming tools that enable you to tailor the component library to align with your desired layout, color, and type.
The Grommet Design Kit is a drag-and-drop tool that makes designing your layout and components a breeze. It features sticker sheets, app templates, and icons galore.
To set up Grommet, run the following command in your React app:
npm i grommet
To use a component such as Button
, destructure it from the "grommet"
package:
import { Grommet, Button } from "grommet" function GrommetButtonEx() { return ( <Grommet className="App"> <Button label="Button" /> </Grommet> ) }
5. Onsen UI
If you want your web app to feel native, this UI library is for you. Onsen UI is designed to enrich the user experience with a mobile-like feel. It’s packed with features that provide the UI experience of native iOS and Android devices.
Onsen’s UI elements and components are natively designed and perfect for developing hybrid apps and web apps. The library enables you to simulate page transitions, animations, ripple effects, popup models — basically, any effect you would find in native Android and iOS devices.
It is quite easy to use Onsen in a React app. First, install the npm packages:
npm i onsenui react-onsenui --save
onsenui
contains the Onsen UI core instance. react-onsenui
contains the React components:
import { Page, Button } from "react-onsenui" function OnsenButtonEx() { return ( <Page> <Button> Click Me!!</Button> </Page> ) }
Then, import the onsen CSS.
import "onsenui/css/onsenui.css" import "onsenui/css/onsen-css-components.css"
I fondly refer to Onsen UI as the native CSS of the web.
6. MUI
MUI (previously Material-UI) is based on Google’s Material Design. It provides React components built with Material Design.
To install, run the following command:
// with npm npm install @mui/material @emotion/react @emotion/styled // with yarn yarn add @mui/material @emotion/react @emotion/styled
Next, import the component you want to use from the @mui/material
:
import Button from '@mui/material/Button'; function MatButtonEx() { return ( <div> <Button color="primary"> Button </Button> </div> ) }
MUI also provides beautiful premium themes and templates you can purchase to jumpstart your project.
For more information about MUI, see the official docs.
7. React Bootstrap
As the name suggests, React Bootstrap provides React components built with the world’s most popular CSS framework, Bootstrap.
React Bootstrap did well to remove most dependencies from the Bootstrap JavaScript, such as jQuery, and it was built with compatibility and a11y in mind. It also comes with a wide variety of components.
To install React Bootstrap in your project, run the below command:
npm i react-bootstrap
Next, you can import individual components:
import Button from "react-bootstrap/Button" function BootstrapButtonEx() { return ( <div> <Button> Click Me </Button> </div> ) }
See the source code for React Bootstrap on GitHub.
8. Chakra UI
I am so proud of my fellow Nigerian, Segun Adebayo, for developing Chakra UI. It has a clean and neat UI and is one of the most complete React UI kits I have ever seen. Its APIs are simple but composable, and the accessibility is great.
Chakra UI has over 25.2K GitHub stars as of this writing. It is very extensible and customizable.
It’s easy to get started with Chakra UI. Inside your React project, run the below command to install it:
npm i @chakra-ui/react @emotion/[email protected]^11 @emotion/[email protected]^11 [email protected]^4 # OR yarn add @chakra-ui/react @emotion/[email protected]^11 @emotion/[email protected]^11 [email protected]^4
Chakra UI has a ChakraProvider
that we must provide at the root of our application when we want to use Chakra components:
import * as React from "react"; // 1. import `ChakraProvider` component import { ChakraProvider } from "@chakra-ui/react"; function App({ Component }) { // 2. Use at the root of your app return ( <ChakraProvider> <Component /> </ChakraProvider> ); }
To use a component, for example a Button
, we will have to import it from @chakra-ui/react
:
import { Button, ButtonGroup } from "@chakra-ui/react";
Then we can render the Button
like so:
function ChakraUIButtonEx() { return ( <div> <Button>Click Me</Button> </div> ); }
For more information about Chakra UI and its components, visit the official docs.
9. Ant Design
Ant Design is regarded as one of the best React UI kits in the world. With over 79.4K stars on GitHub as of this writing, it tops the list as one of the most used and downloaded React UI kits.
Ant Design incorporates and promotes global design patterns and offers the following features:
- Powerful theme customization
- High-quality React components
- Internationalization support
Ant Design is quite simple to install and use in our React project:
npm install antd # OR yarn add antd
We can import the style sheets manually:
import 'antd/dist/antd.css';
We can import any component we want to use from antd
. For example, to use a Button
, we do this:
import { Button } from "antd"; function AntdEx() { return <Button type="primary">Primary Button</Button>; }
Visit this page to see all components in Ant Design. Ant Design also has a spin-off for Angular and one for Vue.js.
10. Semantic UI React
Semantic UI React is the official Semantic UI integration for React. It is a complete React UI kit that is built on top of the Semantic UI CSS framework. It is a great choice for React projects.
This Semantic UI React boasts over 100 components and offers the following robust features:
- Auto controlled state: stateful components are auto controlled; there’s no need to explicitly write code to get the state or the event
- Shorthand props: Semantic UI React components have a shorthand syntax for passing props. For example, instead of
<Button type="primary" />
, we can write<Button primary />
. A prop can translate to so many values. For example, theicon
props can be an iconname
, an<Icon />
instance, or an icon props object - Augmentation: a component can be rendered as another component using the
as
props; aHeader
may be rendered as anh3
element in the DOM
Semantic UI React is easy to install:
$ yarn add semantic-ui-react semantic-ui-css ## Or NPM $ npm install semantic-ui-react semantic-ui-css
After installation, we can then import the minified CSS file:
import "semantic-ui-css/semantic.min.css";
Now, let’s see how we can use an inbuilt Semantic UI component. Let’s use the Button
component:
import React from "react"; import { Button } from "semantic-ui-react"; const ButtonExampleButton = () => <Button>Click Here</Button>; export default ButtonExampleButton;
To see all components in Semantic UI React, visit the official docs.
11. Blueprint UI
Blueprint UI is a React-based UI kit for the web. It is hugely optimized for building complex interfaces for desktop applications. The Blueprint UI kit has over 18.7K stars on GitHub as of this writing. It is very extensible and customizable.
Installing Blueprint UI is very simple:
yarn add @blueprintjs/core react react-dom
The @blueprintjs/core
is the core of the Blueprint UI kit. It contains over 40 components we will use. The react-dom
and react
packages are required for Blueprint UI to work. Other additional components can be gotten from:
- @blueprintjs/icons
- @blueprintjs/select
- @blueprintjs/datetime
- @blueprintjs/table
- @blueprintjs/timezone
To use a component from Blueprint UI, we’ll have to import it from @blueprintjs/core
. For example to use the Button
component, we will have to import it from @blueprintjs/core
:
import { Button } from "@blueprintjs/core";
Then we can render the Button
like so:
function BlueprintUIButtonEx() { return ( <div> <Button intent="success" text="button content"> Click Me </Button> </div> ); }
Honorable mentions for React UI kits and libraries
Below are some UI libraries that are less popular but worth mentioning.
Conclusion
In this guide, we reviewed a comprehensive list of React UI kits — everything from innovative newcomers to popular stalwarts. We also shared other React UI kits that are not quite popular but still pack a huge punch.
Now you should have the basic, foundational knowledge you need to select the right UI kit for your next React project.
For the last project i used Ant Design, and i think it is well build for sure. The Table Component really ia my life saver
You certainly missed Ant Design. https://ant.design
No Ant Design? https://ant.design/
Where is Chakra UI?
Probably not a good sign when all of rsuite’s image assets are broken and their examples are completely mobile unfriendly.
Ant Design should be top of the list.
Thanks, nice read
The first link is wrong, go to react bootstrap instead of Semantic UI. This is the url: https://react.semantic-ui.com/
Thanks for the heads up. This is fixed. Good catch!
For React I have found more than 20 different UI Libs. You can checkout here: https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries
GQ: UI libraries; Yours hit the top slot. Congrats, and thanks for this page.
Wow!! That’s good to hear.