Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagIconHeaderImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Get Started

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:

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

If you are using TypeScript, you don't need to install anything; typings are included with the package.

Theme

Choose a theme and delivery method that suits your needs:

Default theme (CDN)Default theme (NPM)Custom theme (NPM)

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

Bundling

Semantic UI React is fully supported by all modern JavaScript bundlers.

Create React App

Semantic UI React is fully compatible with create-react-app and works out the box. Setting up of custom theme is covered in Theming guide.

Webpack 4

Semantic UI React is fully supported by Webpack 4, 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

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:

Composition
Next page