# Markdown View

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/markdown-view
```

## Import

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

## Variants

- `assistant` — Streaming answer: `npx @lumioui/cli add pro/markdown-view-assistant`
- `help-article` — Help article: `npx @lumioui/cli add pro/markdown-view-help-article`
- `legal` — Legal document: `npx @lumioui/cli add pro/markdown-view-legal`
- `release-notes` — Release notes: `npx @lumioui/cli add pro/markdown-view-release-notes`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `source` | `string` | Markdown source. |
| `size?` | `"sm" | "md"` | Type scale: "md" body 16/24 (articles, answers) · "sm" body 15/24 (legal, dense notes). |
| `mode?` | `"static" | "stream"` | "stream" fades newly appended words in. Default "static". |
| `streaming?` | `boolean` | Stream mode: more text is still coming — the writing light follows the last word. |
| `animateOnMount?` | `boolean` | Stream mode: animate text already present on mount. Default true. |
| `onDone?` | `() => void` | Stream mode: fires once streaming has ended and every word has landed. |
| `streamingLabel?` | `string` | Stream mode: screen-reader label while streaming. |
| `onLinkPress?` | `(href: string) => void` | Handle link taps yourself (in-app browser, routing). Receives every href. |
| `selectable?` | `boolean` | Let readers select paragraph text (static mode). |
| `className?` | `string` | — |

## Icons rendered

- `check` — /icons.html?i=check
- `copy` — /icons.html?i=copy

Source: https://lumioui.com/components/markdown-view