SSR and Next.js

EnterUI supports React server rendering. Static components render on the server as normal HTML. Interactive primitives that depend on browser behavior should be rendered from Client Components when they are used directly in Next.js App Router pages.

#App Router CSS Imports

Import the FroggDesign theme before EnterUI CSS in the root layout.

import "@froggdesign/theme/styles.css";
import "@froggdesign/enter-ui-react/styles.css";

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

#Server Components

Static composition can stay in Server Components.

import { Badge, Card, CardContent } from "@froggdesign/enter-ui-react";

export default function DocsPage() {
  return (
    <Card>
      <CardContent>
        <Badge variant="success">Ready</Badge>
      </CardContent>
    </Card>
  );
}

#Client Components

Use "use client" for stateful or event-driven composition: dialogs, menus, selects, tabs with click state, command menus, popovers, tooltips, toasts, sliders, date pickers, and custom form interactions.

"use client";

import {
  Button,
  Dialog,
  DialogContent,
  DialogTitle,
  DialogTrigger,
} from "@froggdesign/enter-ui-react";

export function SettingsDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open settings</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogTitle>Settings</DialogTitle>
      </DialogContent>
    </Dialog>
  );
}

#Hydration Notes

• Keep controlled values stable between server and client.
• Avoid reading browser-only APIs at module scope.
• Place theme CSS imports once, above component CSS.
• For portal components, assert behavior in browser or jsdom tests rather than relying only on server markup.