Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Semantic UI React: How to Start and Use It Easily

Semantic UI React is a popular library that brings the power of Semantic UI, a responsive front-end framework, to React applications. It provides a set of React components that align with the Semantic UI design principles, making it easier for developers to create visually appealing and responsive user interfaces.

In this article, we will explore the basics of Semantic UI React, including its installation, key components, and how to integrate them into React applications. Whether you are a beginner looking to enhance your UI development skills or an experienced developer seeking an efficient way to build stylish and consistent user interfaces, this guide will help you get started with this library.

Watch the video below to learn about Semantic UI. If you want to learn more, I encourage continuing to read.

Let’s dive into the world of Semantic UI and unlock the potential of creating beautiful and functional React applications. For building beautiful React applications, use Purecode AI custom components that make development easy.

What is Semantic UI React?

Semantic UI React is a popular open-source UI framework that lets you build responsive, semantic user interfaces for React applications. It provides a collection of pre-built UI components with built-in accessibility and responsiveness, so you can focus on writing the logic of your application rather than spending time styling and coding basic UI elements.

Why Semantic UI React?

There are various reasons why developers of React applications choose to use Semantic UI. It is a popular option among developers due to the following important factors:

Responsive Design:

The responsive design of Semantic UI components ensures that applications are accessible and look good across various devices and screen sizes. This is crucial for providing a seamless user experience on desktops, tablets, and mobile devices.

Component-Based Development:

Component-based architecture is the foundation of this React library which fits in nicely with React’s component-based design. This allows the creation of modular and reusable user interface elements, improving the organization and maintainability of the code.

Semantic UI Design Principles:

Semantic UI is known for its clean, modern design concepts and expressive class names. Developers can adhere to these design guidelines within the React ecosystem by employing Semantic UI, resulting in visually consistent and aesthetically beautiful user interfaces.

Accessibility:

Semantic UI React prioritizes accessibility, ensuring that UI components are developed and built for people with disabilities. This accessibility promise is consistent with best practices for inclusive design.

Consistent User Experience:

The use of Semantic UI helps in the maintenance of a consistent and unified user experience across various portions of an application. This is accomplished through the Semantic UI framework’s universal styling and design conventions.

Integration with the React Ecosystem:

Semantic UI integrates smoothly with the React ecosystem. Developers may use React’s state management, lifecycle methods, and other features while still benefiting from Semantic UI’s styling and component library.

Key Features of Semantic UI React

Semantic UI enables developers to build beautiful, responsive, and accessible web interfaces for React applications quickly and easily. It does this by providing several key features:

Declarative API:

Semantic User Interface React has a declarative API, which means you only have to define the structure of your UI and the framework will handle the rendering and style. When compared to imperative approaches, this can result in cleaner, more maintainable code.

Pre-built Components:

With a wide collection of ready-made components, you may avoid writing repeated code for popular UI elements such as buttons, menus, and forms. This speeds up development and allows you to concentrate on the fundamental logic of your application.

Shorthand Props:

Quickly configure common component options using concise shorthand props, increasing development efficiency.

Augmentation and Customization:

Easily customize the look and behavior of components with props and modifiers. You can tailor specific components to your project’s unique needs.

Sub Components:

Break down complex components into smaller, reusable pieces for cleaner code and increased maintainability.

Responsive Design:

Components automatically adapt their layout to different screen sizes, giving an excellent user experience.

Semantic Markup:

Semantic Markup Uses semantic HTML elements and ARIA attributes to improve accessibility for users with disabilities and SEO.

Benefits of using Semantic UI React

Semantic UI offers a collection of pre-designed components and styles to assist developers in creating responsive and visually appealing user experiences. Here are some of Semantic UI React’s benefits:

  • Increased Development Speed:

    Pre-built components, declarative API, and shorthand props lead to faster development compared to building UI elements from scratch.

  • Improved Code Maintainability:

    Cleaner, more readable code with clear component structure and minimal custom styling facilitates easier updates and collaboration.

  • Consistent and Beautiful Design:

    Theming system ensures visual consistency while offering flexibility for customization.

  • Enhanced Accessibility:

    Semantic markup and ARIA attributes make your app usable for everyone, improving user experience and inclusivity.

  • Lightweight and Flexible:

    Choose the components you need to keep your app bundle size small and integrate seamlessly into existing projects.

