docs: transitioned remaining package manager commands to CodeGroups

Author: dombavetta

package.json

@@ -39,6 +39,7 @@
     "deploy-storybook": "storybook-to-ghpages -- --out=.out",
     "now-build-storybook": "build-storybook -o dist/storybook",
     "docs:dev": "yarn docs-dev",
+    "docs:lint": "yarn workspace chakra-ui-docs lint",
     "theme:dev": "yarn workspace @chakra-ui/theme-vue build",
     "docs-dev": "yarn workspace chakra-ui-docs dev",
     "evalbundle": "bundlesize"

website/pages/auto-import-components.mdx

@@ -1,4 +1,5 @@
 import SEO from '../components/SEO'
+import { CodeGroup, CodeTab } from '~/components/code'
 
 <SEO
   title="Auto-import Chakra components"
@@ -13,16 +14,15 @@ This provides a better developer experience without sacrificing your application
 
 
 ## Installation
-With Yarn:
 
-```bash
-yarn add chakra-loader -D
-```
-With NPM:
-
-```bash
-npm install chakra-loader --save-dev
-```
+<CodeGroup lang="bash">
+  <CodeTab label="Yarn">
+    yarn add chakra-loader
+  </CodeTab>
+  <CodeTab label="NPM">
+    npm install chakra-loader
+  </CodeTab>
+</CodeGroup>
 
 ## Usage
 If you're using webpack with Vue CLI or Nuxt.js for your Chakra project, import the `ChakraLoaderPlugin` from the `chakra-loader` package and add it to your `vue.config.js` file.

website/pages/contributing.mdx

@@ -1,4 +1,5 @@
 import SEO from '../components/SEO'
+import { CodeGroup, CodeTab } from '~/components/code'
 
 <SEO
   title="Contributing to Chakra UI Vue"
@@ -49,9 +50,16 @@ Chakra UI uses NuxtJS for its documentation website. Thank you in advance and
 cheers for contributing to our documentation! We created a simple command to run
 it.
 
-```sh
-yarn docs:dev
-```
+<br/>
+
+<CodeGroup lang="sh">
+  <CodeTab label="Yarn">
+    yarn docs:dev
+  </CodeTab>
+  <CodeTab label="NPM">
+    npm run docs:dev
+  </CodeTab>
+</CodeGroup>
 
 You can now access the documentation site locally. Changes to the docs will hot
 reload the site.
@@ -60,13 +68,31 @@ reload the site.
 
 Project setup
 
-```sh
+<br/>
+
+<CodeGroup lang="sh">
+  <CodeTab label="Yarn">
+
+```
 yarn bootstrap # Installs all dependencies and links packages
 yarn dev # Runs dev build
 yarn storybook # Starts storybook
 yarn test # Runs tests
 ```
 
+  </CodeTab>
+  <CodeTab label="NPM">
+
+```
+npm run bootstrap # Installs all dependencies and links packages
+npm run dev # Runs dev build
+npm run storybook # Starts storybook
+npm run test # Runs tests
+```
+
+  </CodeTab>
+</CodeGroup>
+
 ## Code of Conduct
 
 ### Our Pledge

website/pages/getting-started.mdx

@@ -11,7 +11,7 @@ Install Chakra UI Vue and it's peer dependency, `emotion`
     yarn add @chakra-ui/vue emotion
   </CodeTab>
   <CodeTab label="NPM">
-    npm install @chakra-ui/vue emotion --save
+    npm install @chakra-ui/vue emotion
   </CodeTab>
 </CodeGroup>
 

website/pages/with-nuxt.mdx

@@ -1,4 +1,5 @@
 import SEO from '../components/SEO'
+import { CodeGroup, CodeTab } from '~/components/code'
 
 <SEO
   title="Using UI with Nuxt.js"
@@ -14,9 +15,16 @@ import SEO from '../components/SEO'
 With Nuxt.js we need to install the [`@nuxtjs/emotion`](https://github.com/nuxt-community/emotion-module) package to enable your component
 styles to be generated and injected in the server build.
 
-```bash
-yarn add @chakra-ui/nuxt @nuxtjs/emotion
-```
+<br/>
+
+<CodeGroup lang="bash">
+  <CodeTab label="Yarn">
+    yarn add @chakra-ui/nuxt @nuxtjs/emotion
+  </CodeTab>
+  <CodeTab label="NPM">
+    npm install @chakra-ui/nuxt @nuxtjs/emotion
+  </CodeTab>
+</CodeGroup>
 
 ## Registering the Chakra module
 We then register the Chakra UI module in the `modules` key of our `nuxt.config.js`.