Next.js

Forme works in any React project with Tailwind v4. Next.js is the smoothest case, because the copy-based model suits the App Router exactly: the code you installed is code your bundler already understands.

Setup#

npx create-next-app@latest my-app --typescript --tailwind
cd my-app
npx shadcn@latest init
npx shadcn@latest add @forme/button

Then import the tokens in src/app/globals.css, after Tailwind:

@import "tailwindcss";
@import "./components/forme/foundation.css";

That is the entire Next.js-specific setup. There is nothing to add to next.config, no transpile list and no external package declaration, because there is no package to transpile.

Server and client components#

Forme components are server components unless they genuinely need state. That means you can render a whole form from a server component and add "use client" only to the leaf that has an event handler.

When you do need interactivity, put the client boundary at the smallest sensible place. This is the common mistake:

// Avoid: the whole shell becomes client-side JavaScript.
"use client";
export function CheckoutPage() {
  /* ... */
}

// Better: the page stays a server component.
export default function CheckoutPage() {
  return (
    <Shell>
      <OrderSummary />
      <PayButton />   {/* "use client" */}
    </Shell>
  );
}

Fonts#

Forme does not ship or require a webfont, and its components only ever ask for your --font-sans and --font-mono. If you use next/font, set those two variables on html and everything else follows.