Quick start
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 package.json file.
Or, even faster, you can run:
npm install @helpscout/hsds-react --save
Blue has a couple of peerDependencies:
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 blue.scss from:
@import '@helpscout/hsds-react/scss/blue.scss';
Or, individual .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:
import '@helpscout/hsds-react/css/blue.css'
We're moving towards a CSS-in-JS future, powered by Fancy, our custom CSS-in-JS solution (which uses Emotion under the hood).
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!