Markdown Renderer

The Markdown Renderer component allows rendering Markdown content safely with support for various customizations.

Usage & Examples

Default

default.tsx
<MarkdownRenderer content={`
  # Markdown Test
  
  - Item 1
  - Item 2
  - [Visit BorealUI](https://www.borealui.ca)
  - `Inline code`
  
  > Blockquote
  `} />

Visual variants

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Rounding
<MarkdownRenderer rounding="none" content={`
  # Markdown Test
  
  - Item 1
  - Item 2
  - [Visit BorealUI](https://www.borealui.ca)
  - `Inline code`
  
  > Blockquote
  `} />
<MarkdownRenderer rounding="medium" content={`
  # Markdown Test
  
  - Item 1
  - Item 2
  - [Visit BorealUI](https://www.borealui.ca)
  - `Inline code`
  
  > Blockquote
  `} />
<MarkdownRenderer rounding="large" content={`
  # Markdown Test
  
  - Item 1
  - Item 2
  - [Visit BorealUI](https://www.borealui.ca)
  - `Inline code`
  
  > Blockquote
  `} />

// Shadows
<MarkdownRenderer shadow="none" content={`
  # Markdown Test
  
  - Item 1
  - Item 2
  - [Visit BorealUI](https://www.borealui.ca)
  - `Inline code`
  
  > Blockquote
  `} />
<MarkdownRenderer shadow="light" content={`
  # Markdown Test
  
  - Item 1
  - Item 2
  - [Visit BorealUI](https://www.borealui.ca)
  - `Inline code`
  
  > Blockquote
  `} />
<MarkdownRenderer shadow="strong" content={`
  # Markdown Test
  
  - Item 1
  - Item 2
  - [Visit BorealUI](https://www.borealui.ca)
  - `Inline code`
  
  > Blockquote
  `} />

Props API

13 props
Columns
Markdown Renderer props API
Default
Description
allowHtmlbooleanNopropsfalseAllows raw HTML embedded in markdown before sanitization. Leave false for untrusted content.
aria-describedbystringNoaria—ID of an element that describes the markdown region.
aria-labelstringNoaria—Accessible label for the markdown region. Use this when there is no visible heading associated with the content.
aria-labelledbystringNoaria—ID of an element that labels the markdown region. Prefer this when a visible heading already exists.
classNamestringNostyling—Optional additional class name for styling.
contentstringYesprops—Raw markdown content to be rendered as HTML.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
languagestringNoprops"en"Language of the rendered markdown content.
roleReact.AriaRoleNoaria"region"Optional ARIA role for the wrapper element. Defaults to "region".
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Optional rounding style for the rendered container. One of: "none" | "small" | "medium" | "large" | "full"
shadowShadowTypeNostylingconfigured default shadow (fallback: "light")Optional shadow styling for the rendered container. One of: "none" | "light" | "medium" | "strong" | "intense"
tabIndexnumberNoprops—Optional tab index for keyboard focus management.