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

export const meta = {
  title: 'introduction',
  group: 'getting-started',
  index: 5,
}

## Introduction

### About

`@geist-ui/react` is a React implementation for <Link rel="nofollow" target="_blank" href="https://github.com/geist-org/style">styles</Link>
originating from <Link rel="nofollow" target="_blank" href="https://vercel.co/design">Vercel's design</Link>.

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.

Geist UI is an An open-source design system for building modern websites and applications, all our projects are open source.

<Spacer y={3} />

### Contact

- <Link color target="_blank" rel="nofollow" href="https://spectrum.chat/geist-ui/react?tab=posts">
    Chat on Spectrum
  </Link>
- <Link color target="_blank" rel="nofollow" href="https://github.com/geist-org/react/issues/new">
    Report an issue
  </Link>
- We welcome feedback and ideas. We also love PRs.

<Spacer y={3} />

### License

Licensed under the [MIT LICENSE](https://github.com/geist-org/react/blob/master/LICENSE).

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