Docs
Markdown Renderer

Markdown Renderer

A customizable component for rendering Markdown content with consistent styling.

Hello World

This is a paragraph with bold and italic text.

Lists

  • Item 1
  • Item 2
    • Nested item

Code

console.log("Hello World")

Tables

Header 1Header 2
Cell 1Cell 2

The MarkdownRenderer component provides a consistent way to render Markdown content with custom styling, powered by react-markdown and remark-gfm.

Features

  • GitHub Flavored Markdown support
  • Consistent typography and spacing
  • Styled tables, lists, and code blocks
  • Responsive design
  • Theme-aware styling

Installation

npx shadcn@latest add markdown-renderer

Usage

import { MarkdownRenderer } from "@/components/ui/markdown-renderer"
<MarkdownRenderer>
  {`# Hello World
 
This is a paragraph with **bold** and *italic* text.
 
## Lists
- Item 1
- Item 2
  - Nested item
 
## Code
\`\`\`tsx
console.log("Hello World")
\`\`\`
 
## Tables
| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |
`}
</MarkdownRenderer>

Props

PropTypeDescription
childrenstringThe markdown content to render
Chat MessagePrompt Suggestions