![semantic-ui.png](https://blog.radicalloop.com/uploads/semantic_ui_ed3bf7ee32.png)

[Semantic UI](https://semantic-ui.com/introduction/getting-started.html) is a front-end development framework that is used to create beautiful, responsive layouts using easy-looking HTML.

Recently in one of our clients’ projects, we required to use Semantic UI + LESS with React. I will try to describe here what we did.

Let’s create a React project first.

    npm create react-app my-app
    cd my-app
    npm start

Now let’s add Semantic UI with **.less** files.

First, add **gulp**.

    npm install -g gulp

Install Semantic UI with npm

    npm install semantic-ui --save-dev

It will ask which components you want to install. Check below screen.

![](https://radicalloop.com/storage/blogs/0092fed0-ab38-4f5b-b7a1-0d881b947b08-1_SQ7lw-1AhUGFXp5gmH6vPA.png)

Choose first option “Automatic (Use default locations and all components)”

Now it will ask below question.

![](https://radicalloop.com/storage/blogs/9fd3f101-9462-4f23-b261-369980275822-1_WqDXltH-MmvkIc_yj5XnAA.png)

Choose “No, let me specify” and as soon as you do, it will prompt for an absolute path. **Specify the path to your react project “src/” folder.** Check below screen.

![](https://radicalloop.com/storage/blogs/75895816-ae53-4c37-8f68-9516dda061b0-1_pnq0CSstebgb98mWQ3hFmQ.png)

And Next **“Where should we put Semantic UI inside your project? (semantic/)”.** Okay, that is fine, so just press “Enter” and go ahead.

This will install semantic in your React **“/src”** folder. You will see the progress like below.

![](https://radicalloop.com/storage/blogs/17a31163-f579-40d1-a20a-f8d277891328-1_tkjq6AeUnuOF1X_GMFe9Ow.png)


Okay, now as we need to integrate Semantic UI with React, we have used the same package.json as we are using for React as dev dependency. At this point, you should see the structure like below.

![](https://radicalloop.com/storage/blogs/7ddd126f-6694-4d83-906b-424bb819252d-1_c9RGQZJQs_FzV6qqHHXVbA.png)

Move **“semantic.json”** from **“/src”** to parent directory and change:


    “base”: “semantic/”

to

    “base”: “src/semantic/”

So you should have file structure like below:

![](https://radicalloop.com/storage/blogs/76954715-e3f6-4d0d-a4be-575dee44fcdf-1_wmTBuItgaoR4BVNH4lVBEg.png)

Okay, we are almost done!! Now, go to `src/semantic/` directory and `gulp` it.

    cd src/semantic
    gulp build

It should generate **“dist/”** directory with compiled css. Now, include that compiled `semantic.min.css` file in your React project `index.js`

    import “./semantic/dist/semantic.min.css”;

Cool! Now you can go ahead and develop your Semantic UI theme in **“src/semantic”** with **gulp** and compiled css file automatically included in your **React project**.

**Tip:** You can also use [Semantic UI for React](https://react.semantic-ui.com/) (jQuery Free). Just include/install with npm and you can use the power of React Semantic UI too.

Any questions, suggestions or feedback? Please comment!

Follow **RadicalLoop** on [Twitter](https://twitter.com/radicalloop), [Facebook](https://www.facebook.com/radicalloop/). ?

medium_semantic-ui.png

small_semantic-ui.png

thumbnail_semantic-ui.png

semantic-ui.png

Using Semantic UI + LESS + Gulp with React

Using Semantic UI + LESS + Gulp with React

Radicalloop