import Layout from 'lib/components/layout'
import { Code, Spacer, Tabs, Dot, Snippet, Text } from 'components'

export const meta = {
  title: 'Installation',
  group: 'Getting Started',
  index: 10,
}

## Installation

### Setup

Ensure your have the latest [NodeJS](https://nodejs.org/en/download/),
and a package manager: [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/).

Also, Geist is based on the component library of framework React, which means you must also understand the basics of how to [create projects](https://reactjs.org/docs/hello-world.html) with the framework

<h4>
  <Dot type="success">Install</Dot>
</h4>

<Tabs initialValue="yarn" hideDivider hideBorder align="flex-end" mt="-46px">
  <Tabs.Item label="Yarn" value="yarn">
    <Snippet>yarn add @geist-ui/core</Snippet>
  </Tabs.Item>
  <Tabs.Item label="Npm" value="npm">
    <Snippet>npm i @geist-ui/core</Snippet>
  </Tabs.Item>
</Tabs>
<Spacer h={0.5} />
<h4>
  <Dot type="success">Import</Dot>
</h4>

```jsx
// NAME: /src/app.js
import { GeistProvider, CssBaseline } from '@geist-ui/core'

export default () => (
  <GeistProvider>
    <CssBaseline /> // --> base styles
    <AppComponent /> // --> your application
  </GeistProvider>
)
```

<Spacer h={0} mb="8px" />
<h4>
  <Dot type="success">Usage</Dot>
</h4>

```jsx
import { Button, Page, Text } from '@geist-ui/core'

const Home = () => (
  <Page>
    <Text h1>Home Page</Text>
    <Button>Submit</Button>
  </Page>
)
```

### CRA project

[create-react-app](https://github.com/facebook/create-react-app) is the most common scaffold for creating React projects,
and it can drastically reduce the amount of time users spend configuring the toolchain.
For all CRA projects, users do not have to make any configuration changes and simply import the package.

In addition, here is a complete [project example](https://github.com/geist-org/react-getting-started) using Geist on CRA for reference.

### Next.js project

[Next.js](https://nextjs.org/) is a React server-side rendering framework. Using Geist on framework Next.js requires custom `_app.jsx` files,
Once the project has been initialized, add the `/pages/_app.jsx` file to the `/pages` folder and add the following content:

```jsx
// NAME:pages/_app.jsx
import { GeistProvider, CssBaseline } from '@geist-ui/core'

const App = ({ Component, pageProps }) => {
  return (
    <GeistProvider>
      <CssBaseline />
      <Component {...pageProps} />
    </GeistProvider>
  )
}

export default App
```

If you need server-side rendering in Next.js project,
please refer to the [Server-side rendering](/en-us/guide/server-render) subsection to complete the configuration.

In addition, we have provided a complete [Next.js application](https://github.com/geist-org/geist-ui/blob/master/examples/create-next-app/README.md) example for reference.

<Text h3>
  Font rendering on Windows{' '}
  <Text span type="secondary" font=".75em" style={{ textTransform: 'uppercase' }}>
    [Optional]
  </Text>
</Text>

Some fonts in Web applications do not render best on the _Windows_ platform, or you may think font rendering is not good enough for some character sets (Chinese, Japanese etc.). In this case, you can introduce additional font packages to optimize the rendering:

> You don't need to modify any CSS files or declare fonts.

#### Install `inter-ui`:

<Snippet>yarn add inter-ui</Snippet>

#### Add `Inter Font` to your project:

<Code block my={0} width="100%">
  <span className="token keyword module">import</span>{' '}
  <span className="token string">'inter-ui/inter.css'</span>
</Code>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
