Skip to Main Content

GitHub package.json version Roadmap


An open-source, modular component library and CSS utility.

Learn More Visit Github

"What does Hydrogen do for me?"

Hydrogen is a design and development tool that helps you quickly build web projects that are mobile-ready, consistent, and accessible.

Component Library

Hydrogen offers over 25 customizable components that you can use to build your interfaces. Each component is built in HTML, Sass, and JavaScript, and is self contained so that they can be individually used if you don't have the need for the entire system.

Utility Attributes

Known in Hydrogen as "properties", the system includes over a dozen media query enabled data-attribute utilities that can be used to style individual elements. Leveraging custom data-h2 attributes, you can style anything from background colors to font sizes.

Theming via Sass

When you import Hydrogen into your Sass-enabled project, you can customize over 90 theme variables to ensure that your components and properties match your brand's guidelines. There are even a handful of pre-built themes on the way that you can use out of the box.

"Why is Hydrogen different?"

Hydrogen attempts to remain bias-free and technology agnostic while offering powerful control for any project.

"What's next for Hydrogen?"

Learn more about how Hydrogen will be improved.

📜 Documentation

A great tool needs great docs!

The most important next step for Hydrogen is the completion of the technical documentation. Documentation includes information on how to install the system, how to use components, how to use properties, how to theme the system, and how to contribute to the project.

An abstract depiction of typical documentation layout using solid boxes of light purple.

🚀 Project Boilerplate

Get a Hydrogen project up and running in seconds.

The project boilerplate will be a ready-to-use package with Hydrogen pre-installed and working. It will contain a basic static web page, Sass compiler set up, Twig templating, and instructions on how to get started.

An abstract depiction of a standard website layout using solid boxes of light purple.

🌿 Twig Component Support

Import and customize components without touching any markup.

Hydrogen aims to support a variety of frameworks one day. To get things started, components will (one-by-one) become accessible through Twig's templating engine. You'll be able to import the component right from the Hydrogen NPM package and customize its data and select styles.

An abstract depiction of three components being imported into one layout using solid boxes of light purple.

⚙️ New Components

Check out what components might be coming to Hydrogen next.

New components are always on the to-do list. These are a few that you might see in the future:

  • Tooltips
  • Table of Contents
  • Code Blocks
  • Toggle Inputs
  • Progress Bars
  • Data Tables
An abstract depiction of a series of components, one of which with a plus symbol to indicate that it's new to the group using solid boxes of light purple.