Components
Starting preview...
A component for rendering Markdown content with support for GitHub Flavored Markdown (GFM) and custom component styling.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/markdown"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>
)
}