mirror of
https://github.com/vercel/streamdown.git
synced 2026-09-19 02:18:37 +08:00
Hayden Bleasel
61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
---
|
|
title: Getting Started
|
|
description: Learn how to install and configure Streamdown in your React application.
|
|
---
|
|
|
|
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";
|
|
```
|
|
|
|
Make sure the path matches the location of your `node_modules` folder relative to your CSS file.
|
|
|
|
### 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
|
|
};
|
|
```
|