Usage

Install

Semantic UI React provides React components while Semantic UI provides themes as CSS stylesheets. Install the React components and choose a theme that suits your needs.

Components

React components can be installed via yarn:

sh
Themes from Semantic UI >=2.3.x require Semantic UI React >=0.81.0.

Theme

Choose a theme and delivery method that suits your needs:

This is the quickest way to get started, just add this link to the <head> of your index.html file.

index.html

Bundling

Semantic UI React is fully supported by all modern JavaScript bundlers. We've made some example recipes with some of them. You can use these as a starting point for your project.

Semantic UI React is fully supported by Webpack 2 and 3, including tree shaking as of semantic-ui-react@0.81.2.

Please ensure that you build your app in production mode before release. Semantic UI React includes several optimizations in production mode, such as stripping `propTypes` from your build.

Examples

Known Issues

Webpack 2/3 tree shaking does not completely remove unused exports, there are numerous issues that are long-standing bugs:

Semantic UI React imports will be not optimized, so we recommend to usebabel-plugin-lodash in your builds. You can find example configuration inexamples/webpack3 directory.

Examples

For examples on how to import and use Semantic UI React components, click the code icon () next to any example. Here are a few direct links: