Replace react-markdown with Streamdown for AI streaming text

Install

npm i streamdown

Who it's for

This skill fits people already rendering Markdown in React who are ready to switch to something built for AI streaming output. Officially Streamdown is a drop-in replacement for react-markdown, designed for AI-driven streaming. It also fits people whose project already uses Tailwind and who can change globals.css.

It does not fit people who do not yet have a React app, or who will not change the style entry. The source requires updating Tailwind's globals.css so Tailwind can detect the utility classes Streamdown uses. If those variables are undefined, the component may lack background, borders, or have incorrect spacing.

The official repository is

https://github.com/vercel/streamdown

Follow the commands already written on that page. Usage is written as using it with the AI SDK in a React app, but the visible source does not give a complete component props table.

First try in 3 minutes

Take only the one package-install path the official text writes.

Prerequisite: the current directory is a React project that may receive new dependencies, and this machine can run npm. Confirm first: npm i streamdown will change the dependency list. If you do not want to change this project yet, do not run it. This step should not change production styles and should not deploy.

Install location: at the project root, confirm those side effects, then run:

npm i streamdown

Low-risk check: after the package is installed, first have the agent point read-only at the Tailwind globals.css that must change, and explain that Tailwind must detect Streamdown's utility classes. Do not let it write CSS on its own, and do not invent @source paths or variable names that never appear. If you will render streaming text with the AI SDK, first only mark the component that will replace react-markdown, then change it after confirmation.

Success signal: streamdown appears in dependencies, and you know the next step must change globals.css. If the agent skips styles and says it can go live, stop.

Use cases

Case 1: Replace existing react-markdown with Streamdown to render AI streaming Markdown. The official install command is npm i streamdown. This fits people who already have a React render slot and want to install first, then compare replacement points. Installing writes to disk; confirm before running. The source only says it “can be used with the AI SDK” and does not list streaming interface fields; do not invent props.

Case 2: Complete Tailwind detection and style variables. The source requires updating globals.css, or utilities may not be detected; if variables are undefined, you may see missing backgrounds, borders, or wrong spacing. This fits people who already installed the package and are ready to change the style entry. Before changing CSS, back it up or preview a patch first. The source does not paste a complete variable list in this section; do not invent variable names.

Boundaries

Only one official install command is written: npm i streamdown. Do not put an installer that never appears onto the main path. It is positioned as a replacement for react-markdown, aimed at AI streaming; it does not prove use in non-React or non-Tailwind projects.

Styles are a hard prerequisite: you must update Tailwind globals.css and define those variables, or the look will be incomplete. AI SDK usage is only written as “you can use it this way”; if there is no complete sample code, do not pretend there is an official component snippet.

The official page is