React Components and Next.js SSR

@awc-ui/react provides typed React components over AWC UI’s accessible Material Design 3 Web Components. It supports React 18+, per-component tree-shaking, client rendering, React server rendering, and Next.js SSR.

Install React components

npm install @awc-ui/react @awc-ui/core

For a client-rendered React application, import the typed wrapper:

import { MdButton, MdTextField } from "@awc-ui/react";

export function ProjectForm() {
  return (
    <form>
      <MdTextField label="Project name" required />
      <MdButton variant="filled" type="submit">
        Create project
      </MdButton>
    </form>
  );
}

Next.js SSR and React Server Components

Use the server entry in a Next.js Server Component. It renders Declarative Shadow DOM on the server, so component styles are present in the first HTML response and the custom elements hydrate on the client.

import { MdButton, MdCard } from "@awc-ui/react/server";

export default function Page() {
  return (
    <MdCard variant="elevated">
      <MdButton variant="filled">Server rendered</MdButton>
    </MdCard>
  );
}

Load the global design tokens in the root layout:

import "@awc-ui/core/css/tokens.css";

Allow Next.js to process the workspace packages:

next.config.mjs

export default {
  transpilePackages: ["@awc-ui/react", "@awc-ui/core"],
};

The repository includes a validated Next.js SSR reference app and a production-shaped Next.js showcase. See the shared Web Components SSR guide for the rendering model and hydration contract.