Menu

Integrations
Using Semantic UI with Other Libraries

React

Managing Lifecycle

Semantic UI components are designed to be compatible with libraries that tightly manage UI lifecycle like React. No special bindings are needed.

Most components use mutation observers to watch for changes in internal state, and all components are built with initialize, refresh and destroy methods which will regenerate, refresh cached values, and teardown components.

Meteor

Install via Atmosphere

Install the Semantic UI package from atmosphere.

meteor add semantic:ui

The next step will differ depending on what version of Meteor you are running. Continue to the section relevant to your version of Meteor.

(Meteor <1.3) Install less-autoprefixer package

You will need a special package less-autoprefixer, to add vendor prefixes to your LESS pipeline.

Since flemay:less-autoprefixer compiles LESS files you don't need any other less package.
meteor add flemay:less-autoprefixer

Continue to the "Create a custom.semantic.json file" section

(Meteor 1.3+) Install less and postcss packages

Remove the standard-minifier-css package.

meteor remove standard-minifier-css

Install the less and postcss packages.

meteor add less juliancwirko:postcss

To configure the postcss package, add the following to your package.json file and save it.

{ "devDependencies": { "autoprefixer": "^6.3.1" }, "postcss": { "plugins": { "autoprefixer": {"browsers": ["last 2 versions"]} } } }

To finish setting up the postcss package, install the new autoprefixer NPM package.

meteor npm install

Create a custom.semantic.json file

custom.semantic.json is a special file used to determine which themes and components to include in your project's build.

To remove a component from the pipeline, simply set the boolean value to false

{ "definitions": { "accordion" : true, "ad" : true, "api" : true, /* etc */ }, "themes": { "amazon" : false, "basic" : false, "bookish" : false, "bootstrap3" : false, "chubby" : false, "classic" : false, "default" : true, /* etc */ }

Start Meteor / Generate

Every time Meteor starts or refreshes it calls the package semantic:ui to generate Semantic UI.

The package has a uses the diff between custom.semantic.json and .custom.semantic.json to avoid regenerating files unnecesssarily.

If the file .custom.semantic.json does not exist or it is different than custom.semantic.json then it will generate Semantic UI.

Customize Site Variables

Semantic UI meteor includes a site theme, site/ which can be used to customize less variables for your site. These files are optional, and can safely be removed if customization is not necessary.

Visit our theming guide to learn more about theming.

Issues & Debugging

For help with Semantic UI Meteor, and for the latest updates, please visit the repository home on GitHub

Visit Meteor Repo

Ember

Installing via CLI

Include the library as an NPM dependency, from within an ember-cli app.

If you are using Ember CLI 0.1.5-0.2.3

ember install:addon semantic-ui-ember

If you are using an older version < 0.1.5

npm install --save-dev Semantic-Org/Semantic-UI-Ember

Run the Library's Blueprint

ember generate semantic-ui-ember

Get Coding

For example of individual components check out the GitHub repository

Visit Ember Repo

Angular

Contribute to Angular Development

Semantic UI angular bindings are still in development, but are available for some components

Visit Angular Repo

Dimmer Message
Dimmer sub-header