Skip to content
oks-ui

Features

React components for Next.js and Server Components

Where the client boundary goes, the error you get if you miss it, and what the CSS costs.

The short answer

oks-ui works in the Next.js App Router and with static export. Its components have no per-component "use client" markers, so render them from files that start with "use client"; a Server Component can still compose those files, and Next prerenders their HTML. Import oks-ui/styles.css once in your root layout, or import each component's own stylesheet.

Tested, not assumed

Everything on this page comes from a new Next.js app built on with Next.js 16.3.0 (Turbopack), React 19.2.8 and oks-ui 1.2.1, using static export. Only the App Router was tested.

1. Put the client boundary around oks-ui

Any file that renders an oks-ui component starts with "use client". A Server Component then renders that file as usual, and Next still prerenders its HTML: the built page contained the button markup and its label.

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

export function CtaButton() {
  return <Button color="primary">Get started</Button>;
}
// app/page.tsx  (a Server Component, no "use client")
import { CtaButton } from "./CtaButton";

export default function Page() {
  return (
    <main>
      <h1>Welcome</h1>
      <CtaButton />
    </main>
  );
}

If you forget it

Importing a component straight into a Server Component fails the build. This is the real message from the test app:

// app/page.tsx  (a Server Component)
import { Button } from "oks-ui/button";   // <- imported directly

export default function Page() {
  return <Button color="primary">Direct</Button>;
}

// next build:
// Error occurred prerendering page "/".
// TypeError: (0 , c.useState) is not a function or its return value is not iterable

The fix is the pattern above: move the import into a file that starts with "use client".

2. Load the CSS, or nothing is styled

With Turbopack, the stylesheet import inside a component’s JavaScript is not followed. In the test app, a client component that imported a Modal without adding any CSS shipped no stylesheet at all. You have two options, and they differ in size:

  • Everything, once. Import oks-ui/styles.css in the root layout. In the test app that was about 45 KB gzipped (352 KB raw), containing every component’s styles and the design tokens, on every page.
  • Only what you use. Import each component’s own stylesheet next to it. The Button stylesheet was about 2.7 KB gzipped in the same build.
// app/layout.tsx
import "oks-ui/styles.css";

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

3. Static export

The same app built with output: "export" and prerendered every page. oks-ui needs no configuration of its own; these are Next’s own settings for a static host:

// next.config.mjs, for static export
export default {
  output: "export",
  images: { unoptimized: true },
  trailingSlash: true, // if you host on S3 and CloudFront
};

Go further

Questions

Does oks-ui work with the Next.js App Router?

Yes. It was tested on 24 September 2026 in a new Next.js 16.3.0 app with React 19.2.8 and oks-ui 1.2.1, using Turbopack and static export. Only the App Router was tested.

Do I need "use client" to use oks-ui in Next.js?

Yes, in any file that renders an oks-ui component. The package has no per-component client markers, so put "use client" at the top of the file that imports the component. Server Components can still render that file, and Next still prerenders its initial HTML.

Why do I get "useState is not a function" with oks-ui in Next.js?

You imported an oks-ui component into a Server Component. The component uses React state, which does not exist on the server, so the build fails with TypeError: (0, c.useState) is not a function or its return value is not iterable. Move the import into a file that starts with "use client" and render that file from your Server Component.

Why are my oks-ui components unstyled in Next.js?

Under Next.js with Turbopack the stylesheet import inside a component's JavaScript is not followed, so nothing loads unless you add the CSS yourself. Import oks-ui/styles.css once in your root layout, or add each component's own CSS, for example import "oks-ui/button.css".

Does oks-ui work with Next.js static export?

Yes. A test app with output: "export" built and prerendered an oks-ui Button into the static HTML. Set images.unoptimized to true, and trailingSlash to true if you host on S3 and CloudFront. oks-ui itself needs no special configuration.

Keep exploring

Figures and claims on this page were last checked on 2026-09-24.