Skip to Main Content

Designs launchingafterJuly 14, 2021, please referencethe latest release of Spark.

Installing Spark

Installing Spark in a React Project

This guide will walk you through installing and using Spark on an existing React site. For help with setting up the necessary development environment, see the React App Getting Started Guide.

By the end of this, you’ll have all the Spark React components available in your site.

Installing Sass

Sass is a tool that processes and compiles CSS. You’ll need to use Sass to import Spark styles into your site.
  1. Run this command to install Sass:
npm install node-sass --save-dev
  1. Rename App.css to App.scss
  2. In App.js, update the import line to point at the new filename.
import './App.scss'
  1. Create a new file in src called styles.scss and copy this CSS into it:
body {
  border: 50px solid pink;
}
  1. In App.scss, import this new file:
@import './styles.scss';

If your React server has stopped, restart it now and view your compiled React site. You should see the new CSS you’ve written included in the site, along with the original React CSS:

Screenshot of Create React App running in a browser.

Install Spark Packages

Now we’ll use Sass to import all the Spark CSS.

  1. Download the required packages with this command. It contains all of the HTML, JavaScript, and CSS needed to run Spark React components.
npm install @sparkdesignsystem/spark @sparkdesignsystem/spark-react --save-dev
  1. Import the Spark Sass file into the main Sass file (e.g., App.scss).
@import '../node_modules/@sparkdesignsystem/spark/spark.scss';

When you build and run your website, all the Spark CSS will now be bundled into your output. You can verify this by inspecting your site’s DOM and looking for the Spark CSS. There should be a <style> tag in the <head> of your page that includes Spark’s styles.

Screenshot of DOM with Spark Styles
If Spark React is installed correctly, you should see these CSS rules listed in your page’s code.

Adding React Components

Let’s add a component that will allow us to test that both Spark’s styles and functionality are working. We’ll use the Loading Button component to do this. You can find code for all Spark components at react.sparkdesignsystem.com.

  1. Add a reference to the SprkButton component at the top of App.js.
import { SprkButton } from '@sparkdesignsystem/spark-react';
  1. Copy the sample code into the return block in App.js.
function App() {
  return (
    <SprkButton loading>Submit</SprkButton>
  );
}

You should now see a Spark Button!

Screenshot of React App with Spark Spark Button

You did it!

You now have a development environment set up with Spark installed and you’re ready to start building!

For Spark support, you can email the Spark team with any questions and we’ll respond as quickly as possible.

Additional Topics

Check out these guides for more information on setting up Spark: