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>
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
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
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"
}
}
And create craco.config.js
module.exports = {
plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}
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';
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;
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
Top comments (0)