# Markdown
URL: /docs/ui/markdown

Display rich text with headings, lists, links, and code blocks.

***

title: Markdown
description: Display rich text with headings, lists, links, and code blocks.
----------------------------------------------------------------------------

import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
import { MarkdownSample } from "@/components/docs/samples/markdown-sample";

<MarkdownSample />

<Callout>
  Markdown support is already included by default in the `Thread` component.
</Callout>

## Enabling markdown support

<Steps>
  <Step>
    ### Add `markdown-text`

    <InstallCommand shadcn={["markdown-text"]} />

    This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, which you can adjust as needed.
  </Step>

  <Step>
    ### Use it in your application

    Pass the `MarkdownText` component to the `MessagePrimitive.Parts` component

    ```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,11}
    // @filename: /components/assistant-ui/markdown-text.tsx
    import { FC } from "react";
    export const MarkdownText: FC = () => null;

    // @filename: ./thread.tsx
    import { FC } from "react";
    import { MessagePrimitive } from "@assistant-ui/react";
    import { Avatar, AvatarFallback } from "@/components/ui/avatar";

    const AssistantActionBar: FC = () => null;
    const BranchPicker: FC<{ className?: string }> = () => null;

    // ---cut---
    import { MarkdownText } from "@/components/assistant-ui/markdown-text";

    const AssistantMessage: FC = () => {
      return (
        <MessagePrimitive.Root className="...">
          <div className="...">
            <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
          </div>
          <AssistantActionBar />

          <BranchPicker className="..." />
        </MessagePrimitive.Root>
      );
    };
    ```
  </Step>
</Steps>

## Syntax highlighting

Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/syntax-highlighting) to learn how to add it.

## Related Components

* [Syntax Highlighting](/docs/ui/syntax-highlighting) - Add code highlighting to markdown
* [Mermaid](/docs/ui/mermaid) - Render diagrams in markdown code blocks