React

@smoothstream/react is the React adapter. It drives the shared engine from animation frames and turns presentation snapshots into React elements.

npm install @smoothstream/react

pnpm add @smoothstream/react

yarn add @smoothstream/react

bun add @smoothstream/react

Peer dependencies: react and react-dom at 18.2 or 19. Reveal CSS and the default prose theme import automatically.

Render Markdown children

Pass the accumulated Markdown string as children. Other child types throw.

import { Smoothstream } from "@smoothstream/react"; export function AssistantMessage({  text,  receiving,}: {  text: string;  receiving: boolean;}) {  return (    <Smoothstream className="assistant-markdown" receiving={receiving}>      {text}    </Smoothstream>  );}

className is applied to the Markdown root. Use it for layout and token overrides.

Chat messages

Keep the in-flight answer in streaming mode. Render stored messages as static so they appear immediately and skip the completion announcement.

<>  {history.map((message) => (    <Smoothstream key={message.id} mode="static">      {message.content}    </Smoothstream>  ))}  <Smoothstream key={active.id} receiving={active.receiving}>    {active.content}  </Smoothstream></>

When receiving becomes false, leave that streaming instance mounted until presentation finishes. Start the next assistant turn with a new key.

Next.js and SSR

The published entry is a Client Component, so you can import Smoothstream from a Server Component and still get a client boundary.

mode="static" emits settled semantic HTML on the server and hydrates in place.

In streaming mode with reducedMotion="system" (the default), the server and first hydration share an empty motion-pending shell. The browser then reads prefers-reduced-motion before Markdown appears. An empty stream can resolve that policy while it waits for the first token. Forced "always" and "never" policies are deterministic during SSR and skip the pending state.

Browser-only work such as image loading, syntax highlighting, and clipboard copy starts after mount.

Timing props remount playback

Changing interval, duration, mode, or reveal on a mounted component remounts playback so the new timing applies to a fresh schedule. Treat those as per-response settings, not knobs to twist while tokens arrive.

Full option list: API.