Shadcn Markdown
React markdown for assistant replies and docs snippets. Built with TypeScript and Tailwind CSS for Next.js using Base UI — Streamdown, tables, and fenced code.
A markdown renderer for text that arrives as a string — assistant replies, a README, a changelog. It uses Streamdown so a partial fence still paints as code while tokens stream in.
Usage
import { Markdown } from "@/components/ui/markdown"<Markdown>{source}</Markdown>Pass the string as children. Tables, quotes, lists, and fenced code all render.
Composition
The file is a thin Streamdown wrapper. Add plugins there if you need more.
In a Bubble
Assistant text inside a Bubble. Keep the user side as plain text.
In a Message
Same renderer on a Message row.
API
Prop
Type
Notes
Stream the same string
Do not remount Markdown on every token. Append to one string and let Streamdown update in place.
With other components
Assistant surface
MessageA chat row
TypographyHand-written headings
Message ScrollerThe transcript
CardFrame a snippet
AlertA short notice
Questions
Related
Was this page helpful?
Sign in to leave feedback.
Label
React label for inputs, checkboxes, and form controls. Built with TypeScript and Tailwind CSS for Next.js using Base UI — click the text to focus the control.
Marker
React marker for inline status, system notes, and labeled separators in a thread. Built with TypeScript and Tailwind CSS for Next.js using Base UI — three layouts.