Getting Started with Semantic UI

Whichever way you choose to work with Semantic UI, do not forget to import jQuery too, and don't forget to add it before Semantic UI.

In most cases you'll end up using a semantic.js and a semantic.css file in your website.

There are more ways to get your hand on the ones that fulfill your needs:

Default Theme

To use Semantic UI's default theme from a precompiled resource these are your options:

• Reference the files from an online source, i.e. cdnjs.com: semantic.min.js, semantic.min.css.
• Download your copy of the Semantic UI source. (You'll get the lightweight semantic-ui-css package this way)
• Add semantic-ui-css to your node project as a dependency.
  Alternately you can add semantic-ui as a node project dependency too, in this case the precompiled resources will be in the dist folder.

Non-default Theme

To use a different theme than the default, you'll have to compile your resources yourself.

Using semantic-ui repository

Build your themed semantic-ui resources with the tools of the main repo:
(for more information and installing the prerequisites see the official guide)

1. git clone or download the Semantic-UI repo
2. run npm install
3. in your /src/theme.config file, change the 'default' theme name to the theme you want to use in the components you want to use. (you can browse the /themes folder to review the possible choices)
4. run gulp build
5. your themed compiled resources will land in the /dist folder

Using semantic-ui-less repository

Building your themed semantic-ui resources using the lightweight semantic-ui-less repo is much more complicated than one would expect.
Follow this guide to make it work: Artem Butusov Blog Webpack + Customizable Semantic UI 2.x (LESS) (I found the guide in this issue of semantic-ui-less)