Streamdown

This handles React markdown rendering optimized for AI streaming responses. Built as a drop-in replacement for react-markdown, it includes syntax highlighting via Shiki, Mermaid diagrams, LaTeX math, and streaming-friendly features like animated carets and copy buttons that disable during active streaming. Works directly with Vercel AI SDK's useChat hook. The Tailwind setup is mandatory and commonly missed, you need to add source directives for the dist files or styles won't load. Security defaults are solid with link confirmation modals and URL sanitization built in. Good for AI chat interfaces where you're rendering streamed markdown and want polish without building everything from scratch.

skills.sh installs: 3.3K
GitHub stars: 5.8K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel/streamdown --skill streamdown --agent claude-code

Installs into .claude/skills of the current project.

Files

Streamdown

Streaming-optimized React Markdown renderer. Drop-in replacement for react-markdown with built-in streaming support, security, and interactive controls.

Quick Setup

1. Install

npm install streamdown

Optional plugins (install only what's needed):

npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk

2. Configure Tailwind CSS (Required)

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:

@source "../node_modules/streamdown/dist/*.js";

Add plugin @source lines only for packages you have installed (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths:

Code: @source "../node_modules/@streamdown/code/dist/*.js";
CJK: @source "../node_modules/@streamdown/cjk/dist/*.js";
Math: @source "../node_modules/@streamdown/math/dist/*.js";
Mermaid: @source "../node_modules/@streamdown/mermaid/dist/*.js";

SKILL.md on GitHub