Components

Getting started

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-icons
@sproutsocial/seeds-illustrations
@sproutsocial/seeds-motion
@sproutsocial/seeds-networkcolor
@sproutsocial/seeds-partner-logos
@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.

Please note that icon sprites are imported from seeds-icons, whereas logo and illustration sprites are imported from racine. Sprites can be attached in the same manner regardless of where they are imported from.

Icon spritesheets are broken up by domains. Feel free to attach only the spritesheets that you need for your application.

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 {GeneralSprite, ExternalSprite, SproutSprite} from '@sproutsocial/seeds-icons';
import {Sprite as PartnerLogoSprite} from '@sproutsocial/seeds-partner-logos';
import {Sprite as IllustrationSprite} from '@sproutsocial/seeds-illustrations';

const sprites = [GeneralSprite, ExternalSprite, SproutSprite, PartnerLogoSprite, IllustrationSprite];

if (typeof document !== "undefined") {
  var body = document && document.querySelector("body");
  var container = document.createElement("div");
  container.style = "width: 0; height: 0; overflow: hidden;";

  sprites.forEach(sprite => {
    var element = document.createElement('div');
    element.innerHTML = sprite;
    container.append(element.firstChild);
  })

  body.appendChild(container);
}

Learn more