Next.js

Every component is a client component ("use client" is built in), so you can use them directly in Server Component pages.

Root layout

Load the fonts and styles once in the root layout. Both come with the package.

app/layout.jsx

import "@truvar-ai/design-system/fonts.css";
import "@truvar-ai/design-system/styles.css";
import { Providers } from "./providers";

export default function RootLayout({ children }) {
  return (
    <html lang="en" dir="ltr">
      <body>
        <Providers locale="en-US">{children}</Providers>
      </body>
    </html>
  );
}

Providers

One small client component sets the language for every component and makes links (href) navigate with the Next.js router.

app/providers.jsx

"use client";
import { useRouter } from "next/navigation";
import { I18nProvider } from "react-aria-components";
import { RouterProvider, ToastRegion } from "@truvar-ai/design-system";

export function Providers({ locale, children }) {
  const router = useRouter();
  return (
    <I18nProvider locale={locale}>
      <RouterProvider navigate={router.push}>
        {children}
        <ToastRegion />
      </RouterProvider>
    </I18nProvider>
  );
}

Arabic pages

For Arabic, render <html lang="ar" dir="rtl"> and pass locale="ar-EG" (or your country, like ar-SA). A common setup is one root layout per language, for example app/(en)/layout.jsx and app/(ar)/layout.jsx.

Pages Router

Import the styles in pages/_app.jsx and wrap the page in the same providers, using useRouter from next/router.