Frameworks

Fuji components never import framework APIs, so the same package works in every React setup. Install once, import the stylesheet at the top of the tree, and wrap your app in FujiProvider.

bash

npm install @fujiui/react

Next.js (App Router)

Import the stylesheet once and wrap the root layout in FujiProvider. Components work in Server and Client Components alike; anything with state or handlers still needs a Client Component boundary, per normal React Server Component rules.

tsx

// app/layout.tsx
import "@fujiui/react/styles.css";
import { FujiProvider } from "@fujiui/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <FujiProvider defaultTheme="light" defaultRadius="cornered">
          {children}
        </FujiProvider>
      </body>
    </html>
  );
}

Vite

No Vite-specific configuration is required. Fuji ships as plain ESM with CSS variables, so it works with the default React or React-SWC templates out of the box.

tsx

// src/main.tsx
import "@fujiui/react/styles.css";
import { FujiProvider } from "@fujiui/react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <FujiProvider>
    <App />
  </FujiProvider>,
);

Standard React

Fuji has no router or meta-framework dependency, so it works in any React 18+ DOM tree: Create React App, or a bare Webpack or Rspack setup.

tsx

import "@fujiui/react/styles.css";
import { FujiProvider, Button } from "@fujiui/react";

export default function App() {
  return (
    <FujiProvider>
      <Button>Get started</Button>
    </FujiProvider>
  );
}