Markdown

Text 4

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 = [
  "| Tool | Status |",
  "| --- | --- |",
  "| Search | Ready |",
  "| Bash | Ready |",
  "",
  "Visit [docs](https://example.com) for details.",
].join("\n");

export default function TablesLinksDemo() {
  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>
  );
}