Getting started with react and semantic-UI

247



In this post, we will see how to add semantic-UI to a react app.

Installing semantic-UI

Run the below command to install the package.

yarn add semantic-ui-react semantic-ui-css
or
npm install semantic-ui-react semantic-ui-css

Importing the CSS

Go to index.js and import the minified CSS Bundle.

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

Using components

To use a component, import it first as below

import { Button } from 'semantic-ui-react'

Then you can use like below,

<button class="ui primary button">Primary</button>