In this article you'll learn how to start using 

 in your React applications. We'll see what is available with Semantic UI and how to work with this framework in React.

 is a framework that helps to build web applications. It provides a set of components for your applications, tools to define responsive layouts, and flexible theming support. Semantic UI provides integration with React with the 

. This library provides a React implementation of components, so you don't need additional JavaScript dependencies. The 

 uses themes from Semantic UI so you can reuse CSS stylesheets and leverage Semantic UI themes.

To get started, we need to add the Semantic UI React to a project:

# add with npm
npm install semantic-ui-react
# or with yarn
yarn add semantic-ui-react

Next, we need to add a theme for the project. Semantic UI React relies on the Semantic UI themes. Here's how we can add a package with the default theme:

# add with npm
npm install semantic-ui-css
# or with yarn
yarn add semantic-ui-css

After install, we need to import the CSS file with the default theme into our project:

import "semantic-ui-css/semantic.min.css";

Now we're ready to use Semantic UI React. For example, let's define a small form with two input fields and a button:

import React from "react";
import { Button, Form, Input } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

class MyComponent extends React.Component {
  render() {
    return (
      <Form>
        <Form.Field>
          <label htmlFor="name">Name</label>
          <Input name="name" />
        </Form.Field>
        <Form.Field>
          <label htmlFor="email">Email</label>
          <Input name="email" />
        </Form.Field>
        <Button primary>Submit</Button>
      </Form>
    );
  }
}

 from the Semantic UI package. Next, we use the 

 components to render a form. Also note the import of the Semantic UI CSS file with 

import "semantic-ui-css/semantic.min.css"

Here's how to select and add any Semantic UI React component to a project.

You can get an overview of all components on the 

 site. The Semantic UI React tries to keep in sync a list of available components with the Semantic UI. For every component there is a description, demo of available options, and a description of API.

Once you've found the component you would like to use, import it to your project and use in your application. For example, here's how to use the 

import React from "react";
import { Menu } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

const items = [
  { key: "semantic", name: "Semantic UI" },
  { key: "semanticReact", name: "Semantic UI React" },
  { key: "react", name: "React" }
];

const MyComponent = () => <Menu items={items} />;

 component. After that, we use it providing a list of menu items to render.

We can use Semantic UI React to define a layout of our application. Semantic UI uses a 16 column grid and there is a 

 component that we can leverage. Here's an example showing a grid with multiple columns with different width.

import React from "react";
import { Grid, Segment } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

class MyComponent extends React.Component {
  render() {
    return (
      <Grid stackable>
        <Grid.Row>
          <Grid.Column width={1}>
            <Segment>1</Segment>
          </Grid.Column>
          <Grid.Column width={5}>
            <Segment>5</Segment>
          </Grid.Column>
          <Grid.Column width={10}>
            <Segment>10</Segment>
          </Grid.Column>
        </Grid.Row>
        <Grid.Row>
          <Grid.Column width={8}>
            <Segment>8</Segment>
          </Grid.Column>
          <Grid.Column width={8}>
            <Segment>8</Segment>
          </Grid.Column>
        </Grid.Row>
        <Grid.Row>
          <Grid.Column width={16}>
            <Segment>16</Segment>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }
}

 components to define a layout. In a grid there is a set of rows each containing columns. For columns we define the 

 property so the total width of a row sums up to 16.

