Getting started

How to get started with Sprout Social's React component library.

Install the package

Sprout’s component library is called Racine, and it’s available on the npm registry. You can install it using npm or yarn:

npm install @sproutsocial/racine react styled-components
yarn add @sproutsocial/racine react styled-components

Once you’ve installed the package you can import any component available in Racine:

import { Box } from '@sproutsocial/racine'

Wrap your app in the theme provider

In order to propogate Racine’s theme to the components, you need to wrap your React app in Racine’s ThemeProvider component:

import { ThemeProvider } from '@sproutsocial/racine'
const WrappedApp = props => (
<App {...props} />

Using icons

In order to make use of the Icon component, you must ensure that the SVG sprite sheet is mounted to the DOM.

First, import the sprite sheet from Racine:

import icons from '!!raw-loader!@sproutsocial/racine/dist/icons.svg'

Finally, mount the sprite sheet to the DOM near the end of the <body> element:

style={{ display: 'none' }}
dangerouslySetInnerHTML={{ __html: icons }}

Learn more