Skip to main content

Markdown

Turns a Markdown string into styled headings, lists, tables, code, and quotes.

import { Markdown } from "@/fragments/ui";Source

Preview

<Markdown content={`# Hello World

This is a paragraph with **bold text** and *italic text*.

Here is some \`inline code\` within a sentence.

Installation

npx @usefragments/cli add markdown
pnpm add react-markdown remark-gfm

Writes src/fragments/ui/components/Markdown plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Markdown is a compound: import the root and reach its parts through dot notation.

  • Markdown.preload

Examples

GFM Table

remark-gfm adds tables and checkbox items on top of the basics.

<Markdown content={`## Data Overview

| Feature    | Status    | Priority |
|------------|-----------|----------|
| Markdown   | Done      | High     |
| Tables     | Done      | Medium   |

Code Block

Fenced blocks get the same code surface as CodeBlock.

<Markdown content={`## Code Example

Here is a JavaScript function:

```js
function greet(name) {

Mixed Content

A realistic document — the worst case worth checking.

<Markdown content={`# Project Update

## Summary

The project is progressing well. Here are the **key highlights**:

API

Component props
Prop
Type
Default
Description
contentRequiredstringNot setMarkdown string to render
componentsobjectNot setOverride map for markdown element components (e.g., { h1: MyHeading }). Accepts custom renderer component signatures used by react-markdown
classNamestringNot setAdditional CSS class name

Accessibility

  • Output is real headings, lists, and tables
  • Links render as anchors, images keep their alt text

Guidance

Use when

  • Rendering an LLM reply
  • Showing text a user wrote in Markdown
  • Docs or readme content inside the app

Avoid when

  • The string has no formatting (use Text)
  • The user needs to edit it (use an editor)

Related

  • TextalternativeUse Text for plain, non-markdown text
  • CodeBlockcomplementaryCodeBlock can be used via components prop for syntax highlighting
  • MessageparentMessage wraps Markdown when markdown prop is true

Next steps