Primitives

Markdown

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

Deploy checklist

Here's the plan and a quick fix.

Run the migration
Restart the worker
Verify GET /health

A change to greet.ts:

file

+1−1

file
Unchanged line 1: export function greet(name) {
Deleted line 2:   return "Hello " + name;
Added line 2:   return `Hello ${name}!`;
Unchanged line 3: }

export function greet(name) {

return "Hello " + name;

return `Hello ${name}!`;

}

And the new helper:

export const slugify = (s: string) => s.trim().toLowerCase().replace(/\s+/g, "-");

Env	Status
prod	✅
staging	⏳

Composition

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

Parts

Exported compound parts from the installed source.

MarkdownRoot
└── Markdown

First install and activate one skin. Core deliberately contains no visual token defaults.

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

Registry command

npx shadcn@latest add https://control-ui.dev/r/markdown.json

See registry manifest

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-markdown-* · 9 knobsHow the cascade resolves

--cui-markdown-foreground<color>oklch(from var(--foreground) l c h / 0.9)

--cui-markdown-blockquote-border-color<color>var(--border)

--cui-markdown-blockquote-foreground<color>var(--muted-foreground)

--cui-markdown-inline-code-background<color>color-mix(in oklab, var(--foreground) 8%, transparent)

--cui-markdown-inline-code-foreground<color>var(--foreground)

--cui-markdown-inline-code-radius<length-percentage>+0.25rem

--cui-markdown-link-foreground<color>var(--primary-text)

--cui-markdown-table-cell-border-color<color>var(--border)

--cui-markdown-table-header-background<color>var(--muted)

Installed dependencies

Support files installed with this primitive — shared ones arrive once with your first Control UI component. Public dependencies stay linked to their own pages.

Markdown elementssrc/registry/sources/control-ui/ui/markdown-elements.tsxSupport

Diff enginesrc/registry/lib/diff.tsSupport

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

Code + diff tokenssrc/registry/sources/control-ui/code.cssSupport

Library dependencies

Public registry items keep their source on their own documentation page instead of duplicating it here.

CodecodePrimitive Code Diffcode-diffPrimitive

Raw code

This primitive's source and the support files it installs with

src/registry/sources/control-ui/ui/markdown.tsx

"use client";

import type { ComponentProps, CSSProperties } from "react";

import { Streamdown } from "streamdown";

import type { MarkdownKnobStyle } from "@/components/control-ui/knob-contracts/markdown-knobs";

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

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

export type MarkdownProps = Omit<ComponentProps<"div">, "children" | "style"> & {

content: string;

style?: CSSProperties & MarkdownKnobStyle;

};

// Chrome-less on purpose so it drops straight into chat message; MarkdownBlock composes it for headered, copyable block.

// Markdown parts read their paint from knobs this root declares, so prose assembled elsewhere (MDX) needs it too.

export function MarkdownRoot({

className,

...props

}: Omit<ComponentProps<"div">, "style"> & { style?: CSSProperties & MarkdownKnobStyle }) {

return (

<div

data-control-ui="markdown"

data-control-family="markdown"

data-slot="root"

className={cn("[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className)}

{...props}

/>

);

}

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

return (

<MarkdownRoot className={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>

</MarkdownRoot>

);

}

export type MarkdownComponentProps = ComponentProps<typeof Markdown>;