Rails Getting Started (with Webpacker)

Update your Gemfile

gem 'playbook_ui'

Bundle Install

bundle

Add the View Helper to enable Rails Kits

# app/controllers/application_controller.rb
 helper Playbook::PbKitHelper

Import the all kit styles (Asset Pipeline)

# app/controllers/application_controller.rb

 @import "playbook";

or be selective

# app/assets/stylesheets/application.scss

 @import "tokens/index";
 @import "pb_body/body";

From here all of our display kits should work for you nicely

Javascript Enabled Rails Kits

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

Add Playbook 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

import 'playbook-ui/dist/fonts/fontawesome-min';
 import 'playbook-ui/dist/fonts/regular-min';

React Getting Started

Bundle Install

yarn add playbook-ui

Match your project's versions of React and ReactDOM with Playbook's versions

"react": "16.8.6",
 "react-dom": "16.8.6",

Import fonts and CSS styles

Can be imported in your Index.js file or top level app Component

import 'playbook-ui/dist/fonts/fontawesome-min';
 import 'playbook-ui/dist/fonts/regular-min';
 import 'playbook-ui/dist/playbook.css';

Import Playbook React components

import { Avatar, Button } from 'playbook-ui';

CodeSandbox React Setup Example

Link to CodeSandbox Example