Semantic UI For React (Install and getting started)

Semantic UI For React (Install and getting started)

Today i’m going to do a small tutorial about Semantic UI and how to install semantic UI to React.   Semantic UI is a UI framework build for user interface development. This UI framework has lot of elements which we can use to develop user interfaces. Most of the developers like to use Bootstrap and they don’t like experiment another framework other than it. I’m not a traditional developer how would like to stuck with the tradition. And also I like semantic UI look and feel a lot. It has flat looking UI elements which will give the user a professional and a different look.

Semantic UI Screenshot
Semantic UI Screenshot from

Using this tutorial, I’m going to teach you how to add Semantic UI to react project. Semantic UI is the main project and it is not compatible with react. ( That’s not true. Semantic UI is compatible with react. But it’s bit difficult to integrate to a react project.) Because of that they have introduced a different UI system specifically developed for react applications.

Semantic UI React

Semantic UI React project is the semantic UI version which was made specifically for Ractjs projects. This is a open source project and it has more than 8500 stars in Github. Lets see how we can add semantic UI to react applications.

Step 1

First this is first. Go to and check all the elements and get a basic idea of the framework. They have a really good documentation and responsive support. Go to elements and you can have a look at the samples and it has code samples also. Just click on “Try it” button and you can get the code also.

Step 2

Install semantic UI react using yarn or npm.

//npm users
 npm install semantic-ui-react

//yarn users
 yarn add semantic-ui-react

Step 3

Then add this import line to your index.js

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

Step 4

Now to test it out, We can use below code of a semantic UI button.

//import button to react file
import { Button } from 'semantic-ui-react'

//use it
<Button>Click Here</Button>

Now, it’s working! This is how you can add semantic UI to React app. This is really easy and this is something now to your users eyes. But semantic UI doesn’t have date picker element. But there is an third party plugin that you can use. Installation process is crystal clear and just read the documentation. If you have any issue, Please feel free to comment under this post and i will guide you. If you want to study about React, Use my react tutorial set. I  really appreciate your feedback about these tutorials and I will do my best to provide quality content like this. Thanks you for visiting my site.

Leave a Reply

Your email address will not be published. Required fields are marked *