Top 7 UI Libraries for React.js

Below are the top 7 UI Libraries/Frameworks that work with React.js which can be used to create your web application’s User Interfaces. Remember that the world of UI libraries/frameworks is dynamic and might evolve over time, so always check the most recent suggestions and changes in the React.js ecosystem.

1. Material-UI:

React.js is a very popular JavaScript library for building UIs and Material-UI is probably the most widely adopted UI library (based on GitHub stars) for creating modern and responsive UIs in React apps. In the following, we will take the first step into this direction and demonstrate its integration in a real React application.

Ensure you have a react and material-ui installed to your project. You can install them using npm or yarn:

npm install react react-dom @mui/material @mui/icons-material

Now, let’s create a basic React component that uses Material-UI components:

import React from 'react';
import { AppBar, Toolbar, Typography, Button, Container, Grid, Paper } from '@mui/material';

function App() {
  return (
    <div className="App">
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6">Material-UI Example</Typography>
        </Toolbar>
      </AppBar>
      <Container>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <Paper style={{ padding: '20px', textAlign: 'center' }}>
              <Typography variant="h4">Welcome to Material-UI</Typography>
              <Typography variant="body1">
                This is a simple example of using Material-UI in a React application.
              </Typography>
              <Button variant="contained" color="primary">
                Click Me
              </Button>
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </div>
  );
}

export default App;

In this example:

• We import Material-UI components such as AppBar, Toolbar, Typography, Button, Container, Grid, and Paper from the @mui/material package.

• We create a simple React component named App.

• Inside the component, we use Material-UI components to build a basic user interface. There’s an app bar with a title, a container to hold content, and a grid layout.

• Inside the grid layout, there’s a paper element that contains a title, a paragraph of text, and a button.

• The UI elements are styled using Material-UI’s built-in styling system.

• Finally, we export the App component.

This is just an example of using Material-UI with React. You can dive deep into Material-UI’s comprehensive documentation, as well as its component library to create intricate user interfaces for your React apps.

2. Tailwind CSS with React

Tailwind CSS is a popular utility-first CSS framework that allows you to rapidly and easily style web apps. It may be used in conjunction with React to create contemporary and responsive user interfaces. How to utilise Tailwind CSS in a React.js application:

1. Create a React App:

If you haven’t already, set up a new React.js project using Create React App or your preferred method.

Create React App Tutoeial

2. Install Tailwind CSS:

You can install Tailwind CSS and its dependencies using npm or yarn:

npm install tailwindcss

3. Configure Tailwind CSS:

Tailwind CSS requires configuration. You can generate a configuration file by running:

npx tailwindcss init

This will create a tailwind.config.js file in your project directory.

4. Create a CSS File:

Create a CSS file (e.g., src/index.css) where you import Tailwind CSS:

