Markdown

Markdown made for AI answers. It streams smoothly and never shows half-typed syntax, with headings you can link to, tables you can copy as Markdown or CSV, GitHub callouts, task lists, footnotes, images, inline citations and full code blocks.

Open in new tab

Overview

Models answer in Markdown, and they write it one token at a time. A plain renderer flashes raw asterisks, half-built tables and unclosed code fences while it streams. Markdown completes unfinished syntax as it goes, paces the text like the Streaming block, and only shows a citation once its closing bracket arrives.

Every element is styled to sit with the rest of HextaUI: code fences become Code Blocks, callouts use the Alert component, task lists use Checkbox, and tables get a copy menu. It works just as well for static content such as READMEs, changelogs or saved answers.

Streams cleanly. Unclosed bold, links, tables and fences are completed while text arrives, so formatting appears in place instead of flickering from raw to rendered.
Smooth pacing. Bursty chunks are revealed at a steady pace that catches up when it falls behind, with a soft caret at the end of the last block.
Code Blocks. Fences render as Code Blocks with highlighting while they stream, plus title="…", {1,3-5}, showLineNumbers and diffs.
Citations. Pass sources and [1] or [2][3] become chips with a hover card. Marks inside code are left alone.
GitHub callouts. > [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] and [!CAUTION] become soft alerts with an icon and title.
Tables you can copy. Tables scroll sideways on small screens, and a menu copies them as Markdown or CSV.
Task lists. - [x] and - [ ] render as read-only checkboxes that line up with wrapped text.
Linkable headings. Headings get ids from their text. Set anchors to show a link icon on hover, ready to share.
Images. Lazy-loaded with a placeholder while loading, a fallback when they fail, and the title or alt text as a caption.
Footnotes and more. Footnotes with back links, strikethrough, nested lists, quotes and autolinks, all from GitHub-flavored Markdown.
Safe links. External links open in a new tab with noreferrer and say so to screen readers. In-page links stay in place.
Right-to-left aware. Direction is detected per block, so Arabic or Hebrew paragraphs read correctly next to English ones.

Installation

Add the Pro registry to components.json

components.json

{
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

Add your token
Create a token on your account page and put it in .env.local as HEXTAUI_PRO_TOKEN.

Add the block

pnpm dlx shadcn@latest add @hextaui-pro/markdown

Usage

With the AI SDK

Render each text part of a useChat message, with source-url parts as its sources. The part’s state tells Markdown when the model is still writing.

"use client"

import type { UIMessage } from "ai"

import { Markdown } from "@/components/blocks/markdown/markdown"

export function AssistantMessage({ message }: { message: UIMessage }) {
  const sources = message.parts.flatMap((part) =>
    part.type === "source-url"
      ? [{ id: part.sourceId, url: part.url, title: part.title ?? part.url }]
      : []
  )

  return message.parts.map((part, index) =>
    part.type === "text" ? (
      <Markdown
        key={index}
        text={part.text}
        streaming={part.state === "streaming"}
        sources={sources}
      />
    ) : null
  )
}

Static content

Pass a string as children for READMEs, changelogs or saved answers. Set anchors to give headings a link people can share.

import { Markdown } from "@/components/blocks/markdown/markdown"

const changelog = `## 2.4.0

> [!NOTE]
> Requires React 19.

- [x] Faster cold starts
- [x] Copy tables as CSV
- [ ] Offline mode`

export function Changelog() {
  return <Markdown anchors size="base">{changelog}</Markdown>
}

Anatomy

The parts you compose, from the outside in.

Part	Description
`Markdown`	The renderer. Takes a string and handles pacing, parsing and every element.
`MarkdownTable`	A scrollable table with the copy menu.
`MarkdownAlert`	A callout for [!NOTE] and the other GitHub alert types.
`MarkdownHeading`	A heading with an id and optional anchor link.
`MarkdownImage`	An image with loading, error and caption states.

API reference

Markdown

Prop	Type	Default
`text`The Markdown so far. You can pass it as children instead.	`string`	`–`
`streaming`Paces the text, shows the caret and completes unfinished syntax.	`boolean`	`false`
`smooth`Turn pacing off to render text exactly as received.	`boolean`	`true`
`sources`Turns [1] into a chip for sources[0], and so on. Without sources, [1] stays plain text.	`Source[]`	`[]`
`size`Text size. Use sm in chat and base for articles.	`"sm" \| "base"`	`"sm"`
`anchors`Show a link icon on headings.	`boolean`	`false`
`components`Override any element, such as a or img. Keep the object stable, for example outside the component, so blocks don’t remount.	`Components`	`–`
`className`Classes for the wrapper.	`string`	`–`

Keyboard

Key	Action
`Tab`	Moves through links, citations, heading anchors, table copy menus and code block actions in reading order.
`Enter`	Opens a link, or the copy menu on a table.
`↑↓`	Moves between Copy as Markdown and Copy as CSV.

Accessibility

The wrapper is marked aria-busy while it streams, so screen readers wait for the text to settle.
Callouts use role=note with their type as the label, instead of announcing like live alerts.
Task list checkboxes are read-only and skipped by Tab, so they read as state rather than controls.
External links say “opens in a new tab”, citation chips are named after their source, and heading anchors are named “Link to …”.
Images keep their alt text, and tables keep their header cells for screen reader navigation.
With reduced motion, the caret stops pulsing and images appear without fading.

Code

3 files, added to components/blocks/markdown.