Integration with React in Semantic UI React

Integrate semantic UI into a React application, it involves several processes, including installation, component import, theming, and customization. Here’s a step-by-step guide for integrating it into a React project:

Install Semantic UI React

Install Semantic UI React using a package manager like npm or yarn. Open your project’s terminal and run:

  • Using npm:

    npm install semantic-ui-react semantic-ui-css
  • Using yarn:

    yarn add semantic-ui-react semantic-ui-css

Import CSS Styles

Import Semantic UI CSS styles into your project. You can do this in your main JavaScript or entry file, which is usually index.js or App.js:

import 'semantic-ui-css/semantic.min.css';

Use Semantic UI React Components

Now, you can use Semantic components in your React components. Import the desired components at the top of your file just like it is shown in the code snippet below:

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

const app= () => {
  return (
    <Container>
      <Header as="h1">Hello, Semantic UI React!</Header>
      <Button primary>Click me</Button>
    </Container>
  );
};

export default app;

This is the output screen of the above code:

Theming and Customization:

Semantic UI allows you to customize themes to match your application’s visual identity. Create a custom theme file, import it, and apply it to your components. Refer to the Semantic UI documentation for more details on theming. To apply a custom theme, import the desired Semantic UI theme CSS file after the default Semantic UI CSS in your entry point:

import 'semantic-ui-css/semantic.min.css';
import 'path-to-your-custom-theme/semantic.min.css';

Semantic UI CSS Theme

Theming in Semantic UI lets you customize the look of components by defining your own set of colors, fonts, and styles. You can apply a custom theme to Semantic UI by either creating your own theme file or using an existing one. The following are the steps for developing and deploying a custom Semantic UI CSS theme:

Install Semantic UI:

If you have not already installed Semantic UI via npm or yarn, do so with the code below:

  • Using npm:

    npm install semantic-ui-react semantic-ui-css
  • Using yarn:

    yarn add semantic-ui-react semantic-ui-css

Create a Custom Theme:

  • Create a new file for your custom theme, for example, my-theme.config.

  • Define your theme configurations in this file. Below is an example with some customizations:

    /* my-theme.config */
    
    @import '../../semantic-ui-css/default/semantic.less';
    
    /* Colors */
    @primaryColor: #3498db;
    @secondaryColor: #2ecc71;
    
    /* Font */
    @headerFontFamily: 'Arial', sans-serif;

    You can customize various aspects of the theme, including colors, fonts, and other UI elements.

Compile the Theme:

Next, you need to compile your custom theme file into a CSS file that can be used in your project. Semantic UI provides a command-line interface for this purpose. Run the following commands in your terminal:

npx gulp install
npx gulp build

This assumes you have Node.js and npm installed. The commands download the necessary build tools and compile your custom theme.

Apply the Custom Theme:

After compiling the theme, you’ll find a semantic.css file in the semantic/dist directory. Include the following CSS file in your project to apply the custom theme:

// Import the default Semantic UI CSS
import 'semantic-ui-css/semantic.min.css';

// Import your custom theme CSS
import './path-to-your-theme/semantic.css';

Replace ‘./path-to-your-theme/’ with the full path to your built custom theme CSS file.

Use Semantic UI Components:

Now, you can use Semantic UI components in your React components, and they will be styled according to your custom theme.

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

const MyThemedComponent = () => {
  return (
    <Container>
      <Header as="h1">Themed Semantic UI React</Header>
      <Button primary>Click me</Button>
    </Container>
  );
};

export default MyThemedComponent;

By following these steps, you can create and apply a custom Semantic UI CSS theme to match the visual identity of your application. Custom theming allows you to maintain a consistent look and feel across your UI components.

Semantic UI React Components

Semantic UI React provides a rich set of pre-designed components that you can easily integrate into your React applications. These components follow the design principles of Semantic UI and can be used to build responsive and visually appealing user interfaces. Below are some commonly used Semantic UI React components:

Button Component:

The Button component in Semantic UI is versatile for creating clickable actions. It supports various styles, including primary, secondary, and basic, and can include icons or labels.

import { Button, Header } from 'semantic-ui-react';
<Header as="h1">Button Component</Header>
<Button primary>Primary Button</Button>

Header Component:

