Getting Started - React


This getting started guide is intended for developers. See below for instructions on how to install Spark and bring it into your existing build.


Spark's React implementation assumes a few things about your project.

  • We assume that your project is processing Sass rather than plain CSS for style information. More information for converting a React project to SCSS is available at facebook.github.io.


Getting Started

To get started with spark-react , you'll need to follow these steps:

  • Install the spark npm package.

    npm install --save-dev @sparkdesignsystem/spark
  • Install the spark-react npm package.

    npm install --save-dev @sparkdesignsystem/spark-react
  • Install the needed peer dependencies for our npm package. If your application does not have one of our peer dependencies then your console should show a warning for that missing dependency when you install spark-react .

  • Import the Sass setup file in your React application's global styles Sass file. This can be done in the scss file specified at the highest level of your app. This will bring all Spark patterns into your build. The .scss file extension is needed in the case of React so as to not conflict with JS files.

    @import "node_modules/@sparkdesignsystem/spark/spark.scss";
  • Spark does not provide icons directly. What you see on our icons page are proprietary icons in use by Quicken Loans. To supply your own icon set, you need to import an svg that contains symbols for the ids referenced on the icon page. This symbol file should occur in the DOM before the first use element.

Using Components

To use a Spark React Component, it needs to be imported into your component js file using the following pattern:

import { ComponentName } from '@sparkdesignsystem/spark-react';

Browser Support

Spark supports the following browsers (current version and 1 prior):

  • Google Chrome
  • Google Chrome (Mobile)
  • Mozilla Firefox
  • Mozilla Firefox (Mobile)
  • Microsoft Edge
  • Apple Safari
  • Apple Safari (Mobile)

Spark also supports the following:

  • Microsoft Internet Explorer 11

Change Workflow and Contribution Guide

If you are interested in contributing to Spark, please read our full change workflow and contribution guide to get started.