Markdown View

Pro

Safe markdown renderer for headings, lists, quotes, tables and code blocks with a copy button. In streaming mode, new words fade in smoothly as an AI reply is written.

Preview

Installation

npx @lumioui/cli add pro/markdown-view

Usage

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

Examples

Streaming answer

A household budgeting assistant.

Help article

A help-centre article in a city bike-share app: a large title, short sections, a numbered how-to with an inline key glyph, a tip in a quote and a link to chat.

Release notes

"What's new" for a weekly planner: version sections with dates, bold lead-ins, an inline shortcut chip, a task list of fixes (one still open) and rules between releases.

API reference

Prop Type Default
source* string

Markdown source.

 —
size "sm" | "md"

Type scale: "md" body 16/24 (articles, answers) · "sm" body 15/24 (legal, dense notes).

 "md"
mode "static" | "stream"

"stream" fades newly appended words in. Default "static".

 "static"
streaming boolean

Stream mode: more text is still coming — the writing light follows the last word.

 false
animateOnMount boolean

Stream mode: animate text already present on mount. Default true.

 true
onDone () => void

Stream mode: fires once streaming has ended and every word has landed.

 —
streamingLabel string

Stream mode: screen-reader label while streaming.

 "Writing response…"
onLinkPress (href: string) => void

Handle link taps yourself (in-app browser, routing). Receives every href.

 —
selectable boolean

Let readers select paragraph text (static mode).

 false
className string —