Playbook UI's React library needs the following packages installed in your project to work properly:
"react"
"react-dom"
"react-is"
"react-trix"
Playbook UI's Rails gem requires React for its components javascript to fully function. Follow the instructions in the Ruby & React Setup guide to add react to your Rails app.
These kits require you to install additional libraries to get full functionality.
To install them add them to your project using yarn add, npm install, or manually add them to your package.json file.
| Kit | Kit Link | NPM Link(s) | Dependency(s) |
|---|---|---|---|
| Icon | Icon | fontawesome-free | fontawesome-free |
| Icon Circle | Icon Circle | fontawesome-free | fontawesome-free |
| Icon Stat Value | Icon Stat Value | fontawesome-free | fontawesome-free |
| Icon Value | Icon Value | fontawesome-free | fontawesome-free |
| Map | Map | maplibre-gl | maplibre-gl |
| PB Bar Graph | PB Bar Graph | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| PB Circle Chart | PB Circle Chart | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| PB Gauge Chart | PB Gauge Chart | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| PB Line Graph | PB Line Graph | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| Rich Text Editor (TipTap Editor) |
Rich Text Editor | - @tiptap/core - @tiptap/react - @tiptap/starter-kit - @tiptap/extension-document - @tiptap/extension-highlight - @tiptap/extension-horizontal-rule - @tiptap/extension-link - @tiptap/extension-paragraph - @tiptap/extension-text - @tiptap/pm |
- @tiptap/core - @tiptap/react - @tiptap/starter-kit - @tiptap/extension-document - @tiptap/extension-highlight - @tiptap/extension-horizontal-rule - @tiptap/extension-link - @tiptap/extension-paragraph - @tiptap/extension-text - @tiptap/pm |
Chart Kits:
PbBarGraph, PbCircleChart, PbGaugeChart, and PbLineGraph are available through a separate entrypoint to keep Highcharts optional. Import them using:
import { PbBarGraph, PbCircleChart, PbGaugeChart, PbLineGraph } from 'playbook-ui/charts'
These kits use dependencies that are bundled with them; no additional installation is required.
| Kit | Kit Link | NPM Link(s) | Dependency(s) |
|---|---|---|---|
| Advanced Table | Advanced Table | @tanstack/react-table | @tanstack/react-table |
| Date Picker | Date Picker | flatpickr | flatpickr |
| Dialog | Dialog | react-modal | react-modal |
| File Upload | File Upload | react-dropzone | react-dropzone |
| Filter | Filter | react-popper | react-popper |
| Highlight | Highlight | react-highlight-words | react-highlight-words |
| LightBox | LightBox | react-zoom-pan-pinch | react-zoom-pan-pinch |
| Passphrase | Passphrase | react-popper | react-popper |
| Phone Number Input | Phone Number Input | intl-tel-input | intl-tel-input |
| Popover | Popover | react-popper | react-popper |
| Rich Text Editor (Trix Editor) |
Rich Text Editor | trix, react-trix |
trix, react-trix |
| Tooltip | Tooltip | @floating-ui/react | @floating-ui/react |
| Typeahead | Typeahead | react-select | react-select |
Rich Text Editor: This kit supports two different editors:
TipTap Editor: Requires manual installation of tiptap and various @tiptap/* extensions (listed above under Unbundled Dependencies).
Trix Editor: Dependencies (trix and react-trix) are bundled with the kit; no extra installation is needed.
