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 |
| 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 |
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 |
| Bar Graph | Bar Graph | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| Circle Chart | Circle Chart | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| 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 |
| Gauge | Gauge | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| Highlight | Highlight | react-highlight-words | react-highlight-words |
| LightBox | LightBox | react-zoom-pan-pinch | react-zoom-pan-pinch |
| Line Graph | Line Graph | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| Multi Level Select | Multi Level Select | lodash | lodash |
| Passphrase | Passphrase | react-popper | react-popper |
| Phone Number Input | Phone Number Input | intl-tel-input | intl-tel-input |
| Popover | Popover | lodash, react-popper |
lodash, react-popper |
| Rich Text Editor (Trix Editor) |
Rich Text Editor | trix, react-trix |
trix, react-trix |
| Tooltip | Tooltip | @floating-ui/react | @floating-ui/react |
| Treemap Chart | Treemap Chart | highcharts, highcharts-react-official |
highcharts, highcharts-react-official |
| Typeahead | Typeahead | react-select, lodash |
react-select, lodash |
| Walkthrough | Walkthrough | react-joyride | react-joyride |
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.
