Markdown React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Markdown is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Markdown from @/components/ui/markdown.

import { useEffect, useRef, useState } from "react"
import { Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Markdown } from "@/components/ui/markdown"
import { mockStream } from "@/lib/ai-chat"

const answer = `I found **3 overdue invoices**, **$22,775.95** in total:

| Client | Invoice | Amount |
|---|---|---:|
| Acme Corp | #2026-0405 | $12,480.00 |
| Greenleaf Pharmacy | #2026-0371 | $7,315.20 |

Shall I draft the emails?`

export function AssistantAnswer() {
  const [text, setText] = useState("")
  const [streaming, setStreaming] = useState(false)
  const stream = useRef<AbortController | null>(null)
  useEffect(() => () => stream.current?.abort(), [])

  async function generate() {
    stream.current?.abort()
    const controller = new AbortController()
    stream.current = controller
    setText("")
    setStreaming(true)
    for await (const delta of mockStream(answer, { signal: controller.signal })) setText((t) => t + delta)
    // a restart aborted this stream: the new one owns the flag
    if (stream.current === controller) setStreaming(false)
  }

  return (
    <div className="flex flex-col gap-3">
      <Button variant="soft" size="sm" leftIcon={<Sparkles />} onClick={generate}>
        Generate
      </Button>
      <Markdown streaming={streaming} variant="compact">
        {text}
      </Markdown>
    </div>
  )
}

Props

• childrendefault "I found **3 overdue invoices** in September, **$22,775.95** in total: | Client | Invoice | Amount | Late | |---|---|---:|---:| | Acme Corp | #2026-0405 | $12,480.00 | 1 day | | Greenleaf Pharmacy | #2026-0371 | $7,315.20 | 53 days | | West Side Books | #2026-0366 | $2,980.75 | 57 days | **What I suggest:** 1. A polite reminder to Acme Corp, the due date passed yesterday. 2. A call to Greenleaf Pharmacy: Daniel Reed, `(503) 555-0118`. 3. For West Side Books, a formal notice. I can use the **Payment notice** template. Shall I draft the emails?"
  string | number | null

  The markdown source (GitHub flavored: tables, task lists, strikethrough, autolinks, footnotes). null, undefined and an empty string render nothing; other values go through String(). Raw HTML in the source is never rendered.

• sizedefault "md"
  "sm" | "md" | "lg"

  Text size and line height: sm 14 / 24px (side panels, reasoning), md 15 / 28px (chat, notes, comfortable on a phone), lg 16 / 28px (documents). Headings, code and tables scale with it.

• variantdefault "prose"
  "prose" | "compact"

  prose is a document's rhythm: blocks 1em apart and headings up to 1.6em. compact is a chat's rhythm: blocks 0.75em apart and headings never above 1.2em, so an answer never shouts.

• streamingdefault false
  boolean

  Text is still arriving. Half-typed syntax is repaired (completeMarkdown), only the last top-level block re-parses per chunk, new blocks fade in, a caret shows at the end and the root gets aria-busy. Turn it off when the answer completes: the whole source then renders in one pass.

• caretdefault "dot"
  "dot" | "bar" | "block" | "none"

  The caret at the end of streaming text: a pulsing 10px dot, a thin text-high bar, a block cursor, or none. It sits inline after the last word, and on a line of its own after a code block.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Colors the links, the checked task boxes and the blockquote rail. neutral keeps links in the text color with a soft underline that darkens on hover.

• colordefault ""
  string

  Any CSS color. Replaces the tone for links, task boxes and the quote rail, mixed for contrast in both themes.

• codeAccentdefault ""
  string

  The accent of fenced code blocks, a hex color that the whole code theme is built from. Empty keeps code-block's own; set it app-wide with UIProvider defaults={{ "code-block": { accent } }}.

• codeLineNumbersdefault false
  boolean

  A line-number gutter in fenced code blocks.

• codeMaxHeightdefault 480
  number

  The tallest a code block gets, in px; longer code scrolls inside its block. 0 lets it grow with the code.

• headingIdsdefault false
  boolean

  Gives h1 to h4 an id from slugifyHeading (What's new becomes whats-new, repeats get -2, -3), for #anchors and a table of contents. Ids a plugin already set are kept.

• linkTargetdefault "auto"
  "auto" | "_blank" | "_self"

  auto opens absolute http(s) links in a new tab with rel noopener noreferrer nofollow and keeps relative links and #anchors in place; _blank opens every link but #anchors in a new tab; _self never does. Links that open a new tab show a small arrow and say so to screen readers.

• allowImagesdefault true
  boolean

  false renders every image as a link to it with its alt text, so untrusted model output can never load a tracking pixel by itself.

• breaksdefault false
  boolean

  A single newline becomes a line break, as in chat apps and GitHub comments, so signatures, addresses and verse keep their lines. Off follows CommonMark, where a single newline is a space. Code keeps its newlines either way.

• components
  Components (react-markdown)

  Replace any element, e.g. render crm://client/c01 links as chips. Yours win over the built-in look; each receives the element's props plus the hast node. A code override also receives fenced code (className language-x), as in react-markdown. Keep the object stable (module scope or useMemo), or every block re-renders.

• remarkPlugins
  PluggableList

  Remark plugins, appended after remark-gfm (always on, single tildes stay text). Keep the array stable.

• rehypePlugins
  PluggableList

  Rehype plugins, run before the heading ids and the caret. Keep the array stable.

• urlTransform
  (url: string, key: string, node: Element) => (string | null | undefined)

  Runs on every href and src first. The default, react-markdown's defaultUrlTransform, drops javascript: and other unsafe protocols. An empty result renders the link text without a link. Allow your own scheme with url.startsWith("crm://") ? url : defaultUrlTransform(url).

• onLinkClick
  (href: string, event: MouseEvent<HTMLAnchorElement>) => void

  Called on every link click, for in-app navigation; call event.preventDefault() to stop the browser. The newest handler is used, so an inline function is fine.

• labels
  Partial<MarkdownLabels>

  Every string it reads out: streaming "Generating" (sr-only after the caret), image "Image", taskDone "Done", taskOpen "Not done", code (language) => `${language} code`, newTab "(opens in a new tab)", footnotes "Footnotes", footnoteBack (index) => `Back to reference ${index}`.

• classNames
  Partial<Record<MarkdownSlot, string>>

  Extra classes for the parts: heading, paragraph, link, list, listItem, blockquote, code (the block around a CodeBlock), inlineCode, tableWrapper (the bordered box), table, hr, image, caret.

• className
  string

  Extra classes for the root, merged last. The root spreads every other div prop (id, aria-*, data-*).

Parts

FAQ

Used in

More React data display components