function deploy(target: string) {
  return `Deploying to ${target}…`;
}

Install

pnpm dlx shadcn@latest add @vegastack/markdown-view

Usage

import { MarkdownView } from "@/components/ui/markdown-view";

<MarkdownView>{`# Hello\n\nThis is **markdown**.`}</MarkdownView>;

Pass the markdown as children (a string) or via the content prop when the source comes from a data field:

<MarkdownView content={task.description} />

MarkdownView is built on react-markdown with remark-gfm (tables, strikethrough, task lists, autolinks). It builds a React tree directly — never dangerouslySetInnerHTML — so any raw HTML in the source is escaped to inert text. It is server-safe (no 'use client') and renders nothing for empty/whitespace input.

Relative image paths render normally. Absolute and protocol-relative remote images are blocked by default so untrusted Markdown cannot create tracking requests. When a trusted media host is required, allow its exact origin; allowed remote images send no referrer:

<MarkdownView allowedImageOrigins={["https://media.example.com"]}>
  {"![Product preview](https://media.example.com/preview.png)"}
</MarkdownView>

Examples

Default

Headings, paragraphs, inline code, links, lists, and blockquotes — styled by the shared prose recipe from @vegastack/design, worn as one class on the root (no @tailwindcss/typography dependency). TextEdit wears the same string, so rendered markdown and edited rich text are the same typography rather than two that agree by review.

function deploy(target: string) {
  return `Deploying to ${target}…`;
}

GitHub-flavored markdown

remark-gfm adds tables, ~~strikethrough~~, and - [ ] task lists. Task-list checkboxes are rendered read-only (display only).

Code blocks

Inline code renders as a muted font-mono chip; fenced code blocks render inside a bordered, scrollable <pre>.

function greet(name: string) {
  return `Hello, ${name}`;
}

Links

External links (those starting with http(s)://) open in a new tab with target="_blank" and rel="noreferrer noopener"; relative/internal links stay in the same tab. The link color (text-info-text) and underline are identical in both cases.

Full element set

A consolidated sample exercising every styled element — all six heading levels, ordered and unordered lists, a horizontal rule, an image, and inline emphasis — so the complete prose surface renders in one view.

API Reference

Accessibility

• Markdown maps to semantic HTML — # → <h1>, - → <ul><li>, > → <blockquote>, ``` → <pre><code> — so the document structure is exposed to assistive technology and heading navigation works.
• XSS-safe by construction: react-markdown never uses dangerouslySetInnerHTML and escapes raw HTML, so <script>, <img onerror>, and inline event handlers in untrusted input render as plain text rather than executing. rehype-raw is intentionally not added.
• Links open in a new tab with rel="noreferrer noopener" (no reverse tabnabbing); unsafe URL protocols (e.g. javascript:) are dropped.
• Remote images are blocked unless their exact HTTP(S) origin appears in allowedImageOrigins; allowed remote images use referrerPolicy="no-referrer".
• Body text inherits the page text color (text-foreground); links use text-info-text with an underline, keeping a visible, color-independent affordance.

Do / Don't