Integrate Playbook's design system seamlessly into your Rails and React app with the Playbook Ruby Gem and React components. Get started today with our easy-to-follow tutorial.

Javascript Enabled Rails Kits

To use kits with interactivity, and our graphs you need to bring in the NPM package.

Add the Playbook NPM Package

yarn add "playbook-ui@stable"

This will allow you to choose what version you want.

yarn install

Now that you have the package installed you could import styles via JS

@import "playbook-ui/dist/tokens/screen_sizes.scss";

Import all the Javascript Needed for Rails Kits

This will add all the javascript to use the popovers, & graphs for example.

import 'playbook-ui/dist/playbook-rails.js';

Add Inline Rails JS to Your Layout (Needed for Rails Graphs)

<%= yield :pb_js %>

Add Font Awesome

Playbook ships with font awesome but you’ll need to include it in your application

//= require regular-min.js
//= require fontawesome-min.js