The official Semantic-UI-React integration

Last update: May 8, 2022

Semantic UI React

Gitter Circle Codecov David npm

Installation & Usage

See the Documentation for an introduction, usage information, and examples.

Built With

  • Amazon Publishing — the full-service publisher of Amazon —
  • Netflix's Edge Developer Experience team's numerous internal apps
  • Netflix's flamescope
  • Microsoft's Teams prototyping

Example Projects

This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.

Show projects


Semantic UI React implementation of react-redux Todo List.


Can I use custom Icons? Yes. Just use <Icon className='my-icon' /> instead of <Icon name='my-icon' />. See for detailed info and examples.
How do I setup CSS?

There are several options. Refer to our doc on CSS Usage.

Can I use a custom CSS theme? Yes. Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included. This allows you to load any Semantic UI CSS theme on top of your Semantic UI React app.

Here are some helpful links:

How Can I Help?

Voice Your Opinion

Help shape this library by weighing in on our RFC (request for comments) issues.


Our is a step-by-step setup and development guide.

Good First Issue

Issues labeled good first issue are a great way to ease into development on this project.

Missing Components

We're seeking component parity with Semantic UI, plus some addons. There is an issue for every missing component, labeled new component. Just comment on the issue you'd like to take.

Help Wanted Label

Any other issue labeled help wanted is ready for a PR.


  • No animation dependencies
  • Simple declarative component APIs vs brittle HTML markup
  • Complete keyboard support
  • Complete SUI component definition support
  • Completely documented
  • Completely tested
  • Accessible


Created by @levithomason and an amazing community of contributors.

Made possible only by @jlukic authoring Semantic UI.

