streamdown
installsforks
How to install streamdown?
vercel/streamdown/streamdown
$npx -y skills add vercel/streamdown --skill streamdownstreamdown is an agent skill published from vercel/streamdown, installable through the skills CLI.
SKILL.md
| 1 | # Streamdown |
| 2 | |
| 3 | Streaming-optimized React Markdown renderer. Drop-in replacement for `react-markdown` with built-in streaming support, security, and interactive controls. |
| 4 | |
| 5 | ## Quick Setup |
| 6 | |
| 7 | ### 1. Install |
| 8 | |
| 9 | ```bash |
| 10 | npm install streamdown |
| 11 | ``` |
| 12 | |
| 13 | Optional plugins (install only what's needed): |
| 14 | ```bash |
| 15 | npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk |
| 16 | ``` |
| 17 | |
| 18 | ### 2. Configure Tailwind CSS (Required) |
| 19 | |
| 20 | **This is the most commonly missed step.** Streamdown uses Tailwind for styling and the dist files must be scanned. |
| 21 | |
| 22 | **Tailwind v4** — add to `globals.css`: |
| 23 | ```css |
| 24 | @source "../node_modules/streamdown/dist/*.js"; |
| 25 | ``` |
| 26 | |
| 27 | Add plugin `@source` lines **only for packages you have installed** (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths: |
| 28 | - Code: `@source "../node_modules/@streamdown/code/dist/*.js";` |
| 29 | - CJK: `@source "../node_modules/@streamdown/cjk/dist/*.js";` |
| 30 | - Math: `@source "../node_modules/@streamdown/math/dist/*.js";` |
| 31 | - Mermaid: `@source "../node_modules/@streamdown/mermaid/dist/*.js";` |
| 32 | |
| 33 | |
| 34 | **Tailwind v3** — add to `tailwind.config.js`: |
| 35 | ```js |
| 36 | module.exports = { |
| 37 | content: [ |
| 38 | "./app/**/*.{js,ts,jsx,tsx,mdx}", |
| 39 | "./node_modules/streamdown/dist/*.js", |
| 40 | ], |
| 41 | }; |
| 42 | ``` |
| 43 | |
| 44 | ### 3. Basic Usage |
| 45 | |
| 46 | ```tsx |
| 47 | import { Streamdown } from 'streamdown'; |
| 48 | |
| 49 | <Streamdown>{markdown}</Streamdown> |
| 50 | ``` |
| 51 | |
| 52 | ### 4. With AI Streaming (Vercel AI SDK) |
| 53 | |
| 54 | ```tsx |
| 55 | 'use client'; |
| 56 | import { useChat } from '@ai-sdk/react'; |
| 57 | import { Streamdown } from 'streamdown'; |
| 58 | import { code } from '@streamdown/code'; |
| 59 | |
| 60 | export default function Chat() { |
| 61 | const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat(); |
| 62 | |
| 63 | return ( |
| 64 | <> |
| 65 | {messages.map((msg, i) => ( |
| 66 | <Streamdown |
| 67 | key={msg.id} |
| 68 | plugins={{ code }} |
| 69 | caret="block" |
| 70 | isAnimating={isLoading && i === messages.length - 1 && msg.role === 'assistant'} |
| 71 | > |
| 72 | {msg.content} |
| 73 | </Streamdown> |
| 74 | ))} |
| 75 | <form onSubmit={handleSubmit}> |
| 76 | <input value={input} onChange={handleInputChange} disabled={isLoading} /> |
| 77 | </form> |
| 78 | </> |
| 79 | ); |
| 80 | } |
| 81 | ``` |
| 82 | |
| 83 | ### 5. Static Mode (Blogs, Docs) |
| 84 | |
| 85 | ```tsx |
| 86 | <Streamdown mode="static" plugins={{ code }}> |
| 87 | {content} |
| 88 | </Streamdown> |
| 89 | ``` |
| 90 | |
| 91 | ## Key Props |
| 92 | |
| 93 | | Prop | Type | Default | Purpose | |
| 94 | |------|------|---------|---------| |
| 95 | | `children` | `string` | — | Markdown content | |
| 96 | | `mode` | `"streaming" \| "static"` | `"streaming"` | Rendering mode | |
| 97 | | `plugins` | `{ code?, mermaid?, math?, cjk? }` | — | Feature plugins | |
| 98 | | `isAnimating` | `boolean` | `false` | Streaming indicator | |
| 99 | | `caret` | `"block" \| "circle"` | — | Cursor style | |
| 100 | | `components` | `Components` | — | Custom element overrides | |
| 101 | | `controls` | `boolean \| object` | `true` | Interactive buttons | |
| 102 | | `linkSafety` | `LinkSafetyConfig` | `{ enabled: true }` | Link confirmation modal | |
| 103 | | `shikiTheme` | `[light, dark]` | `['github-light', 'github-dark']` | Code themes | |
| 104 | | `className` | `string` | — | Container class | |
| 105 | | `allowedElements` | `string[]` | all | Tag names to allow | |
| 106 | | `disallowedElements` | `string[]` | `[]` | Tag names to disallow | |
| 107 | | `allowElement` | `AllowElement` | — | Custom element filter | |
| 108 | | `unwrapDisallowed` | `boolean` | `false` | Keep children of disallowed elements | |
| 109 | | `skipHtml` | `boolean` | `false` | Ignore raw HTML | |
| 110 | | `urlTransform` | `UrlTransform` | `defaultUrlTransform` | Transform/sanitize URLs | |
| 111 | |
| 112 | For full API reference, see [references/api.md](references/api.md). |
| 113 | |
| 114 | ## Plugin Quick Reference |
| 115 | |
| 116 | | Plugin | Package | Purpose | |
| 117 | |--------|---------|---------| |
| 118 | | Code | `@streamdown/code` | Syntax highlighting (Shiki, 200+ languages) | |
| 119 | | Mermaid | `@streamdown/mermaid` | Diagrams (flowcharts, sequence, etc.) | |
| 120 | | Math | `@streamdown/math` | LaTeX via KaTeX (requires CSS import) | |
| 121 | | CJK | `@streamdown/cjk` | Chinese/Japanese/Korean text support | |
| 122 | |
| 123 | **Math requires CSS:** |
| 124 | ```tsx |
| 125 | import 'katex/dist/katex.min.css'; |
| 126 | ``` |
| 127 | |
| 128 | For plugin configuration details, see [references/plugins.md](references/plugins.md). |
| 129 | |
| 130 | ## References |
| 131 | |
| 132 | Use these for deeper implementation details: |
| 133 | |
| 134 | - **[references/api.md](references/api.md)** — Complete props, types, and interfaces |
| 135 | - **[references/plugins.md](references/plugins.md)** — Plugin setup, configuration, and customization |
| 136 | - **[references/styling.md]( |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
