Textalternative
Use Text for plain, non-markdown textMarkdown
Renders markdown strings as styled prose using react-markdown and remark-gfm. Supports headings, lists, tables, code blocks, blockquotes, and more.
Setup
import { Markdown } from '@fragments-sdk/ui';Examples
Default
Basic markdown with headings, paragraphs, inline code, lists, and blockquote
Loading preview...
GFM Table
GitHub Flavored Markdown with tables and task lists
Loading preview...
Code Block
Markdown with fenced code blocks and inline code
Loading preview...
Mixed Content
Complex markdown mixing headings, lists, tables, blockquotes, and task lists
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
contentRequired | string | Not set | Markdown string to render |
components | object | Not set | Override map for markdown element components (e.g., { h1: MyHeading }). Accepts custom renderer component signatures used by react-markdown |
className | string | Not set | Additional CSS class name |
Usage Guidelines
When to use
- Rendering AI/LLM response content
- Displaying user-authored markdown text
- Showing documentation or readme content
- Rich text display without a WYSIWYG editor
When not to use
- Plain text without formatting (use Text)
- Editing markdown (use a markdown editor component)
- Rendering trusted HTML directly (use dangerouslySetInnerHTML)
Best practices
- Install react-markdown and remark-gfm as peer dependencies
- Use the components prop to override default element rendering
- Content is sanitized by react-markdown by default
- Falls back to plain text paragraphs if react-markdown is not installed
- Standard div props (id, style, aria-*, data-*) are forwarded to the Markdown wrapper
Accessibility
- Rendered HTML follows semantic structure (headings, lists, tables)
- Links are rendered as proper anchor elements
- Images include alt text from markdown syntax
- Tables use proper th/td structure for screen readers