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
:
npm install @sproutsocial/racine react styled-components
yarn add @sproutsocial/racine react styled-components
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-typographymomentprop-typesreactreact-datesstyled-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'