Skip to content
Get packs

Guide · Open source

How to use Semantic-UI-React: setup, components and FAQs

Updated · written with AI from the project's own documentation and checked against our catalogue data

Semantic-UI-React is the official React integration for Semantic UI, a CSS-based design system. It gives you ready-made React components such as buttons, forms and menus that output standard Semantic UI HTML, so you can build interfaces without writing that markup by hand. This guide explains what the library includes, how to set it up with a Semantic UI theme, and where its limits are so you can decide whether it fits your project.

Semantic UI ReactSemantic-Org/Semantic-UI-React · ★ 13.2k · MIT

Quick start

  1. 1Check the prerequisites. Make sure Node.js and npm or yarn are installed before you start.
  2. 2Get the library. Install the semantic-ui-react package with your package manager, or clone the repository as the README shows.
  3. 3Read the documentation. Open react.semantic-ui.com for the introduction, usage details and install steps.
  4. 4Load a Semantic UI theme. Add a Semantic UI CSS theme, since the library ships no CSS, using one of the approaches in the CSS Usage docs.
  5. 5Build with components. Use the React components such as buttons, forms and menus in your interface.
  6. 6Customise icons if needed. Pass className to Icon to apply your own icon class instead of a built-in name.

What Semantic-UI-React includes

Semantic UI React provides React components that render valid Semantic UI HTML. The library itself contains no CSS, so styling comes from a Semantic UI theme that you load separately.

The project's stated principles include simple declarative component APIs, complete keyboard support, accessibility, and no animation dependencies.

  • Components follow Semantic UI's design, so the visual style is Semantic UI's.
  • Components are declarative React APIs rather than hand-written HTML markup.
  • The README lists keyboard support and accessibility as project goals.

Install Semantic-UI-React with a package manager

The project is published on npm as semantic-ui-react. The prerequisites named in the source are Node.js and npm or yarn. The README's install-related instruction is to clone the repository, and it otherwise points to the external documentation for installation and usage.

Check the documentation at react.semantic-ui.com for the current install steps before you start.

  • Prerequisites: Node.js, plus npm or yarn.
  • The npm package name is semantic-ui-react.
  • The latest release listed in the source is a beta (v3.0.0-beta.2), so pin your version deliberately.
git clone https://github.com/Semantic-Org/Semantic-UI-React

Load a Semantic UI theme for styling

Because the components include no CSS, your page needs a Semantic UI theme. The README says you can load any Semantic UI CSS theme on top of your app, which also lets you swap themes later.

The README points to several approaches for setting up CSS: building CSS with Webpack, building CSS with Meteor, and creating a standalone theme. Pick the one that matches your build setup.

  • Use the CSS Usage section of the documentation to choose a setup.
  • Building CSS with Webpack is covered by a linked guide on Medium.
  • Creating a standalone theme is covered by a linked guide at learnsemantic.com.

Use custom icons

The FAQ says you can use custom icons. Instead of passing a name to the Icon component, pass a className so your own icon class is applied.

The source gives this pattern for a custom icon, with a link to a GitHub issue for detailed examples.

<Icon className='my-icon' />

Find examples and get help

The README lists an example project, semantic-ui-react-todos, which is a Semantic UI React version of a react-redux Todo List. The main documentation at react.semantic-ui.com holds the introduction, usage information and examples.

The README says the project has contribution guides, a CHANGELOG, and labelled issues for newcomers. Its CONTRIBUTING.md is described as a step-by-step setup and development guide.

  • Documentation: https://react.semantic-ui.com
  • Example: semantic-ui-react-todos on GitHub
  • Contribution guide: CONTRIBUTING.md in the repository

What people use it for

  • Building an internal business app that needs a consistent set of components, as the best-for list suggests.
  • Prototyping a React interface quickly with Semantic UI styling.
  • Swapping between different Semantic UI themes on the same React app.
  • Building a React front end where you want keyboard support and accessibility built into the components.

Frequently asked questions

Is Semantic-UI-React free to use?

Yes. The source lists the licence as MIT. Check the LICENSE file in the repository for the full terms.

Does Semantic-UI-React include CSS?

No. The README says the library includes no CSS, so you load a Semantic UI theme separately. This lets you use any Semantic UI CSS theme on top of your app.

What do I need to install Semantic-UI-React?

The source names Node.js and npm or yarn as prerequisites. The package is published on npm as semantic-ui-react.

Is Semantic-UI-React stable enough for production?

The latest release listed in the source is a beta, v3.0.0-beta.2. If you need a fully stable release, check the release list before you commit.

How does Semantic-UI-React compare to Material UI or React Bootstrap?

The source names Material UI, React Bootstrap, Ant Design and Chakra UI as comparable projects. Semantic-UI-React follows Semantic UI's design, so pick it if you want that look. Pick another library if you need a different visual style.

Can I use custom icons with Semantic-UI-React?

Yes. Use Icon with a className, such as className='my-icon', instead of a name prop. The FAQ links to a GitHub issue with more examples.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Semantic-UI-React suits React developers who already use Semantic UI or want its styling, especially teams building internal apps who value consistent components and keyboard support. Pick a different library if you need a non-Semantic-UI visual style or a fully stable release, and expect to rely on the external documentation for detail.

Install options & downloads