Semantic UI, Make Your Website Pretty

3 min readJun 24, 2021

Semantic UI is a frontend framework that is similar to bootstrap and allows a developer to stylize your HTML components with themes. They also have a version that is friendly with React and you able to write it using JSX, a type of javascript syntax that lets you make components using html formatting.

$  yarn add semantic-ui-react semantic-ui-css
## Or NPM
$  npm install semantic-ui-react semantic-ui-css

You can use your package manager to install it onto your local directory and then use the following code at the top of your main javascript file:

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

If you don’t have a package manager, you can include semantic by using these two link and script tag in the <head> of your 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>

These next two pictures are a before and after using Semantic UI to show you how different your webpage can look:

As you can see, the second one is more aesthetically pleasing and there was no need to know css to be able to use this. The Javascript source code for this specific form can be found at https://github.com/Semantic-Org/Semantic-UI-React/blob/master/docs/src/layouts/LoginLayout.js.

Now that you’ve seen what Semantic UI is capable of, let’s learn how to write the code to have a good looking website like above. Any time you want to use a component made from Semantic UI you must import them at the top of the Javascript file of the that component you want it in.

import { Button, Form, Header, Image, Segment } from 'semantic-ui-react'

Now that you have imported what items you want to use, we can start using them and putting them where ever we want on the page. Let’s say we want a header like the one above in the form example. The syntax for that would be:

<Header as='h2' color='teal' textAlign='center'>        <Image src='/logo.png' /> Log-in to your account      </Header>

As you can see, it is similar to regular HTML except it uses formatting from Semantic UI. Also you can see that we can customize it further using different arguments and we can also nest other html, react, or semantic components within. Another way to customize the website is using subcomponents. In the form above, the box you type in is a subcomponent of the main form component. It looks like the following in code:

<Form size='large'> <Form.Input fluid icon='user' iconPosition='left' placeholder='E-mail address' /> </Form>

Now that you know some of the basics of Semantic UI, you can start using it in your current or next project. To learn more about Semantic UI and other things you can do with it, you can visit https://react.semantic-ui.com/ and read up on the documentation.

Semantic UI, Make Your Website Pretty

Written by Leonides Lemus