Frameworks
Getting started

Frameworks

Onset works with any React-based build tool. Setup instructions for the most common environments.

Vite

Vite is the primary development environment for Onset. CSS imports resolve natively, and HMR keeps component state across edits.

main.tsxTSX
import "@solarius/onset/styles.css";
import { ThemeProvider } from "@solarius/onset";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ThemeProvider defaultBaseColor="#6c5ce7" defaultMode="dark">
      <App />
    </ThemeProvider>
  </StrictMode>,
);

Next.js

Pages Router

Import the stylesheet and wrap with ThemeProvider in _app.tsx:

_app.tsxTSX
import "@solarius/onset/styles.css";
import { ThemeProvider } from "@solarius/onset";
import type { AppProps } from "next/app";

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider defaultBaseColor="#6c5ce7" defaultMode="dark">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

App Router

Onset's component entry ships as a client boundary, so a root layout can import ThemeProvider directly and remain a Server Component. No wrapper file or transpilePackages setting is required.

app/layout.tsxTSX
import "@solarius/onset/reset.css";
import "@solarius/onset/styles.css";
import { ThemeProvider } from "@solarius/onset";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Remix

Remix works the same as Vite. Import the stylesheet and wrap your root route with ThemeProvider:

root.tsxTSX
import "@solarius/onset/styles.css";
import { ThemeProvider } from "@solarius/onset";
import { Links, Meta, Outlet, Scripts } from "@remix-run/react";

export default function Root() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <ThemeProvider defaultBaseColor="#6c5ce7" defaultMode="dark">
          <Outlet />
        </ThemeProvider>
        <Scripts />
      </body>
    </html>
  );
}

Astro

Astro supports React components through its integration. Because Onset components are interactive, hydrate the island with a client directive such as client:load.

Layout.astroTSX
---
import "@solarius/onset/styles.css";
import OnsetShell from "../components/OnsetShell";
---

<html lang="en">
  <head />
  <body>
    <OnsetShell client:load />
  </body>
</html>
OnsetShell.tsxTSX
import { ThemeProvider } from "@solarius/onset";

export default function OnsetShell({
  children,
}: {
  children?: React.ReactNode;
}) {
  return (
    <ThemeProvider defaultBaseColor="#6c5ce7" defaultMode="dark">
      {children}
    </ThemeProvider>
  );
}

General notes

Any SPA build tool that handles CSS imports and JSX works with Onset. There are two requirements:

  • Import @solarius/onset/styles.css once at the application root
  • Wrap your component tree (or the part that uses Onset) in <ThemeProvider>

Create React App is not tested and not recommended. It has known issues with modern CSS features used by the token system.