diff --git a/examples/with-chakra-ui/package.json b/examples/with-chakra-ui/package.json
index 61c718c6284d4214c76c112a2f1794333c19f7bc..4d316065c70bc57be4aba80d70e6cd21c50ec01e 100644
--- a/examples/with-chakra-ui/package.json
+++ b/examples/with-chakra-ui/package.json
@@ -1,21 +1,21 @@
 {
   "name": "with-chakra-ui",
   "version": "0.1.0",
-  "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "@chakra-ui/core": "^1.0.0-rc.8",
-    "@chakra-ui/icons": "^1.0.0-rc.8",
+    "@chakra-ui/icons": "^1.0.0",
+    "@chakra-ui/react": "^1.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "emotion-theming": "^11.0.0",
     "framer-motion": "^2.9.4",
-    "@emotion/styled": "^10.0.27",
-    "emotion-theming": "^10.0.27",
-    "next": "^9.1.7",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "next": "latest",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "license": "MIT"
 }
diff --git a/examples/with-chakra-ui/src/components/CTA.js b/examples/with-chakra-ui/src/components/CTA.js
index 1652541078392ad70b18c24829449c458b5b3b30..15b2bf89900ee37b4d6c9c929361e82c8e44ec62 100644
--- a/examples/with-chakra-ui/src/components/CTA.js
+++ b/examples/with-chakra-ui/src/components/CTA.js
@@ -1,4 +1,4 @@
-import { Link as ChakraLink, Button } from '@chakra-ui/core'
+import { Link as ChakraLink, Button } from '@chakra-ui/react'
 
 import { Container } from './Container'
 
diff --git a/examples/with-chakra-ui/src/components/Container.js b/examples/with-chakra-ui/src/components/Container.js
index 5162e87271a3ab076a3d61fe16633baf65b5dc38..57b73e4419549b63f76ef4a08f1ecebbf753d5a1 100644
--- a/examples/with-chakra-ui/src/components/Container.js
+++ b/examples/with-chakra-ui/src/components/Container.js
@@ -1,4 +1,4 @@
-import { Flex, useColorMode } from '@chakra-ui/core'
+import { Flex, useColorMode } from '@chakra-ui/react'
 
 export const Container = (props) => {
   const { colorMode } = useColorMode()
diff --git a/examples/with-chakra-ui/src/components/DarkModeSwitch.js b/examples/with-chakra-ui/src/components/DarkModeSwitch.js
index f19e44a6c7e6365ede653494cf73ff3106e3d1f7..7edd444801c90f3d186105cce56e67bb480cb4ea 100644
--- a/examples/with-chakra-ui/src/components/DarkModeSwitch.js
+++ b/examples/with-chakra-ui/src/components/DarkModeSwitch.js
@@ -1,4 +1,4 @@
-import { useColorMode, Switch } from '@chakra-ui/core'
+import { useColorMode, Switch } from '@chakra-ui/react'
 
 export const DarkModeSwitch = () => {
   const { colorMode, toggleColorMode } = useColorMode()
diff --git a/examples/with-chakra-ui/src/components/Footer.js b/examples/with-chakra-ui/src/components/Footer.js
index 84810a52bed6b8437c95acd37d372bacb58fa0b9..3b254626539d5ad812c31656707e18bdfea5f4b3 100644
--- a/examples/with-chakra-ui/src/components/Footer.js
+++ b/examples/with-chakra-ui/src/components/Footer.js
@@ -1,3 +1,3 @@
-import { Flex } from '@chakra-ui/core'
+import { Flex } from '@chakra-ui/react'
 
 export const Footer = (props) => <Flex as="footer" py="8rem" {...props} />
diff --git a/examples/with-chakra-ui/src/components/Hero.js b/examples/with-chakra-ui/src/components/Hero.js
index cb839034a846b579e941df9f566c8a6813806d06..c20fb39b33f13f90d3035caafb3ad7d6db1ffa5f 100644
--- a/examples/with-chakra-ui/src/components/Hero.js
+++ b/examples/with-chakra-ui/src/components/Hero.js
@@ -1,4 +1,4 @@
-import { Flex, Heading } from '@chakra-ui/core'
+import { Flex, Heading } from '@chakra-ui/react'
 
 export const Hero = ({ title }) => (
   <Flex justifyContent="center" alignItems="center" height="100vh">
diff --git a/examples/with-chakra-ui/src/components/Main.js b/examples/with-chakra-ui/src/components/Main.js
index ad88b276668a1929f6c2555939f5ecadf9684ef1..a89329e53d7aea38f1c945706f3040eda9378d09 100644
--- a/examples/with-chakra-ui/src/components/Main.js
+++ b/examples/with-chakra-ui/src/components/Main.js
@@ -1,4 +1,4 @@
-import { Stack } from '@chakra-ui/core'
+import { Stack } from '@chakra-ui/react'
 
 export const Main = (props) => (
   <Stack
diff --git a/examples/with-chakra-ui/src/pages/_app.js b/examples/with-chakra-ui/src/pages/_app.js
index 3d12311233d3a72d965b9d22eda3d08c9380eec9..5d59ead733e0beb909f9b76e733c1403f5c8f0f1 100644
--- a/examples/with-chakra-ui/src/pages/_app.js
+++ b/examples/with-chakra-ui/src/pages/_app.js
@@ -1,4 +1,4 @@
-import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core'
+import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/react'
 
 import theme from '../theme'
 
diff --git a/examples/with-chakra-ui/src/pages/index.js b/examples/with-chakra-ui/src/pages/index.js
index b8f6e18efc9015a274eadf7b3b5670e2cfe04e0d..37fffc2d48ec322b39568cacc69cb7954647c1fe 100644
--- a/examples/with-chakra-ui/src/pages/index.js
+++ b/examples/with-chakra-ui/src/pages/index.js
@@ -6,8 +6,8 @@ import {
   List,
   ListIcon,
   ListItem,
-} from '@chakra-ui/core'
-
+} from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
 import { Hero } from '../components/Hero'
 import { Container } from '../components/Container'
 import { Main } from '../components/Main'
@@ -32,13 +32,13 @@ const Index = () => (
             flexGrow={1}
             mr={2}
           >
-            Chakra UI <Icon name="external-link" mx="2px" />
+            Chakra UI <Icon as={ExternalLinkIcon} mx="2px" />
           </ChakraLink>
         </ListItem>
         <ListItem>
           <ListIcon icon="check-circle" color="green.500" />
           <ChakraLink isExternal href="https://nextjs.org" flexGrow={1} mr={2}>
-            Next.js <Icon name="external-link" mx="2px" />
+            Next.js <Icon as={ExternalLinkIcon} mx="2px" />
           </ChakraLink>
         </ListItem>
       </List>
diff --git a/examples/with-chakra-ui/src/theme.js b/examples/with-chakra-ui/src/theme.js
index 55da7272037a19c183da1231d816a00e81956894..a5ce7e8211c5168d9f0639106f955c54d765c12e 100644
--- a/examples/with-chakra-ui/src/theme.js
+++ b/examples/with-chakra-ui/src/theme.js
@@ -1,4 +1,4 @@
-import { theme as chakraTheme } from '@chakra-ui/core'
+import { theme as chakraTheme } from '@chakra-ui/react'
 
 const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` }