Primitives

Markdown

Rendered agent markdown (GFM) whose code fences compose Code, and diff fences compose CodeDiff.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Root

Single-slot surface with no nested parts.

Markdown

The refined source installs this primitive from src/registry/sources/refined/ui/markdown.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/markdown.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Code slotsrc/registry/sources/refined/ui/code.tsxSupport

Code diff slotsrc/registry/sources/refined/ui/code-diff.tsxSupport

Diff enginesrc/registry/lib/diff.tsSupport

Shiki tokenizersrc/registry/lib/code-tokens.tsSupport

Code + diff tokenssrc/registry/sources/refined/code.cssSupport

Raw code

Primary installed primitive source

Markdown slot

src/registry/sources/refined/ui/markdown.tsx

"use client";

import type { ComponentProps } from "react";

import { Streamdown } from "streamdown";

import type { MarkdownProps } from "@/components/refined-ui/contracts";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

import { markdownComponents } from "@/components/refined-ui/ui/markdown-elements";

// Markdown: GFM output, 3rd consumer of shared code surface — fenced code→<Code>, ```diff→<CodeDiff>; one skin-aware renderer.

// Prose is token-styled; chrome-less by design (no corner surface) — drops straight into a chat message.

// MarkdownBlock composes this for a copyable, headered block; this is the bare renderer.

export type { MarkdownProps };

export function Markdown({ content, className, ...props }: MarkdownProps) {

return (

<div

data-ui="agent"

data-component="markdown"

      className={cn("text-label text-foreground/90 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", skinSlot("markdown", {}), className)}

{...props}

>

<Streamdown

mode="streaming"

parseIncompleteMarkdown

controls={false}

components={markdownComponents}

className="space-y-4 whitespace-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"

>

{content}

</Streamdown>

</div>

);

}

export type MarkdownComponentProps = ComponentProps<typeof Markdown>;

Refined UI

Markdown

Composition

Root

Installed dependencies

Raw code