Components

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
npm install @sproutsocial/racine react styled-components
yarn
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'

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:

<div
style={{ display: 'none' }}
dangerouslySetInnerHTML={{ __html: icons }}
/>

Learn more