Components / Markdown

Markdown

Renders a markdown string (react-markdown plus GitHub-flavored markdown) with the house typography: headings, lists, tables, inline code, and links.

import { Markdown, type MarkdownLinkProps } from '@layers/ui/markdown'

Rendered stock

House rules

  • Chat surfaces inject a router-aware linkComponent (web-v2 passes ElleMarkdownLink) so in-app hrefs navigate client-side and validate against the route catalog; the default is a plain styled anchor with no router dependency.
  • The linkComponent receives MarkdownLinkProps (href, children); everything else about the link is yours to render.
  • Tables wrap in their own horizontally scrolling container; never let a wide table stretch the page.
  • Pass the markdown source as the children string; layout tweaks go on the wrapper via className.