Menu

Getting Started

Preface

Using Build Tools

Semantic UI packaged Gulp build tools so your project can preserve its own theme changes.

The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup interactive and updates seamless.

For installing with specific integrations like Ember, React, or Meteor, see our integration guide

For integrating Semantic UI tasks into your own build tools, or using a CDN see our recipes section.

Simpler Setup

If you are using Semantic UI as a dependency and just want to use our default theme, use our lighter semantic-ui-css or semantic-ui-less repo. If you just need the files you can download them as a zip from GitHub.

Download Zip View all Semantic-Org Repos

Installing

Install NodeJS

If you are unfamiliar with setting up NodeJS you can follow the steps below, or check out the download page on nodejs.org

Option 1: Homebrew

After installing homebrew

brew install node

Option 2: Git

git clone git://github.com/nodejs/node.git cd node ./configure make sudo make install

Install via PPA

Although Chris Lea's PPA was once the best way to install node, it is now somewhat out of date.

The recommended path to install Semantic UI is using Joyent's package manager guide.

Ubuntu

curl --silent --location https://deb.nodesource.com/setup_6.x | sudo bash - sudo apt-get install --yes nodejs

Debian

apt-get install curl curl --silent --location https://deb.nodesource.com/setup_6.x | bash - apt-get install --yes nodejs

Red Hat

curl --silent --location https://rpm.nodesource.com/setup | bash - yum -y install nodejs

Install the exe

Download the NodeJS executable.

Install Gulp

Semantic UI uses Gulp to provide command line tools for building themed versions of the library with just the components you need.

Gulp is an NPM module and must be installed globally

npm install -g gulp

Install Semantic UI

Semantic UI is available in an eponymous package on NPM

npm install semantic-ui --save cd semantic/ gulp build

Include in Your HTML

Running the gulp build tools will compile CSS and Javascript for use in your project. Just link to these files in your HTML along with the latest jQuery.

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="semantic/dist/semantic.min.js"></script>

Updating

Updating via NPM

Semantic's NPM install script will automatically update Semantic UI to the latest version while preserving your site and packaged themes.

npm update

Next Steps

All Set!

Well done! Semantic UI is now ready to be used.

See how to use gulp commands and build tools
Learn about changing themes
See recipes for using Semantic UI in your project

Dimmer Message
Dimmer sub-header