diff --git a/examples/with-react-with-styles/package.json b/examples/with-react-with-styles/package.json
index d5c27860354ed..fc2e89ba379c9 100644
--- a/examples/with-react-with-styles/package.json
+++ b/examples/with-react-with-styles/package.json
@@ -11,8 +11,9 @@
     "next": "latest",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
-    "react-with-styles": "^2.2.0",
-    "react-with-styles-interface-aphrodite": "^3.1.1"
+    "react-with-direction": "^1.3.1",
+    "react-with-styles": "^4.1.0",
+    "react-with-styles-interface-aphrodite": "^6.0.1"
   },
   "license": "MIT"
 }
diff --git a/examples/with-react-with-styles/pages/_app.js b/examples/with-react-with-styles/pages/_app.js
new file mode 100644
index 0000000000000..42856d46fd53d
--- /dev/null
+++ b/examples/with-react-with-styles/pages/_app.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { DIRECTIONS } from 'react-with-direction'
+import AphroditeInterface from 'react-with-styles-interface-aphrodite'
+import WithStylesContext from 'react-with-styles/lib/WithStylesContext'
+import defaultTheme from '../defaultTheme'
+
+function MyApp(props) {
+  const { Component, pageProps } = props
+
+  return (
+    <WithStylesContext.Provider
+      value={{
+        stylesInterface: AphroditeInterface,
+        stylesTheme: defaultTheme,
+        direction: DIRECTIONS.LTR,
+      }}
+    >
+      <Component {...pageProps} />
+    </WithStylesContext.Provider>
+  )
+}
+
+export default MyApp
diff --git a/examples/with-react-with-styles/pages/index.js b/examples/with-react-with-styles/pages/index.js
index 49f3a719b2a21..19c7c35976b51 100644
--- a/examples/with-react-with-styles/pages/index.js
+++ b/examples/with-react-with-styles/pages/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css, withStyles } from '../withStyles'
+import { css, withStyles } from 'react-with-styles'
 
 function Home({ styles }) {
   return (
diff --git a/examples/with-react-with-styles/withStyles.js b/examples/with-react-with-styles/withStyles.js
deleted file mode 100644
index 76c424abffcd4..0000000000000
--- a/examples/with-react-with-styles/withStyles.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet'
-import aphroditeInterface from 'react-with-styles-interface-aphrodite'
-import { css, withStyles } from 'react-with-styles'
-import MyDefaultTheme from './defaultTheme'
-
-ThemedStyleSheet.registerTheme(MyDefaultTheme)
-ThemedStyleSheet.registerInterface(aphroditeInterface)
-
-export { css, withStyles, ThemedStyleSheet }