{"id":11994,"library":"semantic-ui-react","title":"Semantic UI React","description":"Semantic UI React is the official React integration for the Semantic UI framework, providing a comprehensive collection of UI components designed to deliver consistent and aesthetically pleasing user interfaces. The current stable version is 2.1.5, with active development on a v3.0.0 beta branch, indicating ongoing maintenance and future feature enhancements. The library distinguishes itself through its declarative API, allowing developers to construct complex UIs with concise JSX. It heavily leverages 'shorthand props,' enabling a more compact and readable component tree by accepting primitive values or objects to render sub-components, which is a key differentiator. It also ships with first-class TypeScript support, offering robust type definitions for all its components and props, making it highly compatible with modern typed React workflows. While it requires the Semantic UI CSS toolkit for styling, it provides the React component logic, facilitating rapid development of visually consistent web applications. The release cadence for stable versions is moderate, with more frequent bug fixes and beta updates for the next major version. This package is an excellent choice for projects seeking a complete, opinionated UI toolkit with a strong emphasis on consistent design and developer experience within the React ecosystem.","status":"active","version":"2.1.5","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/Semantic-Org/Semantic-UI-React","tags":["javascript","typescript"],"install":[{"cmd":"npm install semantic-ui-react","lang":"bash","label":"npm"},{"cmd":"yarn add semantic-ui-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add semantic-ui-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for building user interfaces with React components.","package":"react","optional":false},{"reason":"Provides DOM-specific methods for React, required for rendering components to the browser.","package":"react-dom","optional":false}],"imports":[{"note":"Semantic UI React is primarily designed for ES module imports. CommonJS `require` is discouraged in modern React projects.","wrong":"const Button = require('semantic-ui-react').Button;","symbol":"Button","correct":"import { Button } from 'semantic-ui-react';"},{"note":"Commonly imported components are named exports. Destructuring allows importing multiple components efficiently.","symbol":"Form","correct":"import { Form, Input, TextArea, Button } from 'semantic-ui-react';"},{"note":"Type imports are crucial for TypeScript projects using Semantic UI React's shorthand prop patterns.","symbol":"SemanticShorthandItem","correct":"import type { SemanticShorthandItem } from 'semantic-ui-react';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Button, Form, Segment, Grid, Message } from 'semantic-ui-react';\nimport 'semantic-ui-css/semantic.min.css'; // Don't forget to include Semantic UI CSS!\n\nfunction App() {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n\n  const handleSubmit = () => {\n    setSubmitted(true);\n    console.log({ name, email });\n    // In a real app, you would send this data to a server\n  };\n\n  return (\n    <Grid centered columns={2} style={{ marginTop: '5em' }}>\n      <Grid.Column>\n        <Segment>\n          <Message\n            attached\n            header='Welcome to our site!'\n            content='Fill out the form below to sign-up for a new account'\n          />\n          <Form className='attached fluid segment' onSubmit={handleSubmit}>\n            <Form.Input\n              label='Name'\n              placeholder='First Name'\n              value={name}\n              onChange={(e) => setName(e.target.value)}\n              required\n            />\n            <Form.Input\n              label='Email'\n              placeholder='example@domain.com'\n              type='email'\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n              required\n            />\n            <Button primary type='submit'>Submit</Button>\n          </Form>\n          {submitted && (\n            <Message success>\n              <Message.Header>Form Submitted</Message.Header>\n              <p>Name: {name}, Email: {email}</p>\n            </Message>\n          )}\n        </Segment>\n      </Grid.Column>\n    </Grid>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates a basic React form using Semantic UI React components, including input fields, a button, and messages. It shows state management with React hooks and how to include the necessary Semantic UI CSS stylesheet for proper styling."},"warnings":[{"fix":"Migrate usage from `<Ref innerRef={ref}>` to `ref={ref}` directly on the Semantic UI React component. Consult the v3 migration guide for details.","message":"The `Ref` component was removed in v3.0.0-beta.0. All components now support native React ref forwarding directly. Components that previously relied on `Ref` will need to be updated.","severity":"breaking","affected_versions":">=3.0.0-beta.0"},{"fix":"Add `import 'semantic-ui-css/semantic.min.css';` to your application's entry file (e.g., `index.js` or `App.js`) or include it via a CDN in your HTML.","message":"Semantic UI React provides only the component logic and markup. It does not include the styling itself. You MUST include the Semantic UI CSS toolkit in your project, typically by importing `semantic-ui-css/semantic.min.css`.","severity":"gotcha","affected_versions":">=0.x"},{"fix":"Ensure your project uses TypeScript 4.8 or newer and `@types/react` version 18 for full type compatibility. Upgrade your TypeScript and React types if issues arise.","message":"Type definitions have been updated in v2.1.3 and v2.1.4 to improve compatibility with TypeScript 4.8+ and `@types/react@18`. Older TypeScript versions or `@types/react` might encounter type errors.","severity":"breaking","affected_versions":">=2.1.3"},{"fix":"Verify that your custom Semantic UI CSS build includes all necessary components. For full compatibility, consider using the official `semantic-ui-css` package or carefully managing your custom theme builds.","message":"Semantic UI React components rely on specific CSS classes for styling. If you're using a custom build of Semantic UI CSS or a theming solution, ensure that all required classes are present, otherwise, components may appear unstyled or broken.","severity":"gotcha","affected_versions":">=0.x"},{"fix":"Update any legacy code that might refer to `React.PropTypes` (long removed from React) to modern alternatives like TypeScript or external prop-types library.","message":"Earlier versions might have included direct references to `React.PropTypes`. While no longer used, ensure your project's ESLint rules or build processes don't incorrectly flag these as deprecated issues if referencing older code examples.","severity":"deprecated","affected_versions":"<1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install semantic-ui-react` or `yarn add semantic-ui-react` to add the package to your project dependencies.","cause":"The `semantic-ui-react` package has not been installed or is not correctly linked in your project.","error":"Module not found: Can't resolve 'semantic-ui-react'"},{"fix":"Verify that all Semantic UI React components are correctly imported as named exports. Ensure your `react` and `react-dom` peer dependencies match the library's requirements. For class components, bind event handlers correctly.","cause":"This often occurs when trying to use a component that is not correctly imported or when `this` context is lost in class components. Could also be a mismatch in React versions or a build configuration issue.","error":"TypeError: Cannot read properties of undefined (reading 'call') at Object.createReactClass.displayName [as render]"},{"fix":"Ensure you are using named imports for Semantic UI React components, e.g., `import { Button } from 'semantic-ui-react';`. Avoid default imports unless explicitly specified by the library for a particular component.","cause":"This error typically indicates that you are trying to render something that React doesn't recognize as a valid component. This could be due to a wrong import (e.g., `import * as SUI from 'semantic-ui-react'` and then trying to use `<SUI.Button>` without explicit named exports, or a default import where a named import is expected).","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Review the component's documentation for required props. Ensure all mandatory props are passed and have valid values. For example, a `Message` component might expect `header` or `content`.","cause":"Semantic UI React components often have strict prop types. This warning indicates a required prop (like `children` or another specific prop) was not provided or was `undefined`.","error":"Warning: Failed prop type: The prop `children` is marked as required in `YourComponent`, but its value is `undefined`."}],"ecosystem":"npm"}