Get up and running with Streamdown in minutes. This guide will walk you through installation, configuration, and your first implementation.

• Node.js >= 18
• React >= 19.1.1 (compatible with React 18+)
• Tailwind CSS (for styling)

You can install Streamdown directly, or use it as part of the AI Elements library.

Direct Installation

Install Streamdown using your preferred package manager:

AI Elements

Install the message component from AI Elements:

Streamdown uses Tailwind CSS for styling. To ensure the styles are properly applied, you need to configure your Tailwind setup to include Streamdown's source files.

Tailwind v4

Add the following CSS source directive to your globals.css or main CSS file:

@source "../node_modules/streamdown/dist/*.js";

The path must be relative from your CSS file to the node_modules folder containing streamdown. In a standard Next.js project where globals.css lives in app/, the default path above should work.

If you install optional plugins, add their matching @source lines only for packages you've installed. See the plugin pages for exact paths and examples:

• Code: /docs/plugins/code
• CJK: /docs/plugins/cjk
• Math: /docs/plugins/math
• Mermaid: /docs/plugins/mermaid

Example: to include the code plugin, add this to globals.css (adjust the relative path as needed):

@source "../node_modules/@streamdown/code/dist/*.js";

Animation styles

If you're using the built-in animated prop for streaming animation, import the animation CSS in your app:

import "streamdown/styles.css";

Monorepo setup

In a monorepo (npm workspaces, Turbo, pnpm, etc.), dependencies are typically hoisted to the root node_modules. You need to adjust the relative path to point there:

monorepo/
├── node_modules/streamdown/  ← hoisted here
├── apps/
│   └── web/
│       └── app/
│           └── globals.css   ← your CSS file

/* apps/web/app/globals.css → 3 levels up to reach root node_modules */
@source "../../../node_modules/streamdown/dist/*.js";

Adjust the number of ../ segments based on where your CSS file lives relative to the root node_modules.

Tailwind v3

Add Streamdown to your content array in your tailwind.config.js:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/streamdown/dist/*.js",
  ],
  // ... rest of your config
};

In a monorepo, adjust the path to reach the root node_modules:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "../../node_modules/streamdown/dist/*.js",
  ],
  // ... rest of your config
};