Semantic-UI with React

…not too shabby!

When I started my Flatiron Mod 4 React/Rails project, my project partner Fnu Tsering Norbu suggested we use the Semantic UI framework for design.

Having never used it before, I was a bit hesitant…but Tsering had played around a bit with Semantic and felt like it would be a good choice. It was, and I’m glad I now have another CSS/UI framework under my belt.

Getting started with Semantic UI in a React app is super simple:

To jump right in, you just need to add the following link to the <head> of your index.html file:

<link rel="stylesheet" href="//" />

This is already enough to get started with using the many Semantic UI templates and elements at, as long as you take into account small changes for incorporating them right into JSX…like changing the ‘class’ attributes to ‘className’, and making sure to close tags like<img/>.

Make sure to account for the fact that you’re writing JSX- not HTML!

You may find this is more than enough for you to get started. However, if you want to get real React-specific, use components!

In your React front-end directory, run a simple:

npm i semantic-ui-react

Now you can use Semantic UI React components 🙌 !

✵ Make sure you import components you’re using from ‘semantic-ui-react’ on the top of your file!

Example usage of a Button Component

This is a super simple intro to using Semantic UI in React apps, but I hope this article showed you how simple it can be to incorporate it for effortless user-friendly design 😁.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store