---
title: Markdown
description: Rendered markdown content with template interpolation.
icon: markdown
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

The Markdown component renders full markdown content — headings, bold, italic, lists, links, code blocks, tables, and blockquotes. Use it for rich text blocks where the content is naturally markdown-shaped.

## Basic Usage

<ComponentPreview json={{"view":{"type":"Markdown","content":"\n# Release Notes\n\nVersion **2.5.0** brings several improvements:\n\n## New Features\n\n- **Dark mode** with automatic system detection\n- Keyboard shortcuts for *all* actions\n- Inline `code` formatting support\n\n## Migration Guide\n\n> Update your config file before upgrading.\n\n| Setting | Old | New |\n|---------|-----|-----|\n| theme | `light` | `auto` |\n| timeout | `30s` | `60s` |\n"}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Markdown

Markdown("""
# Release Notes

Version **2.5.0** brings several improvements:

## New Features

- **Dark mode** with automatic system detection
- Keyboard shortcuts for *all* actions
- Inline `code` formatting support

## Migration Guide

> Update your config file before upgrading.

| Setting | Old | New |
|---------|-----|-----|
| theme | `light` | `auto` |
| timeout | `30s` | `60s` |
""")
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Markdown",
    "content": "\n# Release Notes\n\nVersion **2.5.0** brings several improvements:\n\n## New Features\n\n- **Dark mode** with automatic system detection\n- Keyboard shortcuts for *all* actions\n- Inline `code` formatting support\n\n## Migration Guide\n\n> Update your config file before upgrading.\n\n| Setting | Old | New |\n|---------|-----|-----|\n| theme | `light` | `auto` |\n| timeout | `30s` | `60s` |\n"
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Markdown Parameters">
<ParamField body="content" type="str" required>
  Markdown text. Can be passed as a positional argument.
</ParamField>

<ParamField body="css_class" type="str | None" default="None">
  Additional Tailwind CSS classes.
</ParamField>
</Card>

## Protocol Reference

```json Markdown
{
  "type": "Markdown",
  "content": "string (required)",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Markdown](/protocol/markdown).
