Markdown

Component 18

About

Render markdown with headings, lists, tables, blockquotes, code fences, and safe external links. State-friendly for streaming text. Self-contained port from 21st.dev Agent Elements (uses react-markdown + remark-gfm in place of streamdown + @streamdown/code).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Markdown to your project and fits it to your theme.

Code

How Markdown is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Markdown } from "@/components/ui/markdown";

const content = [
  "# Release notes",
  "",
  "- Added streaming markdown",
  "- Improved tool rendering",
  "",
  "## Example",
  "",
  'Use "Markdown" to render assistant text as it streams.',
  "",
  "```ts",
  'console.log("Hello from markdown");',
  "```",
].join("\n");

export default function DefaultDemo() {
  return (
    <div className="min-h-screen w-full flex items-center justify-center p-6 bg-white dark:bg-neutral-950">
      <div className="w-full max-w-md">
        <Markdown content={content} />
      </div>
    </div>
  );
}