The Header component in Semantic UI is used to display header text with various sizes and styles. It is a versatile component that allows you to create headings with different levels of importance and visual hierarchy.

import { Header } from 'semantic-ui-react';

<Header as="h1">This is a Header</Header>

You can use the Header component to create headings with different levels, ranging from h1 to h6. Additionally, you can customize the appearance by specifying the prop.

Icon Component:

The Icon component in Semantic UI React is designed to display icons within your application, providing a wide variety of symbols for different purposes. Icons can enhance the visual appeal of your user interface and convey meaning concisely and recognizably. Let’s explore the features and usage of the Icon component:

import { Icon, Header } from 'semantic-ui-react';
<Header as="h1">Icon Component</Header>
<Icon name="user" />

This example displays a user icon. Semantic UI includes a comprehensive set of icons that you can use for various purposes. You can find the full list of available icons in the Semantic UI documentation.

The image below is the output of the example above:

You can also customize the size and color of the icon using the size and color props.

import { Icon, Header } from 'semantic-ui-react';
<Header as="h1">Icon Component</Header>
<Icon name="star" size="big" color="yellow" />
Semantic UI Icon Component

Image Component:

Display an image with optional styling and responsiveness.

import { Image } from 'semantic-ui-react';

<Image src="https://unsplash.com/photos/selective-focus-of-man-smiling-during-daytime-2EGNqazbAMk" size="small" />

Form Component:

The Form component provides a set of form-related elements like inputs, checkboxes, and buttons. It helps in creating structured and accessible forms.

import { Form, Input, Checkbox, Button } from 'semantic-ui-react';

<Form>
  <Form.Field>
    <label>Email</label>
    <Input type="email" placeholder="Enter your email" />
  </Form.Field>
  <Form.Field>
    <Checkbox label="I agree to the terms and conditions" />
  </Form.Field>
  <Button primary type="submit">Submit</Button>
</Form>

In this example, the form includes an email input, a checkbox for terms and conditions, and a primary submit button.

Semantic UI form

Best Practices in Using Semantic UI React

Semantic UI React is a powerful framework for building user interfaces in React applications. To make the most of it and ensure a well-structured and maintainable codebase, consider the following best practices:

Use Functional Components:

When working with Semantic UI, functional components should be preferred over class components. Functional components are simpler and more concise, especially after the introduction of React Hooks.

Utilize Semantic UI’s Theming System:

Use Semantic UI’s theming technology to customize the look and feel of your components. This involves matching colors, fonts, and other styles to your application’s design.

Modularize Components:

Break down your UI into modular components. Each component should have a single responsibility and be reusable. This promotes code reusability and makes your codebase more maintainable.

Responsive Design:

Use Semantic UI’s responsive design tools to ensure that your application looks great on all screen sizes. The framework provides responsive utility classes and components for creating adaptable layouts.

Understand Grid System:

Learn and use Semantic UI’s grid system for creating flexible and responsive layouts. The grid system is a powerful tool for organizing content and designing responsive interfaces.

Semantic HTML Elements:

Choose semantic HTML elements when using Semantic UI React components. This enhances the accessibility of your application and improves search engine optimization.

State Management:

Use state management libraries like Redux or React Context API for managing state in larger applications. This helps maintain a predictable state flow and makes it easier to manage complex state logic.

Optimize Performance:

Optimize performance by implementing shouldComponentUpdate or using `React.memo` for components that don’t need to re-render on every change. Consider using tools like React DevTools to profile and identify performance bottlenecks.

Update Dependencies Regularly:

Keep Semantic UI React and other dependencies up to date. Regularly updating your dependencies ensures that you benefit from the latest features, improvements, and security patches.

Documentation and Learning:

Refer to the official Semantic UI React documentation for comprehensive information on components and usage. Keep learning about new features and best practices to stay up-to-date with the framework.

Real Life Example: E-commerce Dashboard Project

In this section, we will build a simple E-commerce Dashboard with semantic UI React.

Creating a full-fledged E-commerce Dashboard involves multiple components and functionalities. For simplicity, I’ll guide you through building a basic product management section of an E-commerce Dashboard using Semantic UI React.

Create a New React Project:

Here, we are going to create a new React app named `e-commerce-dashboard` using the `npx create-react-app e-commerce-dashboard` command.

