Docs
Markdown Renderer
Markdown Renderer
A customizable component for rendering Markdown content with consistent styling.
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 https://shadcn-chatbot-kit.vercel.app/r/markdown-renderer.jsonUsage
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
| Prop | Type | Description |
|---|---|---|
children | string | The markdown content to render |