mirror of
https://github.com/vercel/streamdown.git
synced 2026-09-19 02:18:37 +08:00
Aradhya C P
5edff75c13
* docs: update Tailwind CSS setup instructions to include additional Streamdown modules in README.md * docs: update FAQ to include additional Streamdown module sources in globals.css * docs: update Tailwind CSS configuration to include additional Streamdown module sources in getting-started.mdx * docs: update migration guide to include additional Streamdown module sources in globals.css * docs: update Tailwind CSS configuration in SKILL.md to include additional Streamdown module sources * chore: add changeset for @source documentation updates * docs: update README to include optional Streamdown plugin installation instructions * docs: update FAQ to include instructions for optional Streamdown plugins in globals.css * docs: update Tailwind CSS configuration in getting-started.mdx to clarify optional plugin integration * docs: add Tailwind CSS configuration instructions for @streamdown/code plugin * docs: update migration guide to include plugin source path instructions for Tailwind CSS * docs: add Tailwind CSS integration instructions for @streamdown/cjk plugin * docs: add Tailwind CSS integration instructions for @streamdown/math plugin * docs: add Tailwind CSS integration instructions for @streamdown/mermaid plugin * docs: update the changeset * docs: update Tailwind CSS configuration instructions for clarity * docs: update links for plugin documentation
119 lines
3.3 KiB
Plaintext
119 lines
3.3 KiB
Plaintext
---
|
|
title: Getting Started
|
|
description: Learn how to install and configure Streamdown in your React application.
|
|
type: guide
|
|
summary: Install Streamdown and render your first streaming Markdown component in under five minutes.
|
|
related:
|
|
- /docs/configuration
|
|
- /docs/usage
|
|
---
|
|
|
|
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](https://ai-sdk.dev/elements) library.
|
|
|
|
### Direct Installation
|
|
|
|
Install Streamdown using your preferred package manager:
|
|
|
|
```package-install
|
|
npm i streamdown
|
|
```
|
|
|
|
### AI Elements
|
|
|
|
Install the `message` component from AI Elements:
|
|
|
|
```package-install
|
|
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:
|
|
|
|
```css title="globals.css"
|
|
@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](/docs/plugins/code)
|
|
- CJK: [/docs/plugins/cjk](/docs/plugins/cjk)
|
|
- Math: [/docs/plugins/math](/docs/plugins/math)
|
|
- Mermaid: [/docs/plugins/mermaid](/docs/plugins/mermaid)
|
|
|
|
Example: to include the code plugin, add this to `globals.css` (adjust the relative path as needed):
|
|
|
|
```css title="globals.css"
|
|
@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:
|
|
|
|
```tsx title="app/layout.tsx"
|
|
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
|
|
```
|
|
|
|
```css title="globals.css"
|
|
/* 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`:
|
|
|
|
```js title="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`:
|
|
|
|
```js title="tailwind.config.js"
|
|
module.exports = {
|
|
content: [
|
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"../../node_modules/streamdown/dist/*.js",
|
|
],
|
|
// ... rest of your config
|
|
};
|
|
```
|