npx skills add ...
npx skills add vercel/streamdown --skill streamdown
npx skills add vercel/streamdown --skill streamdown
Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (5) Configuring security, link safety, or custom HTML tags, (6) Using carets, static mode, or custom components, (7) Troubleshooting Tailwind, Shiki, or Vite issues.
Streaming-optimized React Markdown renderer. Drop-in replacement for react-markdown with built-in streaming support, security, and interactive controls.
Optional plugins (install only what's needed):
This is the most commonly missed step. Streamdown uses Tailwind for styling and the dist files must be scanned.
Tailwind v4 — add to globals.css:
Add plugin @source lines only for packages you have installed (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths:
@source "../node_modules/@streamdown/code/dist/*.js";@source "../node_modules/@streamdown/cjk/dist/*.js";@source "../node_modules/@streamdown/math/dist/*.js";@source "../node_modules/@streamdown/mermaid/dist/*.js";Tailwind v3 — add to tailwind.config.js:
| Prop | Type | Default | Purpose |
|---|---|---|---|
children | string | — | Markdown content |
mode | "streaming" | "static" | "streaming" | Rendering mode |
plugins | { code?, mermaid?, math?, cjk? } | — | Feature plugins |
isAnimating | boolean | false | Streaming indicator |
caret | "block" | "circle" | — | Cursor style |
components | Components | — | Custom element overrides |
controls | boolean | object | true | Interactive buttons |
linkSafety | LinkSafetyConfig | { enabled: true } | Link confirmation modal |
shikiTheme | [light, dark] | ['github-light', 'github-dark'] | Code themes |
className | string | — | Container class |
allowedElements | string[] | all | Tag names to allow |
disallowedElements | string[] | [] | Tag names to disallow |
allowElement | AllowElement | — | Custom element filter |
unwrapDisallowed | boolean | false | Keep children of disallowed elements |
skipHtml | boolean | false | Ignore raw HTML |
urlTransform | UrlTransform | defaultUrlTransform | Transform/sanitize URLs |
For full API reference, see references/api.md.
| Plugin | Package | Purpose |
|---|---|---|
| Code | @streamdown/code | Syntax highlighting (Shiki, 200+ languages) |
| Mermaid | @streamdown/mermaid | Diagrams (flowcharts, sequence, etc.) |
| Math | @streamdown/math | LaTeX via KaTeX (requires CSS import) |
| CJK | @streamdown/cjk | Chinese/Japanese/Korean text support |
Math requires CSS:
For plugin configuration details, see references/plugins.md.
Use these for deeper implementation details:
Copy and adapt from assets/examples/:
@source directive or content entry for node_modules/streamdown/dist/*.jskatex/dist/katex.min.csscaret prop AND isAnimating={true} are requiredisAnimating={true}linkSafety={{ enabled: false }}shiki explicitly, add to transpilePackagesallowedTags not working — Only works with default rehype plugins$$ not $ — Single dollar is disabled by default to avoid currency conflictsimport { Streamdown } from 'streamdown';
<Streamdown>{markdown}</Streamdown>'use client';
import { useChat } from '@ai-sdk/react';
import { Streamdown } from 'streamdown';
import { code } from '@streamdown/code';
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
return (
<>
{messages.map((msg, i) => (
<Streamdown
key={msg.id}
plugins={{ code }}
caret="block"
isAnimating={isLoading && i === messages.length - 1 && msg.role === 'assistant'}
>
{msg.content}
</Streamdown>
))}
<form onSubmit={handleSubmit}>
<input value={input} onChange={handleInputChange} disabled={isLoading} />
</form>
</>
);
}<Streamdown mode="static" plugins={{ code }}>
{content}
</Streamdown>import 'katex/dist/katex.min.css';