How to add semantic-ui’s themes to Semantic-UI-React

3 min readNov 7, 2020

By default, Semantic-UI-React installs a vanilla build of Semantic-UI, without a themes folder or any of the default themes (Material, Bootstrap, etc.) that come included in semantic-ui’s non-react-flavored version.

You’d think it would be easy to add the themes, say with an installation script similar tonpx @semantic-ui-react/bootstrap, the built-in setup module referred to on the Theming page of Semantic-UI-React.

Alas, no such magical theme-adding script yet exists. The good news is there’s a simple workaround that works like a charm.

Step 1: Create a new react app

Go to some other directory from your project and create a new react app. I named mine sem-ui-themes-pls.

Step 2: Install Fomantic-UI in the new app

Run npx i fomantic-ui and choose yes for all the defaults.

Note: Fomantic-UI is the community fork of semantic-ui. At the time of this writing, semantic-ui installation fails due to incompatibility with Node 12. In order for fomanic-ui to install properly, you’ll need the latest version of Gulp.

Step 3: From new app, copy pathname of /themes via /semantic/src

Step 4: Go to your actual project and run the following command

From inside the root directory of your actual project, run this:

cp -R path-to-themes-directory src/semantic-ui

Always do semantic experiments in their own feature branch

Step 5: Edit theme.config to your heart’s delight

Simply make the edits that you would on any other semantic-ui app.

Some call it a clusterfuck of design; I call it “art”

Step 6: Start the app

Run npm start and watch as your app comes alive… with the power of f̶r̶i̶e̶n̶d̶s̶h̶i̶p themes!

Can’t go wrong with Steve. He’s a great component.

Those are some pretty stylish dentists I must say

Note: Additional styling work was required to create certain styles that styled components doesn’t work on. I’ll be writing another article that goes into these and other issues in creating a semantic-ui react build.