Component library for Gatsby projects

Usage no npm install needed!

<script type="module">
  import gatsbyInterface from '';


rebeccapurple dot

Gatsby Interface

Current npm package version. Downloads per month on npm. Total downloads on npm.

Storybook available at



Using Yarn:

yarn add gatsby-interface

Using npm:

npm install gatsby-interface --save


Certain Gatsby Interface components require the Futura PT webfont. These files are git-ignored to prevent the unauthorized release of licensed assets, and are not included in this repository.

Gatsby Inc. employees can download these fonts from our Google Drive. Put all those folders in src/assets/futura-pt and you should be good to go!


  1. Clone the repository: git clone
  2. Install dependencies: yarn.
  3. Run Storybook: yarn storybook.

Chromatic testing

To run the visual testing tool, run CHROMATIC_APP_CODE=<insert_app_code> yarn chromatic

You can find the app code in the Chromatic dashboard -

❗ Code of Conduct

Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct. Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together. 💪💜