Example with Waku

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 Waku guide to create new application:

pnpm create waku@latest

Installation

Install dependencies:

pnpm add @bolio-ui/core

With Yarn, the Waku template also needs @babel/core, which Yarn does not install as a peer dependency. Add it with yarn add @babel/core.

Setup

Waku renders layouts as React Server Components, and BolioUIProvider is already a client component, so it can be used in the layout directly. Add styles imports, BolioUIProvider and CssBaseline to src/pages/_layout.tsx:

import '../styles.css'
import '@bolio-ui/core/styles.css'

import type { ReactNode } from 'react'
import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'

export default async function RootLayout({ children }: { children: ReactNode }) {
  return (
    <BolioUIProvider>
      <CssBaseline />
      {children}
    </BolioUIProvider>
  )
}

export const getConfig = async () => {
  return {
    render: 'static'
  } as const
}

Ready to go! Start the development server:

pnpm dev