Getting Started

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

Requirements

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

Installation

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

Direct Installation

Install Streamdown using your preferred package manager:

npm i streamdown

AI Elements

Install the message component from AI Elements:

npx ai-elements@latest add message

Tailwind CSS Configuration

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.

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
};