Example with Gatsby

Get started with an example

To begin, the most straightforward approach is to utilize one of the provided templates. These templates come pre-configured with the necessary settings, such as CssBaseline and other fundamental components.

If you're new to GitHub and need guidance on initiating a project using a template, you can access comprehensive instructions on how to get started on this example.

Generate new application

Follow Gatsby quick start guide to create new Gatsby application:

pnpm create gatsby

Installation

Install dependencies:

pnpm add @bolio-ui/core

Setup

Gatsby has no root component, so wrap the app with wrapRootElement to set up the BolioUIProvider and the CssBaseline on every page.

Create gatsby-browser.tsx (or .js):

import * as React from 'react'
import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'
import '@bolio-ui/core/styles.css'

export const wrapRootElement = ({ element }) => (
  <BolioUIProvider>
    <CssBaseline />
    {element}
  </BolioUIProvider>
)

Then create gatsby-ssr.tsx (or .js) to render the same wrapper on the server:

export { wrapRootElement } from './gatsby-browser'

Ready to go! Start the development server:

pnpm develop