DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

Semantic UI React Intro

A similar front-end development framework to bootstrap, Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It features pre-built components for creating responsive layouts with user-friendly HTML, JavaScript, and simplified debugging. Besides React it integrates with a number of other frameworks like Angular, Meteor, Ember among others, and organizes UI layers with the app logic.

Installation

As shown on the official site there are two ways to install Semantic UI.

Option 1: With Package Manager:

npm install semantic-ui-react semantic-ui-css

Then import the minified CSS file in your app's entry file:

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

Option 2: CDN (no bundler)

Add the link and script tag to the head of your index.html file:

<link
  async
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css"
/>
<script
  async
  src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"
></script>
Enter fullscreen mode Exit fullscreen mode

Examples of Features

Buttons

There are a wide variety of button types that you can see on the official documentation. Some examples below:

Standard Button:

import React from 'react'
import { Button } from 'semantic-ui-react'

const ButtonExampleButton = () => <Button>Click Here</Button>

export default ButtonExampleButton
Enter fullscreen mode Exit fullscreen mode

Animated Button:

import React from 'react'
import { Button, Icon } from 'semantic-ui-react'

const ButtonExampleAnimated = () => (
  <div>
    <Button animated>
      <Button.Content visible>Next</Button.Content>
      <Button.Content hidden>
        <Icon name='arrow right' />
      </Button.Content>
    </Button>
    <Button animated='vertical'>
      <Button.Content hidden>Shop</Button.Content>
      <Button.Content visible>
        <Icon name='shop' />
      </Button.Content>
    </Button>
    <Button animated='fade'>
      <Button.Content visible>Sign-up for a Pro account</Button.Content>
      <Button.Content hidden>$12.99 a month</Button.Content>
    </Button>
  </div>
)

export default ButtonExampleAnimated
Enter fullscreen mode Exit fullscreen mode

Themes

Another feature of Semantic UI is custom themes. Semantic UI React does not have its own styling system and fully relies on the theming of Semantic UI.

First you would need to remove existing references for semantic-ui & semantic-ui-css package or styles included from CDN to avoid styles duplication.

npm uninstall semantic-ui semantic-ui-css

Then install the required dependencies of for example @craco/craco:

npm install @craco/craco @semantic-ui-react/craco-less semantic-ui-less --save-dev

After that, update your package.json:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }
}
Enter fullscreen mode Exit fullscreen mode

And create craco.config.js

module.exports = {
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}
Enter fullscreen mode Exit fullscreen mode

There is a tool CLI tool that will copy necessary files with the skeleton of your customization.

npx @semantic-ui-react/bootstrap

Edit the semantic-ui/theme.config with:

/*******************************
            Folders
*******************************/

@themesFolder : 'themes';
@siteFolder  : '../../src/semantic-ui/site';

@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : '../../../themes/@{theme}/assets/fonts';
Enter fullscreen mode Exit fullscreen mode

Finally, import the semantic.less file in index.js

import 'semantic-ui-less/semantic.less'

Now it is possible to add color or background for example by editing the src/semantic-ui/site/globals/site.variables file:

@primaryColor: #002f4e;
@pageBackground: #eff0f1;
Enter fullscreen mode Exit fullscreen mode

This is just a brief intro to Semantic UI React and what you can do with it. On the official site, you can look at how to utilize it to make cards, lists, modals among other things.

References

Discussion (0)