Installation

Setup

Ensure your have the latest NodeJS, and a package manager: NPM or Yarn.

Also, Geist is based on the component library of framework React, which means you must also understand the basics of how to create projects with the framework

Install

yarn add @geist-ui/core

Import

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

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

Usage

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 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 using Geist on CRA for reference.

Next.js project

Next.js 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:

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 subsection to complete the configuration.

In addition, we have provided a complete Next.js application example for reference.

Font rendering on Windows [Optional]

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:

yarn add inter-ui

Add Inter Font to your project:

import 'inter-ui/inter.css'