Semantic UI is a UI component framework for theming websites. Semantic UI enables developers to build websites with fast and concise HTML, along with a complete mobile responsive experience. Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.
In order to use Semantic UI in a React app, we would have to make use of Semantic UI React , a React integration of the original Semantic UI library. Semantic UI React provides several prebuilt components that we can use to speed up our development process by having UI components ready to be used whilst building a React app.
The best way to get started with Semantic UI React is by running the command below:
Semantic UI React needs the general Semantic UI stylesheet to be styled properly. That can be done by installing the Semantic UI CSS package:
Then it can be imported in your React entry point file where React hooks into the DOM:
Afterward, Semantic UI can be used in your React application. The next sections will show you how to import components from Semantic UI React, how to use them, and how to arrange them.
In this tutorial, weâll explore how to use Semantic UI in a React application by building a page where people are able to login as a user. The login page will contain several top-level elements from Semantic UI. Itâs going to contain a header, a navigation bar and a form. Itâs also going to feature Semantic UI components so we get to see how the components can be utilized. A mockup of what the login form is going to look like can be seen below.
The final application can be found here: React with Semantic UI . Weâll start by creating a React app using the create-react-app utility which enables developers to easily create React apps with zero build config. If you havenât heard about it, checkout the MacOS or Windows setup guide. Otherwise, create your application with it on the command line:
Once thatâs done, run the commands from above to install Semantic UI React and CSS for your application. Donât forget to import the Semantic UI CSS in your React file where ReactDOM is used to hook into the HTML.
Next, weâll start creating the required components. Navigate into the src folder and create a Login.js file. Afterward, implement it with the following code. We will go through all the components and explain them afterward.
Now, in your App component, import the new form component and display it. Afterward you should be able to see the login form in your browser after starting the application.
We built a login form with Semantic UI in React. We started by importing some Semantic components that will be used to build the login form. Weâll highlight the components imported and discuss them.
Semantic UI Grids are structures to align layout in a design. Grid allows grouping of content into rows and columns by using the more specific Grid.Row and Grid.Column components respectively.
The output can be seen here . When using Grid, we donât necessarily need to specify the rows as Grid automatically knows how to wrap itâs content into a new row if the column width is filled. In the code block for the login form above, we created a Grid component and used just one Grid.Column component. The Grid component also allows further props like the ones below:
Semantic UI Buttons allow users to take actions, and make choices, with a single tap or click. They help communicate an action a user can take by interacting with it.
The output can be seen here . The Button component allows the following props:
The Semantic UI Header component is used to display the HTML heading tags, that is, h1 down to h6 . We can specify which of the header tags to be used by using the as props.
The output can be seen here . It accepts the following props:
The Form component is used to display a set of related user input fields in a clean and organized way. There are two ways in which you can create a form using Semantic UI. You can either write the Form components using the shorthand props API or without the shorthand props API.
The output can be seen here . In the code block above, form fields in Semantic UI are created by using Form.Field . Form.Field is a form element that contains a input and a label. However, using the shorthand method would lead to the following:
The output can be seen here . Using the shorthand method as seen above, results in a concise and less written code. The Form component also supports HTML controls for input fields.
The output can be seen here . Just like Form.Field , the Form component has other subcomponents that help to build usable and organized forms. They include, Form.Button Form.Checkbox Form.Dropdown Form.Input Form.Radio Form.Select Form.TextArea . These are all syntactic sugar for setting the controls on the Form.Field subcomponent. The Form component accepts the following props :
The Message component is used to display information that explains nearby content.
The output can be seen here . The Message component can be written in different ways. It can be written without a header as seen above or with a header just like the example below.
The output can be seen here . We can also use the Message component by passing both the header and content as props:
The output can be seen here . A full list of how the Message component can be customized and utilized can be seen here .
A segment is a Semantic UI element thatâs used to group related content. Segments can be used to display conditional content. It can be formatted to raise above the page, show it contains multiple pages, or look like a pile of images. The output can be seen here .
Modals are used to create dialogs, popovers or lightboxes that help convey some information. The use of a modal temporarily blocks interactions with the main view of a site whilst showing some content. A Semantic UI modal can be created using the Modal component as seen in the code block below.
The output can be seen here . Letâs explore some of the props that the Modal component accepts:
The full list of configs with the Modal component can be seen on the documentation here .
For the navigation menu, we have a brand logo and two menu links to the far right. To accomplish that weâll be using the Menu component. In the src folder, create a file named Menu.js and edit it with the code block below.
Then it needs to be imported in the App component and displayed above of the login form:
Letâs go over the Menu component and itâs subcomponents.
The Menu component allows us to create navigation menus and grouped navigation actions. It has sub components like Menu.Item , Menu.Header and Menu.Menu . Menu.Item is an item in a Menu and can be used to include links or a brand image. Menu.Header acts as a header. It can be written as Menu.Header or by adding the header prop to Menu.Item . Menu.Menu is used to encapsulate a menu inside another menu. Letâs explore some of the props that the Menu component accepts:
The full list of configs with the Menu component can be seen on the documentation here .
The Semantic UI Image component is how we represent and display images in Semantic UI. The syntax is very similar to the traditional HTML5 tag as it uses the src attribute to fetch the image to be displayed.
The final application can be found here: React with Semantic UI . In this article, we were introduced to Semantic UI and how it helps to style our apps and provide theming. We learned that Semantic UI enables developers to build websites with fast and concise HTML, along with a complete mobile responsive experience. We also got introduced to the React version of Semantic UI, Semantic UI React, which allows us to use Semantic UI in our React apps. Lastly, we went over some key components in Semantic UI React by building a page with a login form and a navigation menu.