Semantic UI React 3.0.0-beta.0Get 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.
Option 1: Package Manager
React components can be installed via yarn or npm:
After install, import the minified CSS file in your app's entry file:
The Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI.
If you are using TypeScript, you don't need to install anything, typings are included with the package.
Option 2: CDN (no bundler)
This is the quickest way to get started however we still recommend to use Create React App, Next.js or other preconfigured tooling.
Follow React's guide to prepare your enrivonment: Add React in One Minute.
And then just add this link and script tag to the <body> after initializing React in your index.html file.
Custom themes
Detailed documentation on Semantic UI theming is provided in our Theming guide.
Supported Bundling Options
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/5
Semantic UI React is fully supported by Webpack 4/5. 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:
Vercel.