The `cd e-commerce-dashboard` command is to navigate to project folder in your terminal after the react app has been created

npx create-react-app e-commerce-dashboard
cd e-commerce-dashboard

Install Semantic UI React to your React application:

In this section, the code below will install the Semantic UI React components and the associated CSS styles for styling your React application.

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

Import the Semantic UI CSS file:

After you have successfully installed the semantic UI react and semantic UI CSS into your react project, import the Semantic UI CSS in your `src/index.js` file.

import 'semantic-ui-css/semantic.min.css';

How to Create a ProductList Component:

Create this file `src/components/ProductList.js`, and use this code to create a component for listing the component in the form of a table in the react application:

import React from 'react';
import { Table, Button } from 'semantic-ui-react';

const ProductList = ({ products, onDelete }) => {
  return (
    <Table celled>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>Description</Table.HeaderCell>
          <Table.HeaderCell>Price</Table.HeaderCell>
          <Table.HeaderCell>Stock</Table.HeaderCell>
          <Table.HeaderCell>Actions</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        {products.map((product) => (
          <Table.Row key={product.id}>
            <Table.Cell>{product.name}</Table.Cell>
            <Table.Cell>{product.description}</Table.Cell>
            <Table.Cell>${product.price}</Table.Cell>
            <Table.Cell>{product.stock}</Table.Cell>
            <Table.Cell>
              <Button color="red" onClick={() => onDelete(product.id)}>
                Delete
              </Button>
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table>
  );
};

export default ProductList;

Create the AddProductForm Component:

Here, we will create a component to add products to the product list table:

import React, { useState } from 'react';
import { Form, Button } from 'semantic-ui-react';

const AddProductForm = ({ onAdd }) => {
  const [product, setProduct] = useState({
    name: '',
    description: '',
    price: '',
    stock: '',
  });

  const handleChange = (e, { name, value }) => {
    setProduct({ ...product, [name]: value });
  };

  const handleSubmit = () => {
    onAdd(product);
    setProduct({ name: '', description: '', price: '', stock: '' });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group widths="equal">
        <Form.Input
          label="Name"
          name="name"
          value={product.name}
          onChange={handleChange}
          required
        />
        <Form.Input
          label="Description"
          name="description"
          value={product.description}
          onChange={handleChange}
          required
        />
        <Form.Input
          label="Price"
          name="price"
          type="number"
          value={product.price}
          onChange={handleChange}
          required
        />
        <Form.Input
          label="Stock"
          name="stock"
          type="number"
          value={product.stock}
          onChange={handleChange}
          required
        />
      </Form.Group>
      <Button type="submit" color="green">
        Add Product
      </Button>
    </Form>
  );
};

export default AddProductForm;

Create Main App Component:

This is the main App Component where all the previous components we created will be called and used:

import React, { useState } from 'react';
import { Container, Header, Segment } from 'semantic-ui-react';
import ProductList from './components/ProductList';
import AddProductForm from './components/AddProductForm';

const App = () => {
  const [products, setProducts] = useState([]);

  const handleAddProduct = (newProduct) => {
    setProducts([...products, { ...newProduct, id: Date.now() }]);
  };

  const handleDeleteProduct = (productId) => {
    const updatedProducts = products.filter((product) => product.id !== productId);
    setProducts(updatedProducts);
  };

  return (
    <Container style={{ marginTop: '2em' }}>
      <Header as="h1">E-commerce Dashboard</Header>
      <Segment>
        <Header as="h2">Product Management</Header>
        <AddProductForm onAdd={handleAddProduct} />
        <ProductList products={products} onDelete={handleDeleteProduct} />
      </Segment>
    </Container>
  );
};

export default App;

Run the Project:

npm start

In your browser, navigate to `http://localhost:3000` to view the basic E-commerce Dashboard

After you have navigated to `http://localhost:3000` in your browser, this would be your output:

Semantic UI: E-Commerce Dashboard

Final Thoughts on Semantic UI React

In conclusion, Semantic UI React is a powerful and flexible front-end framework that simplifies the process of building responsive and visually appealing user interfaces in React applications. Its collection of pre-designed components and theming system allows developers to create consistent and professional-looking UIs with ease.

For more information about Semantic UI, see the YouTube video below.

Shadrach Abba

Shadrach Abba