Skip to content
🔥 A react UI component library
Branch: master
Clone or download


Matchbox is an open source React component library, built for SparkPost's UI.

Build Status Coverage Status



1. Installation

In your React project, use npm to install matchbox:

npm install @sparkpost/matchbox --save

2. Include Styles

 // Import matchbox's styles
 @import '~@sparkpost/matchbox/styles.scss';
 // Optionally include config.scss for sass functions and mixins
 @import '~@sparkpost/matchbox/src/styles/config.scss';

3. Use the React components

In-depth usage docs coming in the future. For now, reference storybook.

import React from ‘react’;
import { Panel } from '@sparkpost/matchbox';

const YourComponent = () => (
 <Panel accent title='Hey!'>
    Section Content

Storybook Development

React Storybook is included for local development.

# Runs storybook at localhost:9001
npm run start:storybook


# First merge your PR into master
# Move into the package you want to publish
cd packages/matchbox

# Bump version number
npm version x.x.x

# Commit the release
git add .
git commit -m "Publish @sparkpost/matchbox x.x.x"
git push

# Run the build and publish to NPM with your 2fa code
npm run build
npm publish --otp=xxxxxx
You can’t perform that action at this time.