Skip to content
πŸ”· Help Scout Design System (HSDS) β€” React Component Library
JavaScript TypeScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.git-hooks Update pre-commit hook Jul 27, 2017
.remake Condition Builder Components! (#638) May 23, 2019
.storybook Updates some npm packages to fix linting and vulnerabilities (#672) Aug 2, 2019
.vscode Editable Fields Refactor (#677) Aug 12, 2019
__mocks__ Remove flow (#613) May 8, 2019
config Page.Action: Add Sticky Feature (#617) May 13, 2019
cypress Add Cypress tests for Pagination component (#578) Apr 16, 2019
docs Rollback some README changes. Add link to contributing docs Jul 26, 2019
images HSDS: Rebrand Nov 8, 2018
scripts Add HSDS version to window (#533) Mar 22, 2019
src 2.63.0 Sep 19, 2019
stories Upgrade Code Syntax Highlighting for CopyCode (#707) Sep 19, 2019
.bookignore Adjust .bookignore [skip ci] Aug 15, 2018
.eslintignore Feature/table (#514) Apr 11, 2019
.eslintrc.js Adds TypeScript linting (#642) Jun 11, 2019
.gitbook.yaml Rename gitbook.yml -> gitbook.yaml [skip ci] Aug 15, 2018
.gitignore Feature/table (#514) Apr 11, 2019
.groovyrc.json Button: Remove underline for link selector (#470) Feb 7, 2019
.huskrc Remove Karma (and other dependencies) (#377) Oct 15, 2018
.npmignore Typescript (#381) Nov 8, 2018
.npmrc Support Custom Illos in BlankSlate Component (#662) Jul 18, 2019
.nvmrc Typescript (#381) Nov 8, 2018
.prettierignore Adding Popover (#488) Feb 20, 2019
.prettierrc.yml Add prettier May 24, 2018
.travis.yml Add new social icons (#644) Jun 14, 2019
.watchmanconfig Add .watchmanconfig [skip ci] Sep 28, 2018 Update link in contributing README [skip ci] Nov 8, 2018
LICENSE Add license [skip-ci] Sep 28, 2017 Rollback some README changes. Add link to contributing docs Jul 26, 2019 Add deep dive for checkboxes and radios Mar 21, 2019
babel.config.js Upgrade Code Syntax Highlighting for CopyCode (#707) Sep 19, 2019
cypress.json Testing: Add Cypress! (#459) Feb 4, 2019
jest.config.js Route: Fork react-router/Route to remove dependency (#585) Apr 29, 2019
package-lock.json 2.63.0 Sep 19, 2019
package.json 2.63.0 Sep 19, 2019
tsconfig.json Testing: Add Cypress! (#459) Feb 4, 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


Merging a PR

To merge a PR when the release is completed, please do a Squash and merge from the PR page. It will keep the history clean in the master branch

We tend to do a release with only one PR at the time, if possible

Releasing on NPM

You can learn more about releasing master or releasing a beta build

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.