Announcing Harmonium: Our React UI Component Kit

At Revelry, we’ve been building with React for a long time – since early developer betas.  Over the last few years, and over dozens of projects, we’ve built and refined a UI component kit for React that we’ve code-named Harmonium.

Harmonium is available on GitHub, and there’s also a React UI Component gallery at harmonium.revelry.co.

In fact, we quietly released Harmonium about 4 months ago. We had a lot of confidence in it, because we’ve used some version of this toolkit to build dozens of projects for clients. That said, we wanted to give it a soft launch as a public project and get some community feedback before we started banging the drum.

To our delight, we’ve gotten a lot of great community contributions. So, it feels like the time to start talking is now.

Have a look at Harmonium Version 4:

Harmonium React UI Component Screen Shot

 

Why another UI framework?

We found that there weren’t that many comprehensive React component libraries. The JavaScript way is to bring dependencies into your project one at a time. You get form elements from here, and an image gallery from there.

In theory, this is great– you can pick the perfect thing for each project. In reality, these disparate components clash: they don’t look the same, they don’t work together, and they may even fight for control over the same namespaces.

And they often come each with their own infrastructure and utilities, bloating the end product. We never found one library that covered all the things we needed for one of our typical projects. And that’s why we built Harmonium.

A React UI Component kit of parts built to work together

Our kit required parts that were built to work together with a consistent look. One of our design goals is that you never have to research and handpick component packages.

Whatever you need is already here.

Harmonium React UI Component examples

And, we optimized for our projects.

We wanted a kit that’s optimized for the kind of projects we do– as good at slick home pages as it is at crunchy admin interfaces.

Harmonium ships with a great set of SCSS styles. You can customize these styles to your heart’s content, with variable overrides. Or, utilize your own completely custom style sheet.

What kind of projects are you building?

Harmonium React UI Component use cases

 

Give it a try and give us feedback.

We encourage pull requests and suggestions.

What’s on the roadmap?

Harmonium isn’t done. There are whole areas of our roadmap that we have not even begun to explore. Here are some:

  • React Native support: support for using the same components (or direct native counterparts) in React Native.
  • Sketch integration: design in Sketch, export to React or React Native.
  • Other styling options: SCSS has competition these days. We’re looking for ways to build styles into css-in-js, postcss, etc
  • Data visualization: better charts and graphs
  • Higher level templates: common full page layouts pre-built and tested for you.

At Revelry, our team is focused on shipping great software every day.

Get to know some of the team!
We’re transparent about how we work. For a look at how we build digital products, check out
Lean Agile Processes and Tools.
Keep in touch by subscribing to CODING CREATIVITY.