Renders a GitHub-Flavored Markdown string styled to the design tokens, with tables as the upstream Table and fenced code as a CodeBlock.
Release notes
v1.2 adds GFM tables and task lists. See the changelog for details.
- Ship the parser
- Document the API
| Feature | Status |
|---|---|
| Tables | Done |
| Autolinks | Done |
1
2
3import type { ReactNode } from 'react';
import { MarkdownView } from '@/registry/bases/base-ui/components/data-display/markdown-view';Installation#
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/markdown-view.jsonUsage#
import { MarkdownView } from '@/components/data-display/markdown-view';<MarkdownView>{markdown}</MarkdownView>GFM renders as tables (upstream Table) and fenced code as a CodeBlock; raw embedded HTML is never rendered,
so untrusted markdown is safe. Use it for assistant replies and docs rendered from Markdown source; for literal
source with no surrounding prose, compose Highlighted Code or Code Block directly.
API reference#
MarkdownView#
Renders a div and takes every prop a div takes except children, plus:
| Prop | Type | Default |
|---|---|---|
children | string | required |
children is the Markdown source (GFM: tables, task lists, strikethrough, autolinks). Fenced code becomes a
CodeBlock, headed with its language when the fence names one and left bare when it is plain text; inline code
stays a muted chip. A GFM task item is an li with data-slot="markdown-view-task-item"; its checkbox and text
sit in a data-slot="markdown-view-task-item-row" row with no bullet, and a nested task list drops below that
row instead of beside the text. The checkbox's accessible name is the item's own text, by aria-labelledby onto
the item's id. A wide table or a long code line scrolls sideways inside its own block.
It is memoized, so a streaming message's settled text does not re-parse on every chunk. It sets
data-slot="markdown-view".