/* src/index.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

5. Import CSS in your React App:

In your src/index.js or src/index.jsx file, import the CSS file you created:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // Import your Tailwind CSS file
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

6. Use Tailwind CSS Classes in React Components:

Now you can use Tailwind CSS classes in your React components. Here’s an example:

import React from 'react';

function App() {
  return (
    <div className="bg-blue-200 p-4">
      <h1 className="text-2xl font-bold">Hello, Tailwind CSS!</h1>
      <p className="text-gray-700 mt-2">This is a React app with Tailwind CSS.</p>
      <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-4 rounded">
        Click me
      </button>
    </div>
  );
}

export default App;

In this example:

• We use Tailwind CSS classes directly in JSX elements to style them. Classes like bg-blue-200, text-2xl, mt-2, and hover:bg-blue-700 are used to style various elements.

• Tailwind CSS provides a wide range of utility classes for styling, layout, spacing, and more. You can refer to the official documentation for a comprehensive list of classes and their usage: https://tailwindcss.com/docs

• Remember to use className instead of class when applying classes in React components.

7. Start Your Development Server:

Start your development server to see your React app with Tailwind CSS in action:

npm start

Your React app should now be styled using Tailwind CSS, and you can continue building your user interface with the framework’s utility classes.

3. Ant Design:

Ant Design has become one of the most widely used design systems and component libraries for creating beautiful & reactive UIs in React projects. It provides a comprehensive list of customizable and carefully crafted UI components easy to use in your React applications. Here is an example on how to add Ant Design into a React.js app.

To get started, you’ll need to install Ant Design and some additional dependencies:

npm install antd @ant-design/icons react-scripts

Once the installation is complete, you can create a basic React component using Ant Design components. Here’s an example:

import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function App() {
  return (
    <Layout>
      <Header className="header">
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
          <Menu.Item key="1">Home</Menu.Item>
          <Menu.Item key="2">About</Menu.Item>
          <Menu.Item key="3">Contact</Menu.Item>
        </Menu>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="vertical"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
          >
            <SubMenu key="sub1" icon={<UserOutlined />} title="Submenu 1">
              <Menu.Item key="1">Option 1</Menu.Item>
              <Menu.Item key="2">Option 2</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<LaptopOutlined />} title="Submenu 2">
              <Menu.Item key="3">Option 3</Menu.Item>
              <Menu.Item key="4">Option 4</Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" icon={<NotificationOutlined />} title="Submenu 3">
              <Menu.Item key="5">Option 5</Menu.Item>
              <Menu.Item key="6">Option 6</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>About</Breadcrumb.Item>
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            Content goes here.
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default App;

In this example:

• We import various components from Ant Design, such as Layout, Menu, Breadcrumb, and icons from @ant-design/icons.

• We create a basic layout structure with a header, a sidebar, and content areas.

• Ant Design’s components and icons are used to build the header, sidebar, and breadcrumb navigation.

• You can customize the content within the Content component to suit your application’s needs.

This is one of the most basic use cases, but ant-design provides a rich set of components and styles for building highly customized UI for your react.js app. You can explore the Ant Design documentation for more details and customization options: https://ant.design/docs/react/introduce

4. Semantic UI React

Semantic UI React is the most commonly used library for creating UIs in React apps with Semantic UI Design. It offers a bundle of premium, reusable UI elements using semantic HTML rulesets. These pieces are designed to work well with React — which means they’re easy to use in your React projects!

To get started with Semantic UI React, you’ll need to install it and its peer dependencies:

npm install semantic-ui-react semantic-ui-css

Here’s an example of how to use Semantic UI React in a basic React.js application:

import React from 'react';
import { Container, Header, Button, Icon } from 'semantic-ui-react';

function App() {
  return (
    <Container text>
      <Header as="h1">Welcome to Semantic UI React</Header>
      <p>
        Semantic UI React is a set of React components that helps you build beautiful and responsive user interfaces.
      </p>
      <Button primary>
        <Icon name="thumbs up" /> Like
      </Button>
      <Button secondary>
        <Icon name="thumbs down" /> Dislike
      </Button>
    </Container>
  );
}

export default App;

In this example:

• We import Semantic UI React components such as Container, Header, Button, and Icon.

• We create a basic React component named App.

• Inside the component, we use Semantic UI React components to build a simple user interface. There’s a header, a paragraph of text, and two buttons with icons.

• Semantic UI React components come with built-in styles and behaviors, making it easy to create a polished UI.

• Finally, we export the App component.

This is just a simplistic example demonstrating the use of Semantic UI React with React.js. It includes a large set of reusable UI components which can be adjusted with several options and configurations to build sophisticated UIs with your React projects. You can explore the Semantic UI React documentation for detailed information and advanced usage: https://react.semantic-ui.com/

5. Chakra UI

Chakra UI is the most widely-used design system and component library for creating modern and accessible user interfaces in React apps. They include a suite of customizable and carefully designed UI components adhering to the principle of responsible UX and accessible design patterns. To use Chakra UI in a React.js application, you’ll need to install it and its peer dependencies:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Once you have Chakra UI installed, you can create a basic React component that utilizes Chakra UI components. Here’s an example:

import React from 'react';
import { ChakraProvider, Box, Heading, Text, Button } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <Box p={4}>
        <Heading as="h1" size="2xl">
          Welcome to Chakra UI
        </Heading>
        <Text mt={4}>
          Chakra UI is a simple, modular and accessible component library that helps you build amazing React applications.
        </Text>
        <Button colorScheme="blue" mt={4}>
          Get Started
        </Button>
      </Box>
    </ChakraProvider>
  );
}

export default App;

In this example:

• We import Chakra UI components such as ChakraProvider, Box, Heading, Text, and Button.

• We create a basic React component named App.

• Inside the component, we use Chakra UI components to build a simple user interface. There’s a heading, a paragraph of text, and a button.

• Chakra UI components come with built-in styling and accessibility features, making it easy to create visually appealing and accessible UIs.

• We wrap the entire application in the ChakraProvider component to enable the Chakra UI theme and styling.

• Finally, we export the App component.

This is a simple usage of Chakra ui in react applications. With its numerous components and high configurability, Chakra UI allows you to build more complicated and complete UI for your React apps. You can explore the Chakra UI documentation for detailed information and advanced usage: https://chakra-ui.com/docs/getting-started

6. Bootstrap with React

Bootstrap is a popular front-end framework for creating aesthetically attractive and responsive web apps. To design contemporary and responsive user interfaces, you can simply connect Bootstrap with React. Here’s how to include Bootstrap into a React.js application:

1. Create a React App:

If you haven’t already, set up a new React.js project using Create React App or your preferred method.

Create React App Tutoeial

2. Install Bootstrap:

You can install Bootstrap and its dependencies using npm or yarn:

npm install bootstrap

3. Import Bootstrap CSS:

In your src/index.js or src/index.jsx file, import the Bootstrap CSS file:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

4. Use Bootstrap Components in React:

Now you can use Bootstrap components in your React components. Here’s an example:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // Import Bootstrap CSS
import { Container, Row, Col, Button } from 'react-bootstrap';

function App() {
  return (
    <Container className="mt-4">
      <Row>
        <Col>
          <h1>Hello, Bootstrap!</h1>
          <p>This is a React app with Bootstrap styling.</p>
          <Button variant="primary">Click me</Button>
        </Col>
      </Row>
    </Container>
  );
}

export default App;

In this example:

• We import Bootstrap CSS to apply Bootstrap styles to our React components.

• We import Bootstrap components from the react-bootstrap library. The Container, Row, Col, and Button components are used here.

• We use these Bootstrap components in the JSX code to create a responsive layout with a button.

• Bootstrap components follow the same naming conventions as Bootstrap classes, but they are implemented as React components.

5. Start Your Development Server:

Start your development server to see your React app with Bootstrap in action:

npm start

Your React app should now be Bootstrap-styled, and you can continue to design your user interface using Bootstrap’s components and styles. More information on utilising Bootstrap components and classes may be found in the official Bootstrap documentation: https://getbootstrap.com/docs/4.5/components/

7. Foundation for Sites with React

Foundation for Sites is a front-end responsive framework that includes CSS and JavaScript tools for creating flexible and accessible web applications. To use Foundation for Sites with React, just incorporate it into your React project like you would any other CSS or JavaScript library. Here’s a general guide to using Foundation for Sites in a React.js app:

1. Create a React App:

If you haven’t already, set up a new React.js project using Create React App or your preferred method.

Create React App Tutoeial

2. Install Foundation for Sites:

You can install Foundation for Sites using npm or yarn. Foundation provides both the CSS and JavaScript components:

npm install foundation-sites

3. Import Foundation CSS and Initialize JavaScript:

In your src/index.js or src/index.jsx file, import the Foundation CSS and initialize the Foundation JavaScript components:

import React from 'react';
import ReactDOM from 'react-dom';
import 'foundation-sites/dist/css/foundation.min.css'; // Import Foundation CSS
import $ from 'jquery';
import 'foundation-sites'; // Import Foundation JavaScript

import App from './App';

$(document).foundation(); // Initialize Foundation JavaScript

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

In this example:

• We import the Foundation CSS file to apply Foundation styles to our React components.

• We import the jQuery library because Foundation relies on it for some of its JavaScript functionality.

• We import the Foundation JavaScript library to enable Foundation’s JavaScript components.

• We use $(document).foundation(); to initialize Foundation JavaScript.

4. Use Foundation Components in React:

Now you can use Foundation components and classes in your React components. Here’s an example:

import React from 'react';
import 'foundation-sites/dist/css/foundation.min.css'; // Import Foundation CSS
import { Grid, Cell } from 'react-foundation';

function App() {
  return (
    <Grid>
      <Cell large={12}>
        <h1>Hello, Foundation for Sites!</h1>
        <p>This is a React app with Foundation for Sites styling.</p>
      </Cell>
    </Grid>
  );
}

export default App;

In this example:

• We import Foundation CSS to apply Foundation styles to our React components.

• We use Foundation components like Grid and Cell from the react-foundation library. These components are implemented specifically for React.

• We use these components in the JSX code to create a responsive layout.

5. Start Your Development Server:

Start your development server to see your React app with Foundation for Sites in action:

npm start

Your React app should now be styled using Foundation for Sites, and you can proceed to design your user interface with Foundation’s components and styles. More information on utilising Foundation components and classes may be found in the official Foundation for Sites documentation.: https://foundation.zurb.com/sites/docs/