Add CSS section to all UI plugins, including React components

website/src/docs/dashboard.md

@@ -43,7 +43,7 @@ const Dashboard = Uppy.Dashboard
 
 ## CSS
 
-The `@uppy/dashboard` plugin comes with a CSS file for styling:
+The `@uppy/dashboard` plugin requires the following CSS for styling:
 
 ```js
 import '@uppy/core/dist/style.css'

website/src/docs/dropbox.md

@@ -36,6 +36,13 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Dropbox = Uppy.Dropbox
 ```
 
+## CSS
+
+Dashboard plugin is recommended as a container to all Provider plugins, including Dropbox. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
+
+⚠️ If you are feeling adventerous, and want to use Dropbox plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommened.
+
+
 ## Options
 
 The `@uppy/dropbox` plugin has the following configurable options:

website/src/docs/google-drive.md

@@ -36,6 +36,12 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const GoogleDrive = Uppy.GoogleDrive
 ```
 
+## CSS
+
+Dashboard plugin is recommended as a container to all Provider plugins, including Google Drive. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
+
+⚠️ If you are feeling adventerous, and want to use Google Drive plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommened.
+
 ## Options
 
 The `@uppy/google-drive` plugin has the following configurable options:

website/src/docs/informer.md

@@ -40,7 +40,7 @@ const Informer = Uppy.Informer
 
 ## CSS
 
-The `@uppy/informer` plugin comes with a CSS file for styling:
+The `@uppy/informer` plugin requires the following CSS for styling:
 
 ```js
 import '@uppy/core/dist/style.css'

website/src/docs/instagram.md

@@ -38,6 +38,12 @@ In the [CDN package](/docs/#With-a-script-tag), it is available on the `Uppy` gl
 const Instagram = Uppy.Instagram
 ```
 
+## CSS
+
+Dashboard plugin is recommended as a container to all Provider plugins, including Instagram. If you are using Dashboard, it [comes with all the nessesary styles](/docs/dashboard/#CSS) for Dropbox as well.
+
+⚠️ If you are feeling adventerous, and want to use Instagram plugin separately, without Dashboard, make sure to include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. This is experimental, not officialy supported and not recommened.
+
 ## Options
 
 The `@uppy/instagram` plugin has the following configurable options:

website/src/docs/progressbar.md

@@ -39,7 +39,7 @@ const ProgressBar = Uppy.ProgressBar
 
 ## CSS
 
-The `@uppy/progress-bar` plugin comes with a CSS file for styling:
+The `@uppy/progress-bar` plugin requires the following CSS for styling:
 
 ```js
 import '@uppy/core/dist/style.css'

website/src/docs/providers.md

@@ -37,3 +37,7 @@ uppy.use(Instagram, {target: Dashboard, serverUrl: 'http://localhost:3020'})
 const Url = require('@uppy/url')
 uppy.use(Url, {target: Dashboard, serverUrl: 'http://localhost:3020'})
 ```
+
+⚠️ The [Dashboard](/docs/dashboard) plugin is recommended as a universal container to all Provider plugins. It also comes with file previews, progress reporting and more. If you are using the Dashboard, it already [comes with all the nessesary styles](/docs/dashboard/#CSS) and functionality for Providers to work well.
+
+If you are feeling adventerous, you can technically use a Provider plugin separately, without the Dashboard. Make sure to then include `@uppy/provider-views/dist/style.css` (or `style.min.css`) CSS file. But this is experimental, not officialy supported and not recommened.

website/src/docs/react-dashboard-modal.md

@@ -20,8 +20,24 @@ import DashboardModal from '@uppy/react/lib/DashboardModal'
 import { DashboardModal } from '@uppy/react'
 ```
 
+## CSS
+
+The `DashboardModal` component requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+
+Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well.
+
 <!-- Make sure the old name of this section still works -->
 <a id="Options"></a>
+
 ## Props
 
 On top of all the [`@uppy/dashboard`][] options, the `<DashboardModal />` plugin adds two additional props:

website/src/docs/react-dashboard.md

@@ -20,6 +20,21 @@ import Dashboard from '@uppy/react/lib/Dashboard'
 import { Dashboard } from '@uppy/react'
 ```
 
+## CSS
+
+The `Dashboard` component requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Dashboard styles from `@uppy/dashboard/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
+⚠️ The `@uppy/dashboard` plugin includes CSS for the Dashboard itself, and the various plugins used by the Dashboard, such as ([`@uppy/status-bar`](/docs/status-bar) and [`@uppy/informer`](/docs/informer)). If you also use the `@uppy/status-bar` or `@uppy/informer` plugin directly, you should not include their CSS files, but instead only use the one from the `@uppy/dashboard` plugin.
+
+Styles for Provider plugins, like Google Drive and Instagram, are also bundled with Dashboard styles. Styles for other plugins, such as `@uppy/url` and `@uppy/webcam`, are not inluded. If you are using those, please see their docs and make sure to include styles for them as well.
+
 ## Props
 
 The `<Dashboard />` component supports all [`@uppy/dashboard`][] options as props.

website/src/docs/react-dragdrop.md

@@ -21,6 +21,17 @@ import DragDrop from '@uppy/react/lib/DragDrop';
 import { DragDrop } from '@uppy/react';
 ```
 
+## CSS
+
+The `DragDrop` component includes some simple styles, like shown in the [example](/examples/dragdrop). You can also choose not to use it and provide your own styles instead:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/drag-drop/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Drag & Drop styles from `@uppy/drag-drop/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Props
 
 The `<DragDrop />` component supports all [DragDrop][] options as props.

website/src/docs/react-progressbar.md

@@ -21,6 +21,17 @@ import ProgressBar from '@uppy/react/lib/ProgressBar'
 import { ProgressBar } from '@uppy/react'
 ```
 
+## CSS
+
+The `ProgressBar` plugin requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/progress-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/progress-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Props
 
 The `<ProgressBar />` component supports all [`@uppy/progress-bar`][] options as props.

website/src/docs/react-statusbar.md

@@ -21,6 +21,17 @@ import StatusBar from '@uppy/react/lib/StatusBar'
 import { StatusBar } from '@uppy/react'
 ```
 
+## CSS
+
+The `StatusBar` component requires the following CSS for styling:
+
+```js
+import '@uppy/core/dist/style.css'
+import '@uppy/status-bar/dist/style.css'
+```
+
+Import general Core styles from `@uppy/core/dist/style.css` first, then add the Informer styles from `@uppy/status-bar/dist/style.css`. A minified version is also available as `style.min.css` at the same path. The way to do import depends on your build system.
+
 ## Props
 
 The `<StatusBar />` component supports all [`@uppy/status-bar`][] options as props.

website/src/docs/react.md

@@ -17,6 +17,10 @@ Install from NPM:
 npm install @uppy/react
 ```
 
+## CSS
+
+Make sure to also include the nessesary CSS files for each Uppy React component you are using. Follow links for individual components docs below for details on that.
+
 ## Usage
 
 The components can be used with either [React][] or API-compatible alternatives such as [Preact][].

website/src/docs/statusbar.md

@@ -38,7 +38,7 @@ const StatusBar = Uppy.StatusBar
 
 ## CSS
 
-The `@uppy/status-bar` plugin comes with a CSS file for styling:
+The `@uppy/status-bar` plugin requires the following CSS for styling:
 
 ```js
 import '@uppy/core/dist/style.css'

website/src/docs/url.md

@@ -38,7 +38,7 @@ const Url = Uppy.Url
 
 ## CSS
 
-The `@uppy/url` plugin comes with a CSS file for styling:
+The `@uppy/url` plugin requires the following CSS for styling:
 
 ```js
 import '@uppy/core/dist/style.css'

website/src/docs/webcam.md

@@ -38,7 +38,7 @@ const Webcam = Uppy.Webcam
 
 ## CSS
 
-The `@uppy/webcam` plugin comes with a CSS file for styling:
+The `@uppy/webcam` plugin requires the following CSS for styling:
 
 ```js
 import '@uppy/core/dist/style.css'