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
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:
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'