Markdown

Text 3

About

A component for rendering Markdown content with support for GitHub Flavored Markdown (GFM) and custom component styling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Markdown to your project and fits it to your theme.

Code

How Markdown is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { Markdown } from "@/components/ui/markdown"

export function MarkdownBasic() {
  const markdownContent = `
# Markdown Example

This is a **bold text** and this is an *italic text*.

## Lists

### Unordered List
- Item 1
- Item 2
- Item 3

### Ordered List
1. First item
2. Second item
3. Third item

## Links and Images

[Visit Prompt Kit](https://prompt-kit.com)

## Code

Inline \`code\` example.

\`\`\`javascript
// Code block example
function greet(name) {
  return \`Hello, \${name}!\`;
}
\`\`\`
`

  return (
    <div className="w-full max-w-3xl">
      <Markdown className="prose prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-h4:text-base prose-h5:text-sm prose-h6:text-xs">
        {markdownContent}
      </Markdown>
    </div>
  )
}