Usage

<ChatMessage.Assistant>
  <ChatMessage.Avatar alt="Assistant" fallback="AI" show />
  <ChatMessage.Body>
    <ChatMessage.Content>
      <Markdown>{response}</Markdown>
    </ChatMessage.Content>
  </ChatMessage.Body>
</ChatMessage.Assistant>

"use client";

// oxlint-disable-next-line import/no-unassigned-import
import "streamdown/styles.css";
import { Markdown } from "@thenamespace/uikit";

Use Markdown for AI responses that need headings, lists, inline code, and fenced code blocks with Namespace UIKit styling.

Streaming

"use client";

import { useEffect, useState } from "react";

import { Streamdown } from "streamdown";

The built-in Markdown component splits content into memoized blocks so token updates only re-render the blocks that changed.

With Streamdown

"use client";

import { useEffect, useState } from "react";

import { Streamdown } from "streamdown";

Use Streamdown when you want incomplete markdown repair, streaming animation, and a caret while the assistant response is still being generated.

import { Streamdown } from "streamdown";
import "streamdown/styles.css";

<Streamdown animated caret="block" isAnimating={isStreaming}>
  {response}
</Streamdown>;

Anatomy

import { Markdown } from "@thenamespace/uikit";

<Markdown>{response}</Markdown>;

CSS Classes

Base Classes

• .markdown - Root markdown content wrapper
• .markdown__block - Memoized block wrapper for each parsed markdown block

Element Classes

• .markdown__inline-code - Inline code styling

API Reference

Markdown

The root component. Renders markdown content with Namespace UIKit typography and code block styling.

Also supports all native div HTML attributes.