Example with Astro

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

pnpm create astro@latest

Then add the React integration:

pnpm astro add react

Installation

Install dependencies:

pnpm add @bolio-ui/core

Setup

Astro renders React only in islands, so there is no single root to wrap. Create a component with the BolioUIProvider, CssBaseline and styles import in src/components/BolioUI.tsx:

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

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

Then wrap the content of each island with it in an .astro file:

---
import BolioUI from '../components/BolioUI'
import Counter from '../components/Counter'
---

<BolioUI client:load>
  <Counter />
</BolioUI>

Ready to go! Start the development server:

pnpm dev