diff --git a/playbook-website/app/views/guides/getting_started/dependencies.md b/playbook-website/app/views/guides/getting_started/dependencies.md index 3323271988..66550e3e03 100644 --- a/playbook-website/app/views/guides/getting_started/dependencies.md +++ b/playbook-website/app/views/guides/getting_started/dependencies.md @@ -4,6 +4,21 @@ icon: code description: Some of our kits require additional libraries to run properly. --- +## Playbook UI Dependencies | React + +Playbook UI's React library needs the following packages installed in your project to work properly: + +```json +"react" + "react-dom" + "react-is" + "react-trix" +``` + +## Playbook UI Dependencies | Rails + +Playbook UI's Rails gem requires React for its components javascript to fully function. Follow the instructions in the [Ruby & React Setup](/guides/getting_started/rails_&_react_setup) guide to add react to your Rails app. + ## Unbundled Dependencies These kits require you to install additional libraries to get full functionality. diff --git a/playbook-website/app/views/guides/getting_started/react_setup.md b/playbook-website/app/views/guides/getting_started/react_setup.md index f6304d8d6a..1b0bf4dd4f 100644 --- a/playbook-website/app/views/guides/getting_started/react_setup.md +++ b/playbook-website/app/views/guides/getting_started/react_setup.md @@ -8,11 +8,13 @@ description: React applications. Endlessly flexible presentational UI components ```sh yarn add playbook-ui ``` -#### Match your project's versions of React and ReactDOM with Playbook's versions +#### Match your project's versions of React, ReactDOM, react-is and React Trix with Playbook's versions ```json "react": "17.0.2", "react-dom": "17.0.2", + "react-is": "^17.0.2", + "react-trix": "0.10.1", ``` #### Import fonts and CSS styles Can be imported in your Index.js file or top level app Component @@ -28,4 +30,7 @@ import 'playbook-ui/dist/fonts/fontawesome-min'; import { Avatar, Button } from 'playbook-ui'; ``` #### CodeSandbox React Setup Example -[Link to CodeSandbox Example](https://codesandbox.io/s/playbook-empty-6ixcw) \ No newline at end of file +[Link to CodeSandbox Example](https://codesandbox.io/s/playbook-empty-6ixcw) + +### Dependencies +[More details about Playbook dependencies](/guides/getting_started/dependencies)