Semantic UI React  0.83.0
GitHub CHANGELOG
Getting Started
IntroductionUsageThemingLayoutsPrototypes
Externals
DivReact Datepicker
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioRefSelectResponsiveText AreaTransitionable Portal

Usage

JavaScript

The Semantic UI React package can be installed via Yarn:

sh
Installing Semantic UI React provides the JavaScript for your components. You'll also need to include a stylesheet to provide the styling for your components. This is the typical pattern for component frameworks, such as Semantic UI or Bootstrap.

The method you choose to include the stylesheet in your project will depend on the level of customisation you require.

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:

CSS

Semantic UI support

The release 2.3 of Semantic UI introduced some backward incompatible changes, so you should use corresponding version of Semantic UI React:

  • for SUI 2.2 use 0.80.2 and below
  • for SUI 2.3 use 0.81.0 and higher

Content Delivery Network (CDN)

You can use the default Semantic UI stylesheet by including a Semantic UI CDN link in your index.html file.

This is the quickest way to get started with Semantic UI React. You won't be able to use custom themes with this method.

html

Semantic UI CSS package

The Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI.

Semantic UI CSS can be installed as a package in your project using Yarn. You won't be able to use custom themes with this method.

sh

After install, you'll need to include the minified CSS file in your index.js file:

jsx

Semantic UI package

Install the full Semantic UI package.

Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customise the style variables.

Detailed documentation on theming in Semantic UI is provided here.

sh

After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:

jsx

Bundlers

Semantic UI React is fully supported by all modern JavaScript bundlers. We made some example recipes with some of them. You can use them as start point for your projects.

Webpack 2/3

Webpack 2/3 fully supports Semantic UI React, it also supports Tree Shaking. Please ensure that you build your app in production mode before release, it will strip propTypes from your build.

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

webpack/webpack#1750
webpack/webpack#2867
webpack/webpack#2899
webpack/webpack#3092

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.

Webpack boilerplateExample configuration of pluginbabel-plugin-lodash

Webpack 4

Webpack 4 fully supports Semantic UI React, it also fully supports Tree Shaking. Please ensure that you build your app in production mode before release, it will strip propTypes from your build.

Please ensure that you're using [email protected] or higher because we added the sideEffects option in this release.