Theming

Preface

Semantic UI React does not have own styling system and fully relies on the theming of Semantic UI. It's really powerful, you don't need to know LESS or CSS you can simply update values of variables or use styles from predefined themes.

In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React.

Learn more about themingCreating themes

Quick start

Semantic UI offers its own build system that uses Gulp and produces prepared CSS files. It makes sense to use it with Create React App as it does not support LESS loader.

In all other cases we recommend to use the LESS package and tune it into your build system with Webpack. The LESS package also does not depend on Gulp and other cruft things. However, this package is not friendly for Webpack and requires additional configuration.

Semantic UI LESSConfiguring Webpack

Boilerplate

The boilerplate we prepared is powered by the latest Webpack and includes the all required things for quick start like preconfigured theming and hot module reload.

The boilerplate is optimized for usage with Semantic UI React and Semantic UI LESS, it also contains examples of theming usage and custom components.

Boilerplate