Universal MarkdownTheme component

import MarkdownTheme from '@app/mdx'

MarkdownTheme wraps MDX content and maps markdown elements (headings, paragraphs, lists, blockquotes, links, images) to your design system primitives from @app/ui. It builds on @bacons/mdx ’s MDXComponents, which compiles MDX at build time and accepts custom component overrides per element type.

Element mapping

Web enhancements

On web, MarkdownTheme also:

• Adds target="_blank" to external links
• Renders anchor links (- #) on headings (click to copy URL, smooth scroll)
• Scrolls to #hash in the URL on mount

Styling

• React Native — Uses StyleSheet and NativeWind className for spacing, typography, and layout
• Web — Uses markdown.theme.css for typography, list styling, and heading anchor hover states. The CSS targets the #markdown-theme wrapper.

• packages/@app-mdx
  • MarkdownTheme.tsx
  • markdown.theme.css

Usage

import MarkdownTheme from '@app/mdx'
import ReadMe from './ReadMe.mdx'
 
<MarkdownTheme>
    <ReadMe />
</MarkdownTheme>