Skip to content
oks-ui

Frameworks

Next.js

oks-ui works with the App Router and with static export. There are three things to know.

1. Client boundaries

oks-ui ships one bundled entry with no per-component "use client" markers. Any file that renders an oks-ui component needs its own "use client". Server Components can still compose those client components, and Next still prerenders their initial HTML.

"use client";
import { Button } from "oks-ui/button";
import "oks-ui/button.css";

export function CtaButton() {
  return <Button color="primary">Get started</Button>;
}

2. CSS imports

Import oks-ui/styles.css once in your root layout, or — for the smallest bundle — import each component's .css alongside it. Turbopack does not follow the stylesheet import that lives inside oks-ui/button, so add the .css line explicitly.

3. The no-flash theme script

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Script id="theme" strategy="beforeInteractive">{`
          try {
            var s = localStorage.getItem("theme");
            var d = s === "dark" ||
              (!s && matchMedia("(prefers-color-scheme: dark)").matches);
            document.documentElement.setAttribute("data-theme", d ? "dark" : "light");
          } catch (e) {}
        `}</Script>
        {children}
      </body>
    </html>
  );
}

This whole site is a Next.js static export built on oks-ui — the source is the reference implementation.