Blazing deployments by Vercel.

  • 1. feat(Popup): add component

    Port of SUI Popup module

    Fixes #193

    • [x] sizing
    • [x] content / header
    • [x] positioning
    • [x] events
      • [x] hover
      • [x] click
      • [x] focus
    • [x] hoverable (will be fixed by #590)
    • [x] widths
      • [x] use SUI enums
    • [x] sizes
      • [x] use SUI enums
    • [x] inverted
    • [x] basic
    • [x] offset
    • [x] hideOnScroll (quick solution to scrollable sub-content like a sidebar)
    • [x] exclusive
    • [x] custom class names
    • [x] custom styles

    To be done later:

    • inline (popup as a sibling of trigger, will be implemented later)
    • transition (animation will probably be for later)
    Reviewed by debrice at 2016-09-30 01:34
  • 2. RFC: React Native?

    Maybe a little ambitious, but I am SOOOO excited to use this library!

    I also would love to use it (at least common elements) in my React Native app. Thoughts?

    Reviewed by mmahalwy at 2016-12-07 17:16
  • 3. perf(props): Remove propTypes from production build

    For details - #524

    This PR might to do:

    • [x] updates contributing guide;
    • [x] updates getUnhandledProps function;
    • [x] adds new sections for common tests.
    • [x] updates ComponentProps component in docs (we can't rely on meta anymore).

    @levithomason I've updated Rail component, waiting for review there.

    Reviewed by layershifter at 2016-10-24 17:44
  • 4. Search Component: Unknown props error

    I have a search component with a custom renderer and I keep getting the error Warning: Unknown props_id,url, ... on <div> tag. Remove these props from the element..

    The array I pass to results has these extra props, mentioned in the error, but I am using a custom renderer, so it seems to me they should be ignored.

    Here is my custom renderer

    const resultRenderer = ({ _id, name, url, logo}) => {
        return (
            <div key={_id}>
                <Label content={name}  />
    resultRenderer.propTypes = {
      name: PropTypes.string

    My component is really simple

    export default class CompanyForm extends Component {
        constructor(props) {
            this.state = {
                isLoading: false,
                value: '',
                results: [],
                company: null
        handleResultSelect(e, result) {
                company: result
        handleSearchChange(e, value) {
                value: value
                    query: {
                        name: {'$search': value }
                .then(results => {
                        isLoading: false,
                .catch(err => {
        render() {
            const {isLoading, value, results} = this.state;
            return (
                    onSearchChange={ this.handleSearchChange.bind(this)}

    The above code is what's causing the warning.

    Reviewed by imns at 2017-01-10 16:54
  • 5. feat(Tab): Add component

    Fixes #199. This PR adds the Tab component. There are a number of ways we could go with the API. I'll post an API proposal soon.

    Considering a Tab component is simply a tabular menu followed by some tab segments, I think we may create very a simple Tab API. More complicated use of Tabs could use an actual Menu and Segments with manual wiring of the click handlers and active class.

    Simple Tabs


      <Tab.Pane name='First'>
      <Tab.Pane name='Second'>
      <Tab.Pane name='Third'>

    Custom Tabs

    This type of customization requires a full definition of the Menu component (icons, right sub menu, etc). I think at this point, the user should just wire in their click handlers to render tab Segments manually. An API for doing this will make the simple use case obtuse.

    Open to suggestions on how to accomplish both with a clean and concise API.



    This component doesn't lend itself well to an array shorthand prop such as panes since the content is bound to be much more than just text. Because of this children will be used often. It is difficult and unreliable to loop/filter children to add click handlers and props for auto controlling things like the active Segment (pane). We are also avoiding React context to do so if at all possible.

    Given these points, I'm leaning toward something like the simple tabs markup shown above. Will come back to this later. Feedback is much welcomed.

    Reviewed by levithomason at 2016-08-24 06:49
  • 6. Migrating to Semantic-UI-React

    Semantic-Org maintains a collection of official integrations with various libraries. There is a missing spot for React. Per this thread, Stardust will fill this hole and become the official Semantic UI React integration.

    This issue will serve as the place to hash out all the moving parts of making the migration. As concerns and solutions are raised, I'll keep an updated list of TODOs for migration here. Once complete, we'll point everything to the new location.

    There is great mutual benefit to both TechnologyAdvice and Semantic-Org in this merge. Big thanks to @jlukic for the idea.


    This is an organic list, based on the comments in this issue:

    • [x] Transfer the repo
    • [x] Update all links to point to the new repo address
    • [x] Deprecate stardust and publish under semantic-ui-react
    • [x] Update codepen script href and global variable
    • [x] remove current semantic-ui-react owner and add TA owners
    • [x] ~~#244 Complete the migration to enzyme for testing~~
    • [x] ~~#245 Setup coverage~~
    • [x] ~~README~~
      • [x] ~~SUI branding~~
      • [x] ~~#377 Why SUI-React?
      • [x] ~~Coverage badge~~
      • [x] ~~Highlight project features & philosophy~~
        • complete component library, no html markup required
        • expressive component APIs (compare & contrast className buildup)
        • powerful and consistent prop handlers (see propUtils icon, image, etc)
        • keyboard shortcuts
        • full feature support (in progress)
      • [x] ~~#377 Show side-by-side comparisons of SUI mark up to Component APIs~~
      • [x] ~~Add TA attribution~~
    • [x] ~~semantic-ui-react npm package (
    • [x] ~~Remove deweybot staging deployments~~
    • [x] ~~Update with milestones~~
      • [x] #269 ~~Label legacy components for v1.0 upgrade high priority help wanted~~
      • [x] ~~Label missing components enhancement help wanted~~
    • [x] Doc Site
      • [x] ~~"How to write a component" (should replace / encompass
      • [x] ~~#337 Replicate SUI doc site routes~~
      • [x] ~~Include "contribute" links for missing docs~~
      • [x] ~~#395 Add TA attribution~~

    Needs Resolution

    TA Credit

    TechnologyAdvice has put a large amount of time and money into Stardust. We'd like to retain attribution through the merge. We're open to ideas on how this is accomplished. Our initial thoughts were along the lines of an unobtrusive link in the footer of the README and/or doc site.


    TA must retain admin permissions to the repo. We use Stardust in production and need full rights to the source at all times. This also applies to repo settings. We have bot users and other integrations that we'd need to maintain.

    Project Direction

    Though the project will continue to be developed as a community effort, a @TechnologyAdvice representative will continue to lead the project. Currently, that is @levithomason.

    First Steps!

    Since @jlukic has been through this a few times, love to hear your thoughts on the first steps to moving things over to Semantic-Org.

    cc @athurman @davezuko @Fluidbyte @kyleturco @stephen-ta @TomFrost @thomasruns

    Please let me know if I've overlooked anything.

    Reviewed by levithomason at 2016-05-16 22:33
  • 7. Add Step component




    A single step

    <div class="ui steps">
      <div class="step">
    // or
    const items = [
      {text: 'Shipping'}
    <Step.Group steps={items}>



    A set of steps

    <div class="ui steps">
      <div class="step">
        <i class="truck icon"></i>
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
      <div class="active step">
        <i class="payment icon"></i>
        <div class="content">
          <div class="title">Billing</div>
          <div class="description">Enter billing information</div>
      <div class="disabled step">
        <i class="info icon"></i>
        <div class="content">
          <div class="title">Confirm Order</div>
      <Step icon='truck'>
      <Step active icon='payment'>
        <Step.Description>Confirm Order</Step.Description>
      <Step disabled icon='info' title='Confirm Order' />
    // or
    const items = [
      {icon: 'truck', title: 'Shipping', description: 'Shipping'},
      {active: true, icon: 'payment', title: 'Billing', description: 'Confirm Order'},
      {disabled: true, icon: 'info', title: 'Confirm Order'},
    <Step.Group steps={items}>


    A step can show a ordered sequence of steps

    <div class="ui ordered steps">
      <div class="completed step">
        <div class="content">
          <div class="title">Shipping</div>
          <div class="description">Choose your shipping options</div>
    <Step.Group ordered>
      <Step completed>
    // or
    const items = [
      {completed: true, title: 'Billing', description: 'Confirm Order'},
    <Step.Group ordered steps={items}>


    A step can be displayed stacked vertically

    <div class="ui vertical steps">...</div>
    <Step.Group vertical>...</Step.Group>
    <Step.Group vertical steps={items}>



    A step can contain a description

    Already described


    A step can contain an icon

    Already described


    A step can link

    // Case 1
    <div class="link step"></div>
    // Case 2
    <a class="active step">...</a>
    // Case 1
    <Step link>...</Step>
    // Case 2
    <Step active href=''>...</Step>
    <Step active onClick={handler}>...</Step>



    A step can be highlighted as active

    Already described


    A step can show that a user has completed it

    Already described


    A step can show that it cannot be selected

    <div class="disabled step"></div>
    <Step disabled>...</Step>



    A step can stack vertically only on smaller screens


    A step can be displayed stacked vertically

    <div class="ui tablet stackable steps">...</div>
    <Step.Group stackable='tablet'>...</Step.Group>
    <Step.Group stackable='tablet' steps={items}>


    A fluid step takes up the width of its container

    <div class="ui fluid steps">...</div>
    <Step.Group fluid>...</Step.Group>


    Steps can be attached to other elements

    <div class="ui top attached steps">...</div>
    <Step.Group attached='top'>...</Step.Group>

    Evenly Divided

    Steps can be divided evenly inside their parent

    <div class="ui two steps"></div>

    Equal Width

    <Step.Group widths='equal'>
      <Step />
      <Step />
    <div class="ui two steps">
      <div class="step"></div>
      <div class="step"></div>

    Explicit Widths

    <Step.Group widths={2}> // or widths='two'
      <Step />
      <Step />
    <div class="ui two steps">
      <div class="step"></div>
      <div class="step"></div>


    Steps can have different sizes

    <div class="ui mini steps">...</div>
    <Step.Group size='mini'>...</Step.Group>

    Fixes #183

    Reviewed by layershifter at 2016-07-15 15:07
  • 8. RFC: remove production propTypes, allow small custom builds

    I've builded stardust with webpack in my project.

    There are two problems:

    • [x] unused components in bundle that increases bundle size;
    • [x] PropTypes are in production bundle, too.

    bundlers TODO

    • [x] #1452 test that webpack 1 removes propTypes from production build, also check SUI.js usage
    • [ ] #1497 test that webpack 2 treeshaking works
    • [ ] test that rollup works

    propTypes update

    • [x] #1216 Button
    • [x] #1159 Container
    • [x] #1159 Divider
    • [x] #1155 Flag
    • [x] #1159 Header
    • [x] #1159 Icon
    • [x] #1155 Image
    • [x] #1167 Input
    • [x] #1265 Label
    • [x] #1270 List
    • [x] #1165 Loader
    • [x] #731 Rail
    • [x] #1165 Reveal
    • [x] #1165 Segment
    • [x] #1203 Step
    • [x] #1209 Breadcrumb
    • [x] #1320 Form
    • [x] #1231 Grid
    • [x] #1264 Menu
    • [x] #1254 Message
    • [x] #1200 Table
    • [x] #1284 Card
    • [x] #1293 Comment
    • [x] #1285 Feed
    • [x] #1294 Item
    • [x] #1232 Statistic
    • [x] Accordion
    • [x] #1155 Checkbox
    • [x] Dimmer
    • [x] #1334 Dropdown
    • [x] #1217 Embed
    • [x] #1331 Modal
    • [x] #1322 Popup
    • [x] #1269 Progress
    • [x] #1253 Rating
    • [x] #1150 Search
    • [x] #1296 Sidebar
    • [x] #1282 Confirm
    • [x] #1300 Portal
    • [x] #1155 Radio
    • [x] Select
    • [x] Text Area
    Reviewed by layershifter at 2016-09-21 19:22
  • 9. feat(datetime): Add component

    This is a work in progress mainly focused on exploring the possiblity of adding a datetime component which supports date ranges, time and localisation.


    Bugs and Features

    • [ ] allow typing/pasting dates into the input field
    • [x] do not show completely disabled weeks in month view
    • [ ] Menu needs some work, buttons don't make sense in all states
    • [ ] Expose ways to customize the menu and table as well
    • [ ] Add some more props for configuring the view and doc examples
      • [ ] showWeekends
      • [ ] showDaysOfWeek
    • [ ] if at all possible, remove inline styles. required styles should be configurable.
    • [ ] move to 5 button CalendarMenu: << < Mo, Yr > >>. double chevrons change year, single change month, mo
    • [ ] don't allow selecting invalid ranges: start > end
    • [ ] use 12hr time grid with AM/PM option
    • [ ] provide onChange callbacks with (e, { value }) where value is the proposed new value.
    • [ ] Add dateSeparator prop to DateRange to control the separator string between the two dates


    • [ ] document function prop signatures
    • [x] change Week starts Sunday example to First Day Of Week show two examples, start on Sun, another on Monday.
    • [x] fix disabled days example, do not import date utils


    • [x] move component to /addons
    • [x] remove cruft propTypes that do not exist
    • [ ] sort propTypes alphabetically
    • [ ] update Month.js to use DateTimeGrid,
    • [ ] complete all code TODOs in /Datetime
    • [x] reverse onDateSelect args to match other callbacks, with event first.
    • [ ] remove unused methods in classes
    Reviewed by harel at 2017-01-27 19:26
  • 10. Popup: zIndex is not applied in v2

    Bug Report


    Originally we have a Popup inside a Modal. On hover the Popup will not show up.

    Expected Result

    Should behave as in 1.3.1.

    Actual Result

    Popup is behind the Modal.



    Testcase => Reason


    created as a popup container no longer has ANY classes, esp. not .ui.popup. Especially the z-index is not set.

    popup1 popup2

    The class is set one level below the outer div and the z-Index (1900) is no longer able to move the Popop contents above the modal.

    Reviewed by JMS-1 at 2020-10-02 18:08
  • 11. Prepare for upcoming react deprecations introduced in 16.3

    Suggestion: begin migration to new react lifecycles while retaining backwards compatibility via react-lifecycles-compat



    • Use new lifecycle methods introduced in react 16.3 in a component that renders react-semantic-ui components.

    Expected Result

    • React does not log errors/warning about upcoming deprecations to the console.

    Actual Result

    • React IS logging errors/warning about upcoming deprecations to the console.




    Reviewed by justinobney at 2018-04-22 19:50
  • 12. Max call stack exceeded when selecting disabled item in dropdown while wrapSelection is false

    Bug Report


    Create a Dropdown with the wrapSelection prop set to false add options and set disabled to true on the first or last option use the arrow keys to move to the disabled option

    Expected Result

    Expected to not have an error and stay on the option prior to the disabled option

    Actual Result

    Receive Uncaught RangeError: Maximum call stack size exceeded when press arrow key that would move on to the disabled item.




    Reviewed by ctoppel at 2022-05-10 04:54
  • 13. How to add custom svg image instead as an check box checked content

    How to add svg image to check box checked content.

    In semantic ui unicode is used to render the content inside checked check box.

    Please help to add custom tick mark image inside the checked check box.

    Reviewed by Achala237 at 2022-04-29 09:18
  • 14. Add mountNode prop to Popup module

    If a React app with SUIR is running in a hidden IFRAME and rendering some or all of its virtual DOM to the parent frame or another frame, then the Popup component should not insert popup elements into the document.body of the React IFRAME, but instead should inject into the frame containing the Popup trigger, or even into some other container as may be more appropriate (due to size or layering concerns between multiple frames).

    Adding a mountNode prop to Popup allows developers to specify the appropriate container for a displayed popup element in cases such as the above example.

    This PR implements a mountNode prop for Popup, with code very similar to the same prop's implementation in Modal.

    Reviewed by svicalifornia at 2022-04-29 07:09
  • 15. CI testing and testing with Fomantic UI

    Feature Request

    it seems there is no CI testing, this is a feature request to run all tests in GH Actions

    also, it will be great if all tests could be easily run Fomantic UI, currently, it seems Semantic UI is hardcoded

    Reviewed by mvorisek at 2022-04-12 06:40
  • 16. React 18 support

    • [ ] Allow in peerDependencies
      • [ ] to our package
      • [ ] to dependencies
        • [ ]
        • [ ]
    • [x] #4352
    • [ ] #4350
    Reviewed by layershifter at 2022-04-11 08:31
React UI is a react UI library that uses the latest design language

coming-ui React UI is a react UI library that uses the latest design language Documentation

Apr 22, 2022
A Twitter clone made for my final project in The Odin Project's React portion. This clone was made with React js and with Atomic Design as a pattern. The backend is handled by Firebase.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Feb 15, 2022
Modern and minimalist React UI library.
Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design. Quick Start run yarn add @geist-ui/react or npm i @geist-ui/react install it

May 15, 2022
🌈 A UI Design Language and React UI library
🌈  A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features ?? Enterprise-class UI designed for web

May 17, 2022
Configurable React Components with great UX
Configurable React Components with great UX

Belle Configurable React Components with great UX. Website & Documentation: Getting Started Belle is available as npm

Apr 14, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

May 16, 2022
🌲 Evergreen React UI Framework by Segment
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

May 17, 2022
🌈 React components that inspired by Microsoft's Fluent Design System.

Fluent-Windows React components that inspired by Microsoft's Fluent Design System. English | 简体中文 Installation Install the package in your project dir

Apr 22, 2022
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

May 17, 2022
A set of React UI components that supports Pinterest’s design language

Gestalt Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and

May 12, 2022
An opinionated UI components library for React. Based on Styled Components and Styled System.
An opinionated UI components library for React. Based on Styled Components and Styled System.

Insites UI Insites UI is an opinionated UI components library, powered by TypeScript, Styled Components and Styled System. It comes with source versio

Nov 26, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

May 9, 2022
React components of open-source Orbit design system by

Orbit-components is a React component library which provides developers with the easiest possible way of building’s products. Orbit Mission O

May 6, 2022
The Most Complete React UI Component Library
The Most Complete React UI Component Library

PrimeReact PrimeReact is a rich set of open source UI Components for React. See PrimeReact homepage for live showcase and documentation. Download Prim

May 16, 2022
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

May 10, 2022
Foundation as React components.
Foundation as React components.

React + Foundation Foundation as React components. Demo Components with Bit Motivation Foundation is both

May 7, 2022
Toolkit for building accessible rich web apps with React
Toolkit for building accessible rich web apps with React

Reakit Toolkit for building accessible rich web apps with React. Explore website » Sponsors By donating $100 or more you become a sponsor and help in

May 14, 2022
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. npm i rebass Getting Started import React from 'react' import { Bo

May 14, 2022
GraphQL API & React UI components for Elasticsearch. The easiest way to build a great search experience
GraphQL API & React UI components for Elasticsearch. The easiest way to build a great search experience

Search, made easy Searchkit is an open source toolkit which helps you build a great search experience with Elasticsearch. Searchkit is a Graph QL / Re

May 18, 2022