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 SVGs

In order to make use of any of our SVG components, you must ensure that the SVG sprite sheets are mounted to the DOM.

We’ve provided an example below of how to achieve this but feel free to mount the sprites in whatever manner best suits your needs.

// loadSVGAssets.js

import icons from "node_modules/@sproutsocial/racine/dist/icon.svg";
import logos from "node_modules/@sproutsocial/racine/dist/logo.svg";
import illustrations from "node_modules/@sproutsocial/racine/dist/illustration.svg";

if (typeof document !== "undefined") {
  const body = document && document.querySelector("body");
  const iconsElement = document.createElement("div");
  const logosElement = document.createElement("div");
  const illustrationsElement = document.createElement("div");
  iconsElement.innerHTML = icons;
  logosElement.innerHTML = logos;
  illustrationsElement.innerHTML = illustrations;
  const container = document.createElement("div");
  container.style = "width: 0; height: 0; overflow: hidden;";
  container.append(iconsElement.firstChild);
  container.append(logosElement.firstChild);
  container.append(illustrationsElement.firstChild);
  body.appendChild(container);
}

Learn more