Markdown

Read formatted prose, code, and tables with safe links and caller-owned content.

Preview

Receipt found

Your receipt is ready. The total is $42.00.

Order 4815
Delivered today

Usage

123import { Markdown } from "@/components/ui/markdown";

<Markdown>{"# Receipt found\n\nYour receipt is ready."}</Markdown>

Examples

Rich prose

Typeset owns the reading rhythm while Markdown keeps raw HTML and unsafe URLs inert.

Receipt found

Your receipt is ready. The total is $42.00.

Order 4815
Delivered today

Code

Snippet owns code presentation and copy feedback. Partial output cannot be copied.

Language: tsx

12const receipt = await findReceipt(4815);
return receipt;

Table

Table owns structural table semantics and narrow overflow behavior.

Item	State
Receipt	Ready
Delivery	Complete

Unsafe and streaming content

Unsafe URLs render as readable text, remote images render as alt text, and streaming code copy stays disabled.

External source Unsafe

Remote image

Language: ts

const partial = true;

Copy unavailable while content is streaming.

API

Markdown properties
Prop	Type	Default	Description
`children`required	`string`		Markdown text supplied by the caller. Raw HTML is omitted.
`streaming`	`boolean`	`false`	Disables external links and code copying while content is partial.
`className`	`string`		Adds a class to the Markdown root.

Accessibility

Markdown preserves semantic headings, lists, tables, and links. External links use a safe new-tab relationship. Tables stay keyboard reachable when they overflow, and streaming status explains why code copying is unavailable.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/markdown.json

Markdown keeps react-markdown@10.1.0 and remark-gfm@4.0.1 as optional peer dependencies.