Example with RedwoodSDK

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

Installation

Setup

RedwoodSDK is not RedwoodJS. It runs on Cloudflare Workers with React Server Components, and BolioUIProvider is already a client component. The document is a server component, so it cannot import CSS directly. Import the stylesheet as a URL and link it in the <head>, then add BolioUIProvider and CssBaseline to src/app/document.tsx:

import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'
import bolioStyles from '@bolio-ui/core/styles.css?url'

export const Document: React.FC<{ children: React.ReactNode }> = ({
  children
}) => (
  <html lang="en">
    <head>
      <link rel="stylesheet" href={bolioStyles} />
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>My app</title>
      <link rel="modulepreload" href="/src/client.tsx" />
    </head>
    <body>
      <BolioUIProvider>
        <CssBaseline />
        {children}
      </BolioUIProvider>
      <script>import("/src/client.tsx")</script>
    </body>
  </html>
)