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

export const meta = {
  title: 'installation',
  group: 'getting-started',
  index: 10,
}

## Installation

### Setup

Ensure your have the latest version of <Link href="https://nodejs.org/en/download/">NodeJS</Link>,
and a package manager: <Link target="_blank" rel="nofollow" href="https://www.npmjs.com/">NPM</Link> or <Link target="_blank" rel="nofollow" href="https://yarnpkg.com/">Yarn</Link>.
If you want to see a complete example, please browse our <Link target="_blank" color rel="nofollow" href="https://github.com/geist-org/react/tree/master/examples">sample collection</Link>.

<Spacer y={1} />
<Dot type="success" /> 1. Run script to download:
<Spacer y={0.8} />
<Tabs initialValue="yarn" hideDivider>
  <Tabs.Item label="Yarn" value="yarn">
    <Snippet width="400px">yarn add @geist-ui/react</Snippet>
  </Tabs.Item>
  <Tabs.Item label="Npm" value="npm">
    <Snippet width="400px">npm i @geist-ui/react</Snippet>
  </Tabs.Item>
</Tabs>
<Spacer y={1.5} />
<Dot type="success" /> 2. Import package to your project:

<Grid.Container>
<Grid xs={24} sm={16}>

```jsx
import { GeistProvider, CssBaseline } from '@geist-ui/react'

const Application = () => (
  <GeistProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </GeistProvider>
)
```

</Grid>
</Grid.Container>
<Spacer y={.5} />
<Dot type="success" /> 3. Use the Geist UI components anywhere:

<Grid.Container>
<Grid xs={24} sm={16}>

```jsx
import { Button } from '@geist-ui/react'

const MyComponent = () => <Button>Click Me</Button>
```

</Grid>
</Grid.Container>

<Spacer y={1.5} />

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

We know that some fonts do not render well on the _Windows_ side,
or do you think font rendering is not good enough for some character sets (like Chinese rendering),
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.

1. Install `inter-ui`:

<Snippet width="400px">yarn add inter-ui</Snippet>

<Spacer y={1.5} />

2. Add `Inter Font` to your project:

<Grid.Container>
<Grid xs={24} sm={16}>

```jsx
import 'inter-ui/inter.css'
```

</Grid>
</Grid.Container>

<Spacer y={1.5} />

### Single component

Geist UI supports importing single, specific components when you need them. This is referred to as `tree-shaking`.

E.g.

<Grid.Container>
<Grid xs={24} sm={16}>

```jsx
import Button from '@geist-ui/react/esm/button'

const MyComponent = () => <Button>Click Me</Button>
```

</Grid>
</Grid.Container>

<Spacer y={1.5} />

### Create React App

A React project created by <Link color target="_blank" rel="nofollow" href="https://github.com/facebook/create-react-app">create-react-app</Link> can
also easily use `@geist-ui/react`. You don't need to make any changes, just install and use. We have <Link target="_blank" color rel="nofollow" href="https://github.com/geist-org/react-getting-started">a
sample project related to create react app here</Link>.

If you want to eject certain configs, `tree-shaking`, please refer to <Link target="_blank" color rel="nofollow" href="https://github.com/geist-org/react/blob/master/examples/tree-shaking-create-react-app/README.md">this example</Link>.

<Spacer y={2.5} />

### Next.js

In the `next.js` project, you need to customize the <Link target="_blank" color rel="nofollow" href="https://nextjs.org/docs/advanced-features/custom-app">app.jsx</Link> entry file to load the provider.
Start your NextJS project with <Link target="_blank" color rel="nofollow" href="https://github.com/geist-org/react/blob/master/examples/create-next-app/README.md">this example</Link>.

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