Skip to content
Get packs

Guide · Open source

How to use Semantic UI: install, theme and build pages

Updated · written with AI from the project's own documentation and checked against our catalogue data

Semantic UI is a front-end framework that provides ready-made interface pieces such as buttons, menus, grids, dropdowns and popups, styled with CSS. This guide shows you how to install it with npm, choose between the full framework and the CSS-only package, and understand how theming works. By the end you will know where to start and what to check before using it in a project.

Semantic UISemantic-Org/Semantic-UI · ★ 51k · MIT

Quick start

  1. 1Check prerequisites. Install Node.js and npm. The README says Semantic UI is compatible with Node 18.
  2. 2Install the package. Run npm install semantic-ui for the full framework, or npm install semantic-ui-css for CSS only.
  3. 3Run the setup. Use the interactive installer mentioned in the README to help set up your project.
  4. 4Include the styles and components. Add the Semantic UI CSS and use its HTML classes for buttons, menus, grids and other components.
  5. 5Read the theming guide. Review the official theming guide before overriding CSS variables so your changes stay organized.
  6. 6Test in your target browsers. Confirm grids and flexbox layouts render correctly in every browser you need to support.

What Semantic UI is and who it suits

Semantic UI is designed for theming. Its README lists more than 50 UI elements, over 3000 CSS variables, and three levels of variable inheritance. The framework is built with EM values for responsive design and is friendly to flexbox.

It is aimed at front-end developers who want prebuilt components they can restyle, teams building responsive sites, and developers integrating a UI layer into React, Angular, Meteor or Ember projects.

  • Prebuilt components: buttons, menus, grids, dropdowns and popups
  • Customize the look through CSS variables instead of rewriting styles
  • Works with React, Angular, Meteor and Ember according to the README

Install Semantic UI with npm

You need Node.js and npm. The README says Semantic UI is compatible with Node 18. To install the full framework, which includes themes and build and watch tasks you can import into your own gulpfile, run the first command. If you only need the compiled CSS, use the second.

The README also mentions an interactive installer to help set up your project, and a getting started guide on the official site for more setup detail.

  • Full framework: npm install semantic-ui
  • CSS-only package: npm install semantic-ui-css
  • Other environments are listed in the README, including LESS, Ember, Meteor and Bower
npm install semantic-ui

Choose the right package for your project

The full package is the recommended install and is the one to use if you plan to customize themes. The CSS-only package suits projects that just want the styles. The README also lists separate packages for LESS, a LESS plugin, Ember, Meteor and Bower.

If your setup is not covered, the README points to an integration wiki with more options.

  • semantic-ui: themes plus build and watch tasks
  • semantic-ui-css: CSS only
  • semantic-ui-less: LESS only
  • less-plugin-semantic-ui: LESS plugin
  • semantic-ui-ember: for EmberJS, installed with ember install:addon semantic-ui-ember
npm install semantic-ui-css

Theme components with CSS variables

Theming is the main reason to pick Semantic UI. The README describes a layered system where settings can be inherited and overridden across three levels, and it provides thousands of CSS variables to adjust. Read the theming guide on the official site before you start overriding values.

Keep your changes in your own files so that updates to the framework do not overwrite them.

  • Read the theming guide at semantic-ui.com before editing
  • Override variables at the level that fits your change
  • Right-to-left layouts can be built using the build tools by selecting rtl in the install script

Check browser support before you commit

The README lists support for the last two versions of Firefox, Chrome and Safari on Mac, IE 11 and later, Android 4.4 and later, iOS Safari 7 and later, and Microsoft Edge 12 and later.

Internet Explorer 9 is a problem. The README says some components work there, but grids and other flexbox components are not supported and may not appear correctly. If you must support IE9 or older, Semantic UI is not a good fit.

  • Supported: IE 11+, Edge 12+, iOS Safari 7+, Android 4.4+
  • Not reliable: grids and flexbox components in IE9

Get help and report bugs the right way

The README asks users not to post usage questions to GitHub Issues. For usage questions use the Gitter chatroom or StackOverflow, tagged semantic-ui. GitHub Issues is for enhancement requests and bug reports, and a bug report needs a test case, such as a fork of the boilerplate JSFiddle linked in the README.

The README also notes that the latest release listed is 2.5.0, which added compatibility with Node 18 and Gulp 4.

  • Usage questions: Gitter or StackOverflow
  • Bugs and feature requests: GitHub Issues, with a JSFiddle test case for bugs
  • Pull requests: merge into the next branch

What people use it for

  • Building a responsive marketing site with prebuilt grids and buttons
  • Adding dropdowns, menus and popups to a React or Angular app
  • Creating a branded theme by overriding CSS variables
  • Building an Ember application using the semantic-ui-ember addon

Frequently asked questions

How do I install Semantic UI?

Install Node.js and npm, then run npm install semantic-ui in your project. The README also lists npm install semantic-ui-css if you only need the CSS.

Is Semantic UI free to use?

The repository is licensed under MIT, according to the project details. Check the license file in the repository for the full terms.

What is the difference between semantic-ui and semantic-ui-css?

The semantic-ui package is the full framework, with themes and build and watch tasks. The semantic-ui-css package provides only the CSS.

Does Semantic UI work with Internet Explorer 9?

Some components work in IE9, but grids and other flexbox components are not supported there and may not appear correctly. The README lists IE 11 and later as supported.

Can I use Semantic UI with React?

The README says Semantic UI is partnered with React, Angular, Meteor and Ember and can be integrated with these frameworks. Check the integration wiki for options.

Where can I get help with Semantic UI?

Use the Gitter chatroom or StackOverflow tagged semantic-ui for usage questions. Do not post usage questions to GitHub Issues, which the README reserves for bugs and enhancements.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Semantic UI suits front-end developers who want prebuilt, responsive components they can restyle through CSS variables, especially if they need IE 11 or later rather than IE9. Teams that need the newest component approach, a GitHub support forum, or very active development may prefer alternatives such as Bootstrap, Tailwind CSS, Material UI or Bulma.

Install options & downloads