An opinionated React component framework for teams that move fast.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.vs Lints Aug 1, 2018
bin chore: Add coveralls to test suite Oct 11, 2018
docs-src fix: Fix error in media uploader example (#344) #342 Oct 29, 2018
sass-test Test sass build (#256) Jun 11, 2018
scss fix: breakpoint list fix Nov 9, 2018
settings-templates Setting Template zip file Aug 2, 2018
src feat: Add MediaUploader component (#343, #342) Oct 26, 2018
.eslintignore Full ESLint & Prettier Integration (#181) Apr 4, 2018
.eslintrc Style/lint components (#213) May 1, 2018
.gitignore Test sass build (#256) Jun 11, 2018
.node-version node 8.1.2 Jun 21, 2017
.nvmrc node 8.1.2 Jun 21, 2017
.prettierignore Full ESLint & Prettier Integration (#181) Apr 4, 2018
.prettierrc Full ESLint & Prettier Integration (#181) Apr 4, 2018
.tool-versions Start new doc site Aug 2, 2017
.tool-versions-e feat: Add Loader (#130) Mar 20, 2018
.travis.yml fix: Repair semantic release pipeline May 11, 2018 doc: Touch Apr 19, 2018 Merge pull request #315 from revelrylabs/265-contributing-doc-updates Jul 26, 2018
LICENSE Merge branch 'master' of into f… Jan 15, 2018 chore: Add coveralls badge Oct 11, 2018
mocha.opts feat: Add Map and related components (#187) Apr 13, 2018
package.json chore(release): Bump version to 4.3.2 [skip ci] Nov 9, 2018

NPM Version Travis Build Status Dependency Status Coverage Status

Harmonium is a framework of React components optimized for teams that want to ship apps fast. It is a curated list of components that work together and have cohesive styles. One of our design goals is that you never have to research and handpick component packages. Whatever you need is already here.

A gallery of components is at


To install the toolkit for use in your project:

npm install --save harmonium


You can import components and use components from the toolkit like:

import Col from 'harmonium/lib/Col'
import Row from 'harmonium/lib/Row'
import Callout from 'harmonium/lib/Callout'

function Hello() {
  return (
        <Callout>Hello, world.</Callout>

See the example site at for more examples of how to use the components in your projects.


We don't just provide JavaScript. We've built a set of SCSS styles for all the components. It is in the scss directory of the package. You can either copy it into your project's SCSS directory, or use a tool like sassy-npm-importer to import it from the package.


At this time, there's no package level configuration-- all options as passed as props to the components at time of use.

Contributing and Development

See for guidance on how to develop harmonium.

Bug reports and pull requests are welcome on GitHub at Check out for more info.

Everyone is welcome to participate in the project. We expect contributors to adhere the Contributor Covenant Code of Conduct (see


See LICENSE for details.