Learn how to quickly get started with our component library to build expressive, consistent UI at Sprout.

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:

You will also require the Seeds peer dependencies when starting a new project or sandbox environment:

@sproutsocial/seeds-border
@sproutsocial/seeds-color
@sproutsocial/seeds-depth
@sproutsocial/seeds-motion
@sproutsocial/seeds-networkcolor
@sproutsocial/seeds-space
@sproutsocial/seeds-typography
moment
prop-types
react
react-dates
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 propagate 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 => (
  <ThemeProvider>
    <App {...props} />
  </ThemeProvider>
)

Using icons

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

Racine provides a helper for mounting the sprite sheet. Simply add the following import wherever you have access to the document:

import '@sproutsocial/racine/includeIcons'

Learn more