Markdown

Text that arrives as markdown, such as an agent's summary, shown on a page.

import { Markdown } from "@hackcove/ui";

<Markdown
  md={
    "## What I did\n- **HC-142** shipped the EmptyState\n- Fixed the Pill label wrap\n\n" +
    "### Next\nReview the Steps copy."
  }
/>

import { Markdown } from "@hackcove/ui";

<Markdown
  md={
    "# What I did\n1. Shipped the EmptyState\n2. Fixed the Pill\n\n" +
    "See [the ticket](https://example.com) and `bun install`."
  }
/>

• Pass the markdown as md. It renders ## as a label heading, ### as a subheading, lines starting - or * as bullets, **bold** and plain paragraphs.
• Nothing else is supported: no # title, numbered list, link, code span, table or HTML. Those show as plain text.
• The text becomes React nodes and never HTML, so untrusted text cannot inject markup.
• Text you write yourself is not markdown: use Body, BulletList and the heading components.

• ## renders an h2 and ### an h3, bullets render a ul with lis, bold a strong and a paragraph a p.
• The headings start at h2, so the page needs its own h1 above.
• aria-* and data-* go on the root.