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.

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. — cdaiga
– cdaiga, Commented Nov 25, 2016 at 13:12

Arif Dewi · Accepted Answer · 2017-10-17 11:01:18Z

29

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';

answered Oct 17, 2017 at 11:01

Arif Dewi

2,28227 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

challet Over a year ago

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

justin Over a year ago

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

Arif Dewi Over a year ago

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

Wayne Phipps · Accepted Answer · 2019-01-08 22:56:06Z

6

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.

edited Jan 8, 2019 at 22:56

Wayne Phipps

2,0996 gold badges26 silver badges32 bronze badges

answered Jan 8, 2019 at 16:34

Pasindu Dineth Peiris

1843 silver badges13 bronze badges

2 Comments

challet Over a year ago

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

Flint Over a year ago

@challet from the dependency of SUIR. No need to install it twice.

Manchanayakage Shalika Prasad · Accepted Answer · 2019-05-19 12:35:23Z

2

For npm user:

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

answered May 19, 2019 at 12:35

Manchanayakage Shalika Prasad

1192 silver badges11 bronze badges

Comments

Flint · Accepted Answer · 2020-05-28 12:43:41Z

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://stackoverflow.com/a/58394828/1874016.

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.

Mbanda · Accepted Answer · 2018-12-13 11:24:09Z

-1

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)

answered Dec 13, 2018 at 11:24

Mbanda

1,02812 silver badges22 bronze badges

2 Comments

cdaiga Over a year ago

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

Rumit Patel Over a year ago

Same as Donskikh Andrej's answer.

Collectives™ on Stack Overflow

How to install and use semantic-ui-react

5 Answers 5

3 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related