In this tutorial, we're going to customize a base react application with HEx. We're going to use create-react-app to generate the boilerplate. The only prerequesites are node and npm. We use yarn to install the packages, but it's optional.

  1. Install create-react-app

    yarn global add create-react-app # npm install -g create-react-app
  2. Create a new cool project!

    create-react-app my-cool-project
    cd my-cool-project
  3. Add SASS to the react project. All the required steps are described in this oficial guide

  4. Add HEx to the project

    yarn add @bitnami/hex # npm install @bitnami/hex
  5. Create the src/_theme.scss file, import the lib.scss and add all the required customization. The lib.scss file imports all the theming mixins. The following example modifies several parameters:

    // src/_theme.scss
    @import './node_modules/@bitnami/hex/lib';
    // Update the base color palette:
    @include colorTheme(
       'brand': #4fa1f2
     $color-interval // Use the default value
    // Update the font-size and the line-height
    @include baseSizing(
    // Update the font families
    $body: Arial, Verdana;
    @include fontFamilies(
    // Modify the grid
    @include gridConfig(
  6. Import the _theme.scss and the main HEx file in your src/index.scss:

    // src/index.scss
    @import './theme';
    @import './node_modules/@bitnami/hex/src/index';
  7. Start the project and check it:

    yarn start # npm start