Astryx Design System

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 {Markdown} from '@astryxdesign/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.
Do	Use inlinePlugins for custom shorthand patterns like issue refs, diff refs, and mentions instead of preprocessing the markdown string.
Don't	Use Markdown for hand-authored layouts; use Text and Heading 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