A no-frills flexbox grid system for React.

Usage no npm install needed!

<script type="module">
  import hedron1 from 'https://cdn.skypack.dev/hedron1';


Travis npm David Slack Status

View a landing page built with Hedron.


npm install --save hedron

or better yet

yarn add hedron


View the Documentation →

Example Usage

View interactive example on webpackbin

import React, { Component } from 'react';
import { Section, Row, Column } from 'hedron';

class App extends Component {
  render() {
    return (
          <Box sm={8} smShift={2} lg={6} lgShift={3}>
            <h1>This is a Box that's centered using the shift props</h1>
          <Box fluid sm={4}>
            <h1>Fluid Boxs</h1>
          <Box fluid sm={4}>
            <p>It's a 12 Box layout by default.</p>
          <Box fluid sm={4}>
            <Container divisions={24}>
              <Box sm={24}>
                  But you can change the amount of Boxes by adding the
                  `divisions` property to a Container.
                <p>It's fully embeddable as well!</p>


First of all, thanks for your interest in contributing to hedron. The best place to get started with contributing to hedron is to join the JSBro Slack Team. Once you're in the slack channel, take a look at the issue tracker and look at the tasks labeled with help wanted.

Building the module from source

$ git clone https://github.com/JSBros/hedron

To install all dependencies, you can use either npm or yarn. I personally prefer [and recommend] using yarn.


$ npm install


$ yarn install


To build hedron from the source code, please run the following command inside the hedron directory

$ npm run build

Before you submit a pull request, you must first make sure that the code base is passing eslint inspections. To do that, please run the following

$ npm run lint

If all goes well, nothing spectacular should happen. If there are any errors, you'll get a lot of red output in your terminal and it will list exactly what needs to be fixed.


In an effort to keep the git history clean, since 0.4.0 I'm enforcing a semantic commit message style.

View the semantic commit message guidelines →


Thanks goes to these wonderful people (emoji key):

Garet McKinley

💻 💡 ⚠️ 👀

Matt Hamil


Mikko Matilainen


Nathaniel Piche

💻 📖

Brian Stanback


Stephen Mathieson


This project follows the all-contributors specification. Contributions of any kind are welcome!


Hedron is under the MIT License.