How to install and use semantic-ui-react

Question

I want to build a web client using react.js and semantic ui. There is a node package to use semantic-ui with react.js; semantic ui react. I have already installed this package on my computer following the instructions on react.semantic-ui.com/usage, but upon testing the with a simple webpage.

I think I have this issue because I failed to use this last instruction: import '.../semantic/dist/semantic.min.css';. The semantic folder has been generated in my project main folder, but the dist folder and the semantic.min.css have not been generated yet. Where and how should I use this?

NB: I also tried adding this <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> to my index.html page and the page was style as expected. I don't want to use this option as I cannot change the them with it.

Dilatory

I have succeeded to generate the semantic/dist/* files. I don't know yet how to import '.../semantic/dist/semantic.min.css' and where to import it. – Dilatory

semantic-ui-css is a package dependency of SUIR – Whittling

Answer 1

First - install css npm install semantic-ui-css --save
Then - import in at the index.js page (the very top level)
import 'semantic-ui-css/semantic.min.css';

Indigence

Though if you want a custom build (say a theme), you'd need to npm install semantic-ui and run the gulp build task (or add it to the CI) : semantic-ui.com/introduction/build-tools.html – Mythify

thanks. why does it have to import in the index.js page? – Ummersen

just to be included in the final bundle, and be available everywhere. – Indigence

Answer 2

First, use one of below package managers to install semantic UI react package.

For npm users:

npm install semantic-ui-react

For yarn users:

yarn add semantic-ui-react

Then add this import line to your index.js

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

That's all.

Frae

From where does come "semantic-ui-css" ? There might be missing a npm install semantic-ui-css – Mythify

@Mythify from the dependency of SUIR. No need to install it twice. – Whittling

Answer 3

For npm user:

npm i semantic-ui-react semantic-ui-css

Murillo

Answer 4

semantic-ui-css is a package dependency of Semantic-ui-react (SUIR) and is the css only distribution with a unique theme. Semantic-ui is written in Less and provides a larger and finer control (per component) over the production of the final stylesheet (dist/semantic.min.css). It delivers several themes easy to derive to create your own, and a proper picture about how to keep a big and complex css well organized and not invasive with less.

in node v12, the installation of sui-css may fail, complaining that ReferenceError: primordials is not defined. See https://mcmap.net/q/53483/-how-to-fix-quot-referenceerror-primordials-is-not-defined-quot-in-node-js.

You can also git clone https://github.com/semantic-org/semantic-ui apply the patch above in here. and yarn install

Note the default semantic.min.css size is 628Kb and you probably don't need the styling for all the components it has.

Whittling

Answer 5

npm install sematic-ui-react sematic-ui-css --save

• In your root file probably src/index.js add

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

• Some common layouts can be found [here ]:(https://semantic-ui.com/usage/layout.html)

Niveous

How is your answer any way different from @DonskikhAndrei's? – Dilatory

Same as Donskikh Andrej's answer. – Gorton