Semantic UI React

Semantic UI React components only handle props defined in their propTypes. Any other props (unhandled props) are automatically passed down to the element or component specified in the as prop. This allows you to use standard HTML attributes (like type, id, aria-*) or props from third-party libraries (like react-router's to) on Semantic UI React components.

// Passing a standard HTML attribute through to the underlying <button>
<Button type='submit' />

// Passing a third-party prop (to) through to a React Router Link
import { Link } from 'react-router-dom'
import { Button } from 'semantic-ui-react'

<Button as={Link} to='/home'>
  To homepage
</Button>

Semantic UI React components use "shorthands" to simplify the declaration of sub-elements. A shorthand prop (like icon on a Button) acts as a recipe that is eventually evaluated into a React Element. You can provide various types of values—strings, objects, or React elements—to customize how these sub-elements are rendered.

import { Button } from 'semantic-ui-react'

// Basic shorthand usage
<Button icon='like' />

Semantic UI React is compatible with modern JavaScript bundlers:

• Create React App: Works out of the box.
• Webpack 4/5: Fully supported. It is recommended to build your app in production mode before release to benefit from optimizations like stripping propTypes from the build.

Semantic UI React components support an as prop that allows you to change the underlying HTML element or React component being rendered. This enables component composition without adding extra nesting in your DOM tree. Every component has a default value for the as prop (usually the semantic HTML equivalent), but you can override it with any valid HTML tag or React component.

{/* Default behavior: outputs <button class='ui button' /> */}
<Button />

{/* Overridden behavior: outputs <a class='ui button' /> */}
<Button as='a' />

The Responsive component was removed in v2 because it lacked proper Server Side Rendering (SSR) support and a direct connection to breakpoints. To achieve responsive behavior that works with SSR (e.g., in Next.js or Gatsby), use @artsy/fresnel.

import { createMedia } from "@artsy/fresnel";
import React from "react";
import { Segment } from "semantic-ui-react";

const AppMedia = createMedia({
  breakpoints: {
    mobile: 320,
    tablet: 768,
    computer: 992,
    largeScreen: 1200,
    widescreen: 1920
  }
});
const mediaStyles = AppMedia.createMediaStyle();
const { Media, MediaContextProvider } = AppMedia;

const App = () => (
  <>
    <style>{mediaStyles}</style>
    <MediaContextProvider>
      <Segment as={Media} at="mobile">
        Mobile
      </Segment>
    </MediaContextProvider>
  </>
);

If you prefer not to use the @semantic-ui-react/bootstrap CLI tool, you can manually scaffold your customization by copying files from node_modules to your src directory:

1. Copy the entire node_modules/semantic-ui-less/_site folder to src/semantic-ui/site.
2. Copy node_modules/semantic-ui-less/theme.config.example to src/semantic-ui/theme.config.

The Visibility component has been removed in v3 to improve performance. It is recommended to use the native Intersection Observer API directly or use a React wrapper like react-intersection-observer.

For a smoother transition, you can use the @semantic-ui-react/component-visibility package, but it is considered deprecated and is not actively maintained.

-import { Visibility } from "semantic-ui-react";
+import Visibility from "@semantic-ui-react/component-visibility";

The Ref component has been removed in v3 because native ref support makes it obsolete. To upgrade, replace the <Ref> wrapper with the ref prop directly on the target component.

If you need a temporary bridge during migration, you can use the @semantic-ui-react/component-ref package, but note that this package is deprecated and will not receive updates for React API changes.

function App() {
-  return (
-    <Ref innerRef={buttonRef}>
-      <Button />
-    </Ref>
-  )
+  return <Button ref={buttonRef} />
}

-import { Ref } from "semantic-ui-react";
+import Ref from "@semantic-ui-react/component-ref";