> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rixxui.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Place Rixx UI client renderers and server-safe helpers correctly in the Next.js App Router.
Import global styles from the root layout.
```tsx theme={null}
// app/layout.tsx
import type { ReactNode } from "react";
import "@rixx-ui/react/styles.css";
export default function RootLayout({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
Render interactive content from a Client Component.
```tsx theme={null}
// app/assistant-message.tsx
"use client";
import { RUIRenderer, type RUIStreamStatus } from "@rixx-ui/react";
export function AssistantMessage({
source,
status,
}: {
source: string;
status: RUIStreamStatus;
}) {
return {source};
}
```
Server Components may import server-safe helpers without importing React
components:
```tsx theme={null}
import { fromMarkdown } from "@rixx-ui/react/server";
export default function Page() {
const source = fromMarkdown("# Server-produced source");
return ;
}
```
Do not pass functions such as `urlPolicy`, `imagePolicy`, or action handlers
across the Server Component serialization boundary. Define them in the Client
Component. Keep model credentials and provider calls in server-only host code;
they are not renderer configuration.