Skip to content
Help Scout Design System (HSDS) — React Component Library
Branch: master
Clone or download
Latest commit 6e8b47e Mar 22, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.git-hooks Update pre-commit hook Jul 27, 2017
config React 16! (#403) Nov 27, 2018
src 2.20.1 Mar 22, 2019
stories Updates Scrollable component to support horizontal scrolling (#540) Mar 22, 2019
.prettierrc.yml Add prettier May 24, 2018
.travis.yml Speed up Storybook (#495) Feb 22, 2019
.watchmanconfig Update link in contributing README [skip ci] Nov 8, 2018
package.json 2.20.1 Mar 22, 2019

HSDS: React

Build Status Coverage Status npm version node npm

React components for Help Scout's Design System

Live Demo

Check out HSDS's Storybook:


npm install @helpscout/hsds-react --save

Getting Started

After cloning this repo down, run:

npm install

Once everything is installed, run:

npm start

Check out HSDS's Storybook at http://localhost:8900/ in your browser!

SVG Adapter

As of v2.18.0, the svg set is opt-in. This was done to reduce the compiled bundle size. To load the svg icons, add the appropriate adapter to your app.

It is recommended that the adapter be loaded somewhere within your main entry point (e.g. src/index.js).

// src/index.js
// For a lighter-weight svg set for embeddables
import '@helpscout/hsds-react/adapters/embed'
// For the complete svg set
import '@helpscout/hsds-react/adapters/app'

Note: This loads all the svg images, including Icon and Illo.


To run Jest in watch mode, run:

npm run dev

To execute all the tests (with Coverage reporting), run:

npm run test


To publish and release a new version of HSDS, run the following command:

npm run release

You'll be presented with a CLI prompt with options. Pick the one you want, and that's it! The script will take care of the rest (from testing to publishing).

Deploying Storybook

To deploy the Storybook, run the following command:

npm run deploy


Check out our videos for learning resources.


On Nov 8, 2018, we rebranded Blue to HSDS: React 🎉.

The original Blue library will still exist on npm, and is still installable via:

npm install @helpscout/blue --save

However, continued development of this component library will continue under HSDS: React, which is installable via:

npm install @helpscout/hsds-react --save

A big thanks to all the folks involved in Blue! Blue will always be your boy 💙 .

You can’t perform that action at this time.