XDS — Design System

Markdown@xds/core v0.0.13 · XDSMarkdown

Usage

Renders a markdown string as XDS-styled components. Use Markdown for user-generated content, AI responses, and documentation — it handles headings, lists, tables, code blocks, and citations with consistent styling.

ts
import {XDSMarkdown} from '@xds/core/Markdown'

Best practices

Guidance	Practices
Do	Set headingLevelStart to match the page hierarchy — e.g. start at 3 if the markdown sits inside an h2 section.
Do	Use contentWidth to keep prose at a readable line length in wide layouts.
Don't	Use Markdown for hand-authored layouts — use XDSText and XDSHeading directly when you control the content.

Examples

Common configurations, variations, and states.

Markdown — Cited Content

Markdown with citation chips linked to external sources

Markdown — Compact AI Response

Compact markdown styled for AI responses with shifted heading levels

Markdown — Data Table

Comparison table rendered from a markdown string

Markdown — Rich Content

Markdown with headings, lists, code blocks, tables, blockquotes, and task lists