Render AI responses with rich markdown, memoized streaming blocks, and optional Streamdown rendering.
Use Markdown for AI responses that need headings, lists, inline code, and fenced code blocks with HeroUI Pro styling.
The built-in Markdown component splits content into memoized blocks so token updates only re-render the blocks that changed.
Use Streamdown when you want incomplete markdown repair, streaming animation, and a caret while the assistant response is still being generated.
import {Streamdown} from "streamdown";
import "streamdown/styles.css";
<Streamdown animated caret="block" isAnimating={isStreaming}>
{response}
</Streamdown>Markdown and StreamMarkdown are subpath-only imports (@heroui-pro/react/markdown) because they depend on the optional streamdown, react-markdown, marked, and remark-* peers. They are not exported from the package root, so SSR apps that don't use them never need those peers installed.
import {Markdown} from "@heroui-pro/react/markdown";
<Markdown>{response}</Markdown>.markdown - Root markdown content wrapper.markdown__block - Memoized block wrapper for each parsed markdown block.markdown__inline-code - Inline code stylingThe root component. Renders markdown content with HeroUI Pro typography and code block styling.
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | - | Markdown content to render |
components | Partial<Components> | - | Custom react-markdown component overrides |
id | string | generated | Stable id seed used for memoized block keys |
className | string | - | Additional CSS class |
Also supports all native div HTML attributes.