 to make columns stack on top of each other after reaching mobile breakpoints. There are additional properties available that help to control the responsive behavior for a layout.

Semantic UI is a great framework that helps to build web applications. We use components provided by Semantic UI React to build a React application. With a theming support provided by Semantic UI, we can easily change the style of components.

<h1 data-node-type="titlePlaceholder">Using Semantic UI in React Applications</h1><p>In this article you'll learn how to start using <a href="https://semantic-ui.com/" rel="noopener noreferrer nofollow">Semantic UI</a> in your React applications. We'll see what is available with Semantic UI and how to work with this framework in React.</p><p><a href="https://semantic-ui.com/" rel="noopener noreferrer nofollow">Semantic UI</a> is a framework that helps to build web applications. It provides a set of components for your applications, tools to define responsive layouts, and flexible theming support. Semantic UI provides integration with React with the <a href="https://react.semantic-ui.com/" rel="noopener noreferrer nofollow">Semantic UI React</a>. This library provides a React implementation of components, so you don't need additional JavaScript dependencies. The <a href="https://react.semantic-ui.com/" rel="noopener noreferrer nofollow">Semantic UI React</a> uses themes from Semantic UI so you can reuse CSS stylesheets and leverage Semantic UI themes.</p><h2>Adding Semantic UI to project</h2><p>To get started, we need to add the Semantic UI React to a project:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-smvhy" id="cm-smvhy"># add with npm
npm install semantic-ui-react
# or with yarn
yarn add semantic-ui-react</textarea><p>Next, we need to add a theme for the project. Semantic UI React relies on the Semantic UI themes. Here's how we can add a package with the default theme:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-vqPvi" id="cm-vqPvi"># add with npm
npm install semantic-ui-css
# or with yarn
yarn add semantic-ui-css</textarea><p>After install, we need to import the CSS file with the default theme into our project:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-4X8oN" id="cm-4X8oN">import "semantic-ui-css/semantic.min.css";</textarea><p>Now we're ready to use Semantic UI React. For example, let's define a small form with two input fields and a button:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-fmzax" id="cm-fmzax">import React from "react";
import { Button, Form, Input } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

class MyComponent extends React.Component {
  render() {
    return (
      &lt;Form&gt;
        &lt;Form.Field&gt;
          &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
          &lt;Input name="name" /&gt;
        &lt;/Form.Field&gt;
        &lt;Form.Field&gt;
          &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
          &lt;Input name="email" /&gt;
        &lt;/Form.Field&gt;
        &lt;Button primary&gt;Submit&lt;/Button&gt;
      &lt;/Form&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fmk79b&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fmk79b&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fmk79b%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We start by importing <code>Form</code>, <code>Button</code>, and <code>Input</code> from the Semantic UI package. Next, we use the <code>Form</code>, <code>Form.Field</code>, <code>Input</code>, and <code>Button</code> components to render a form. Also note the import of the Semantic UI CSS file with <code>import "semantic-ui-css/semantic.min.css"</code>.</p><h2>Using Semantic UI components</h2><p>Here's how to select and add any Semantic UI React component to a project.</p><p>You can get an overview of all components on the <a href="https://react.semantic-ui.com/elements/button/" rel="noopener noreferrer nofollow">Semantic UI React</a> site. The Semantic UI React tries to keep in sync a list of available components with the Semantic UI. For every component there is a description, demo of available options, and a description of API.</p><p>Once you've found the component you would like to use, import it to your project and use in your application. For example, here's how to use the <a href="https://react.semantic-ui.com/collections/menu/" rel="noopener noreferrer nofollow">Menu</a> component:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-JTFqp" id="cm-JTFqp">import React from "react";
import { Menu } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

const items = [
  { key: "semantic", name: "Semantic UI" },
  { key: "semanticReact", name: "Semantic UI React" },
  { key: "react", name: "React" }
];

const MyComponent = () =&gt; &lt;Menu items={items} /&gt;;</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fs2xd1&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fs2xd1&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fs2xd1%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We import the <code>Menu</code> component. After that, we use it providing a list of menu items to render.</p><h2>Defining layout with Semantic UI</h2><p>We can use Semantic UI React to define a layout of our application. Semantic UI uses a 16 column grid and there is a <code>Grid</code> component that we can leverage. Here's an example showing a grid with multiple columns with different width.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-UIhWC" id="cm-UIhWC">import React from "react";
import { Grid, Segment } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

class MyComponent extends React.Component {
  render() {
    return (
      &lt;Grid stackable&gt;
        &lt;Grid.Row&gt;
          &lt;Grid.Column width={1}&gt;
            &lt;Segment&gt;1&lt;/Segment&gt;
          &lt;/Grid.Column&gt;
          &lt;Grid.Column width={5}&gt;
            &lt;Segment&gt;5&lt;/Segment&gt;
          &lt;/Grid.Column&gt;
          &lt;Grid.Column width={10}&gt;
            &lt;Segment&gt;10&lt;/Segment&gt;
          &lt;/Grid.Column&gt;
        &lt;/Grid.Row&gt;
        &lt;Grid.Row&gt;
          &lt;Grid.Column width={8}&gt;
            &lt;Segment&gt;8&lt;/Segment&gt;
          &lt;/Grid.Column&gt;
          &lt;Grid.Column width={8}&gt;
            &lt;Segment&gt;8&lt;/Segment&gt;
          &lt;/Grid.Column&gt;
        &lt;/Grid.Row&gt;
        &lt;Grid.Row&gt;
          &lt;Grid.Column width={16}&gt;
            &lt;Segment&gt;16&lt;/Segment&gt;
          &lt;/Grid.Column&gt;
        &lt;/Grid.Row&gt;
      &lt;/Grid&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Frvb9d&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Frvb9d&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Frvb9d%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We import and use <code>Grid</code>, <code>Grid.Row</code>, and <code>Grid.Column</code> components to define a layout. In a grid there is a set of rows each containing columns. For columns we define the <code>width</code> property so the total width of a row sums up to 16.</p><p>Additionally, we can specify the <code>stackable</code> property for the Grid like this <code>&lt;Grid stackable&gt;</code> to make columns stack on top of each other after reaching mobile breakpoints. There are additional properties available that help to control the responsive behavior for a layout.</p><h2>Summary</h2><p>Semantic UI is a great framework that helps to build web applications. We use components provided by Semantic UI React to build a React application. With a theming support provided by Semantic UI, we can easily change the style of components.</p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Using Semantic UI in React Applications

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript