diff --git a/README.md b/README.md
index 75cb821995..f8816b8e64 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,8 @@
-
-
- 
-
-
+Base Web React Components
-Base Web React Components
+- [Documentation](https://baseweb.design)
+- [Component catalog](https://baseweb.design/ladle)
+- [Stackblitz playground](https://baseweb.design/new)
⚠️ **Maintenance status**. We are limiting our engagement with this repository while still mirroring our internal development. For more details, please check [Open Source Engagement and Future](https://baseweb.design/blog/open-source-engagement/). If you are an Uber developer and looking to open an issue, use this [link](https://t.uber.com/ui-platform-bug-2) or [contribute](https://p.uber.com/base-code).
@@ -24,10 +22,10 @@ Add `baseui` and its peer dependencies to your project:
```bash
# using pnpm
-pnpm add baseui styletron-react styletron-engine-monolithic
+pnpm add baseui@next styletron-react styletron-engine-monolithic
# using npm
-npm install baseui styletron-react styletron-engine-monolithic
+npm install baseui@next styletron-react styletron-engine-monolithic
```
```javascript
diff --git a/documentation-site/.gitignore b/documentation-site/.gitignore
index fd3dbb571a..814c118817 100644
--- a/documentation-site/.gitignore
+++ b/documentation-site/.gitignore
@@ -4,7 +4,7 @@
/node_modules
/.pnp
.pnp.js
-.yarn/install-state.gz
+.pnpm/install-state.gz
# testing
/coverage
@@ -22,8 +22,8 @@
# debug
npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+pnpm-debug.log*
+pnpm-error.log*
# local env files
.env*.local
diff --git a/documentation-site/examples/form-control/validation.tsx b/documentation-site/examples/form-control/validation.tsx
index 2847217e21..b16ce84bf0 100644
--- a/documentation-site/examples/form-control/validation.tsx
+++ b/documentation-site/examples/form-control/validation.tsx
@@ -3,7 +3,7 @@ import {FormControl} from 'baseui/form-control';
import {Input} from 'baseui/input';
import {useStyletron} from 'baseui';
import {Alert} from 'baseui/icon';
-import {validate as validateEmail} from 'email-validator'; // add this package to your repo: `$ yarn add email-validator`
+import {validate as validateEmail} from 'email-validator'; // add this package to your repo: `$ pnpm add email-validator`
function Negative() {
const [css, theme] = useStyletron();
diff --git a/documentation-site/pages/blog/getting-started-with-base-web/index.mdx b/documentation-site/pages/blog/getting-started-with-base-web/index.mdx
index ce4a300ce4..637ba232c4 100644
--- a/documentation-site/pages/blog/getting-started-with-base-web/index.mdx
+++ b/documentation-site/pages/blog/getting-started-with-base-web/index.mdx
@@ -29,7 +29,7 @@ cd password-generator
Next, we need to pull in the packages for Base Web.
```shell
-yarn add baseui styletron-engine-atomic styletron-react
+pnpm add baseui@next styletron-engine-monolithic styletron-react
```
You might be asking "What's Styletron?". [Styletron](https://www.styletron.org) is a CSS-in-JS solution for component-oriented styling.
@@ -38,7 +38,7 @@ As per [Base Web's set up instructions](/getting-started/setup/), we need to wra
```js
import { Provider as StyletronProvider } from "styletron-react";
-import { Client as Styletron } from "styletron-engine-atomic";
+import { Client as Styletron } from "styletron-engine-monolithic";
import { LightTheme, BaseProvider } from "baseui";
const engine = new Styletron();
diff --git a/documentation-site/pages/blog/introducing-react-view/index.mdx b/documentation-site/pages/blog/introducing-react-view/index.mdx
index 7ca8639792..0eca054fc4 100644
--- a/documentation-site/pages/blog/introducing-react-view/index.mdx
+++ b/documentation-site/pages/blog/introducing-react-view/index.mdx
@@ -82,7 +82,7 @@ All these parts work in harmony—an update to one of them synchronizes the stat
React View is open sourced as [uber/react-view](https://github.com/uber/react-view) and you can get it from npm right now:
```
-yarn add react-view
+pnpm add react-view
```
## Wait...But Why?
diff --git a/documentation-site/pages/getting-started/setup.mdx b/documentation-site/pages/getting-started/setup.mdx
index 9465d6fa3b..d3e00e9eaf 100644
--- a/documentation-site/pages/getting-started/setup.mdx
+++ b/documentation-site/pages/getting-started/setup.mdx
@@ -7,20 +7,20 @@ export default Layout;
## Installing Base Web
+You can quickly test Base Web by using [StackBlitz](https://baseweb.design/new).
+
Base Web is available on npm as [baseui](https://npmjs.com/package/baseui). This single
package contains all Base Web components.
```bash
-# using yarn
-yarn add baseui styletron-engine-atomic styletron-react
+# using pnpm
+pnpm add baseui@next styletron-engine-monolithic styletron-react
# using npm
-npm install baseui styletron-engine-atomic styletron-react
+npm install baseui@next styletron-engine-monolithic styletron-react
```
-Base Web ships with both Flow and TypeScript support.
-
-Our React components don't use [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html).
+Base Web ships with TypeScript support.
[Styletron](https://www.styletron.org/) is a toolkit for component-oriented styling, part of the CSS-in-JS family. Base Web requires Styletron as a peer dependency (it uses it to apply styles to components), so you need to add Styletron as a dependency too.
@@ -47,8 +47,8 @@ Assuming you already have ESLint installed, run:
# npm
npm install eslint-plugin-baseui --save-dev
-# yarn
-yarn add eslint-plugin-baseui --dev
+# pnpm
+pnpm add eslint-plugin-baseui --dev
```
Then add it to your ESLint configuration:
@@ -87,7 +87,7 @@ In order to use Base Web, you need to do a small setup and wrap the root of your
application with `StyletronProvider` and [`BaseProvider`](https://baseweb.design/components/base-provider) components:
```javascript
-import { Client as Styletron } from "styletron-engine-atomic";
+import { Client as Styletron } from "styletron-engine-monolithic";
import { Provider as StyletronProvider } from "styletron-react";
import { LightTheme, BaseProvider, styled } from "baseui";
import { StatefulInput } from "baseui/input";
diff --git a/documentation-site/pages/guides/bidirectionality.mdx b/documentation-site/pages/guides/bidirectionality.mdx
index 1a9d967429..10ebcc69f2 100644
--- a/documentation-site/pages/guides/bidirectionality.mdx
+++ b/documentation-site/pages/guides/bidirectionality.mdx
@@ -32,7 +32,7 @@ Add the `dir` attribute to the `body` of your application:
You have to change the `direction` property in the Base Web theme:
```javascript
-import { Client as Styletron } from "styletron-engine-atomic";
+import { Client as Styletron } from "styletron-engine-monolithic";
import { Provider as StyletronProvider } from "styletron-react";
import { LightTheme, BaseProvider } from "baseui";
import { StatefulInput } from "baseui/input";
diff --git a/documentation-site/pages/guides/theming.mdx b/documentation-site/pages/guides/theming.mdx
index efa7d109e7..b22c2a123b 100644
--- a/documentation-site/pages/guides/theming.mdx
+++ b/documentation-site/pages/guides/theming.mdx
@@ -121,7 +121,7 @@ While `ThemeProvider` will provide your theme object to any descendent Base Web
import React from "react";
import { BaseProvider, LightTheme } from "baseui";
import { Provider as StyletronProvider } from "styletron-react";
-import { Client as Styletron } from "styletron-engine-atomic";
+import { Client as Styletron } from "styletron-engine-monolithic";
const engine = new Styletron();