This guide will show you how to get started with Blue!
The first thing you'll need to do, is add Blue to your React project. This can be done by adding the latest version to your
Or, even faster, you can run:
npm install @helpscout/hsds-react --save
Blue has a couple of
Make sure you have these installed in your project.
Blue currently runs on React version 15. Work is being done to add compatibility with 16+.
A large portion of Blue's styles are currently being powered by Sass. To ensure Blue's components work correctly in your App, you'll need to add these styles.
All of the uncompiled
.scss files are available from Blue.
You can import the single main
.scss files as required:
@import '@helpscout/hsds-react/styles/components/Alert.scss'; @import '@helpscout/hsds-react/styles/components/Button.scss'; @import '@helpscout/hsds-react/styles/components/Heading.scss';
We also have certain external
.scss styles coming from Seed components, our SCSS design system.
Check out Seed's guide for setting up the correct
includePaths for your Sass-powered project.
Blue provides a compiled
.css file, which can be imported from:
Future of CSS-in-Blue
Once the migration from
scss -> CSS-in-JS is complete, you will no longer be required to import styles into your App when using Blue components.
Let's start using some components!