Quick Start

1. Install the Package

2. Wrap with ThemeProvider

Enable theming by wrapping your app in ThemeProvider:

3. Import Global Styles

Next.js

In your globals.css or globals.scss:

Then in _app.tsx or layout.tsx:

React (Core)

In your main entry file:

4. Set Global Defaults

Customize global styling using setBorealStyleConfig (must run before rendering any components):

You can still override styles per component:

5. Import Components

React (Core):

Next.js (Optimized):

6. (Optional) Add a Custom Color Scheme

To define your own color palette, pass an array of custom schemes to the ThemeProvider using the customSchemes prop:

Set this scheme as the default using the config API:

Verify Your Setup

• All components render with styles applied
• Custom color scheme loads via ThemeProvider
• Global config values are respected
• No console errors or missing styles