React Providers

Orbitus uses a set of global providers to manage theme, authentication, analytics, and other cross-cutting concerns.

OrbitusProvider

The root provider that wraps your application. It composes multiple essential providers into one.


// app/layout.tsx
import { OrbitusProvider } from '@orbitusdev/core/providers';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <OrbitusProvider>
          {children}
        </OrbitusProvider>
      </body>
    </html>
  );
}

OrbitusProvider includes:

ThemeProvider: Manages light/dark mode (via next-themes).
AnalyticsProvider: Initializes analytics tracking.
ServiceWorkerRegister: Registers the PWA service worker.

Included Providers

ThemeProvider

Manages the application’s color theme. It syncs with the system preference by default but allows user overrides.

Storage Key: orbitus-theme
Themes: light, dark, system

AnalyticsProvider

Initializes the configured analytics services (e.g., PostHog, Google Analytics) and provides context for tracking events.


import { useAnalytics } from '@orbitusdev/core/providers';
 
export function SignupButton() {
  const { track } = useAnalytics();
 
  return (
    <button onClick={() => track('signup_clicked')}>
      Sign Up
    </button>
  );
}

SessionProvider (Auth)

For authentication, we use SessionProvider from @orbitusdev/auth (NextAuth.js). This is typically wrapped around your application content or specific subtrees that require auth state.


import { SessionProvider } from 'next-auth/react';
 
export default function Layout({ children, session }) {
  return (
    <SessionProvider session={session}>
      {children}
    </SessionProvider>
  );
}