Skip to main content

Setup

NUI requires a single provider at the root of your application.

Next.js (App Router)​

Add NUIProvider to app/layout.tsx.

'use client';

import { NUIProvider } from '@nofinite/nui';
import '@nofinite/nui/style.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <NUIProvider defaultTheme="system">
         {children}
        </NUIProvider>
      </body>
    </html>
  );
}

Other React Setups​

Wrap your root component once.

import { NUIProvider } from '@nofinite/nui';
import '@nofinite/nui/style.css';

function App() {
  return (
    <NUIProvider defaultTheme="system">
      <YourApp />
    </NUIProvider>
  );
}

Notes​

  • The provider must be rendered once at the application root
  • All NUI components assume the provider is present
  • defaultTheme accepts light, dark, or system