diff --git a/pages/en-us/guide/colors.mdx b/pages/en-us/guide/colors.mdx
index 1c5ea7d..58b762e 100644
--- a/pages/en-us/guide/colors.mdx
+++ b/pages/en-us/guide/colors.mdx
@@ -16,8 +16,8 @@ Default colors for themes.
### PRIMARY
-You can use any color in any where, all colors change with the theme.
-want to customize some colors? Read Themes to learn more.
+You can use any color anywhere, all colors change with the theme.
+If you want to customize your colors, please read Themes to learn more.
Get palette from useTheme.}>
diff --git a/pages/en-us/guide/installation.mdx b/pages/en-us/guide/installation.mdx
index b1d6158..5ede6cf 100644
--- a/pages/en-us/guide/installation.mdx
+++ b/pages/en-us/guide/installation.mdx
@@ -13,7 +13,7 @@ export const meta = {
Ensure your have the latest version of NodeJS,
and a package manager: NPM or Yarn.
-If you want to see a complete example, please browser our sample collection.
+If you want to see a complete example, please browse our sample collection.
1. Run script to download:
@@ -46,7 +46,7 @@ const Application = () => (
- 3. Use components in any where:
+ 3. Use the Zeit UI components anywhere:
@@ -64,7 +64,7 @@ const MyComponent = () =>
### Single component
-ZEIT UI supports import components when you actually need.(`tree-shaking`)
+ZEIT UI supports importing single, specific components when you need them. This is referred to as `tree-shaking`.
E.g.
@@ -85,17 +85,16 @@ const MyComponent = () =>
### Create React App
A React project created by create-react-app can
-also easily use `@zeit-ui/react`. You don't need to make any changes, just install and use.
+also easily use `@zeit-ui/react`. You don't need to make any changes, just install and use. We have a
+sample project related to create react app here.
-We have a
-sample project related to create react app here. If you want to `tree-shaking`,
-please refer to this example.
+If you want to eject certain configs, `tree-shaking`, please refer to this example.
### Next.js
-In the `next.js` project, you need to customize the app.jsx entry file to load provider.
+In the `next.js` project, you need to customize the app.jsx entry file to load the provider.
Start your NextJS project with this example.
export default ({ children }) => {children}
diff --git a/pages/en-us/guide/introduction.mdx b/pages/en-us/guide/introduction.mdx
index 932c0bc..99e2864 100644
--- a/pages/en-us/guide/introduction.mdx
+++ b/pages/en-us/guide/introduction.mdx
@@ -14,8 +14,8 @@ export const meta = {
`@zeit-ui/react` is a React implementation for styles
originating from Vercel's design.
-The design of the **Vercel** is concise and aesthetic feeling, this is an important reason for popular of Vercel.
-Now you can use them at will in React.
+The design of **Vercel** is concise and aesthetic, this is an important reason for popularity of Vercel.
+Now you can implement the styles in your own React project.
ZEIT UI is an unofficial organization, all our projects are open source.
@@ -25,7 +25,7 @@ ZEIT UI is an unofficial organization, all our projects are open source.
- Chat on Spectrum
- Report an issue
-- Welcome share your feedback and ideas. We also love PRs.
+- We welcome feedback and ideas. We also love PRs.
diff --git a/pages/en-us/guide/server-render.mdx b/pages/en-us/guide/server-render.mdx
index 427803c..c5ea11e 100644
--- a/pages/en-us/guide/server-render.mdx
+++ b/pages/en-us/guide/server-render.mdx
@@ -15,21 +15,18 @@ export const meta = {
All Components of `@zeit-ui/react` are compatible with **Server Render**. In fact, the document you see now is rendered by the server.
- You just need a SPA application?
- It is recommended to skip this section.
+ If you are looking to build a SPA (single page application),
+ please feel free to skip this section.
-Will using server-side rendering make my application lose the advantages of SPA? Maybe you can use the `hybrid render` application,
-Read
+If you are concerned about losing the advantages of a Single Page Application by implementing server-side rendering, you can use the `hybrid render` application.
+Plese read
the post from the Next.js team to learn more.
In addition, for server-side render and web applications,
-we strongly recommend that you read this famous post
-
- 7-principles-of-rich-web-applications
- from Guillermo Rauch.
+we strongly recommend that you read this famous post 7-principles-of-rich-web-applications from Guillermo Rauch.
@@ -40,7 +37,7 @@ In `next.js` framework, you need customization file `_document.js`,
please refer to Next.js document here
to create file `_document.js`.
-Then we add the following codes to the file:
+Then we add the following code to the file:
```js
import Document, { Html, Head, Main, NextScript } from 'next/document'
@@ -66,13 +63,13 @@ class MyDocument extends Document {
}
```
-Here's an examples that might help you: _document.jsx.
+Here's an example of what your `_document.js` file should look like: _document.jsx.
### Custom Server
-In the custom server, also get the style set from function `CssBaseline.flush`.
+In the custom server, also get the style set from function `CssBaseline.flush` as shown below.
```js
import React from 'react'
diff --git a/pages/en-us/guide/themes.mdx b/pages/en-us/guide/themes.mdx
index d5ab7d3..4d21a78 100644
--- a/pages/en-us/guide/themes.mdx
+++ b/pages/en-us/guide/themes.mdx
@@ -8,7 +8,7 @@ export const meta = {
## Themes
-`@zeit-ui/react` support **Dark Mode** now. You can switch theme at any time through a very simple API, no third-party styles or configs.
+`@zeit-ui/react` now support **Dark Mode**. You can switch theme at any time through a very simple API, no third-party styles or configs.
@@ -48,14 +48,14 @@ const App = () => {
### Customizing theme
-Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
+Customizing a theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`,
and all the components will change automatically.
Here is a complete sample project for reference.
-Of course, if a *component* doesn't use your customize variables, it doesn't make any additional **changes** or **rendering**.
+Of course, if a *component* doesn't use your customized variables, it doesn't make any additional **changes** or **rendering**.
-The more changes you custom, the more Components Re-Render.
+The more changes you customise, the more Components will Re-Render.
```jsx
import { CssBaseline, ZeitProvider } from '@zeit-ui/react'
@@ -103,7 +103,7 @@ If you don't use TypeScript, to learn more about preset types, see (
#### Overriding styles with `inline-style`
-Any `inline-style` works correctly on the component.
+Defining an `inline-style` will also correctly override the component.
```jsx
const MyPage = () => (