gem 'playbook_ui'
bundle
# app/controllers/application_controller.rb
helper Playbook::PbKitHelper
sassc-rails
Gem Dependency if Using Asset Pipelinegem "sassc-rails"
# app/assets/stylesheets/application.scss
@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
To use kits with interactivity, and our graphs you need to bring in the 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";
This will add all the javascript to use the popovers, & graphs for example.
import 'playbook-ui/dist/playbook-rails.js';
<%%= yield :pb_js %>
Playbook ships with font awesome but you’ll need to include it in your application
//= require regular-min.js
//= require fontawesome-min.js
yarn add playbook-ui
"react": "16.8.6",
"react-dom": "16.8.6",
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 { Avatar, Button } from 'playbook-ui';