Kits

MarkdownBlock

Assistant markdown output rendered to prose, with a header and copy-source action.

Markdown

Notes

Memory / Studio / Platform / Gallery

Design mode in foreground UI
- Import in website / other
Text editor with [?] modes

Core ideas

Safe area for text edit
Resize -> mobile

Possible components / tools

Motion / video
Full-screen
Mini-browser
Animation
Agent slot
Extension
Demo / memory stream
Game slot
Workflow grid panel / scene / mini
Predefined memory for vibe

UX / Website Builder

You always need to branch
- Less is more
Hierarchy is the key
- Think about advanced users
- Estimate how complex the feature is
- Check if the user can understand it

Open Question

Should we have rules about what is beautiful design?

Composition

Anatomy

<MarkdownBlock>
- <MarkdownBlockHeader>
  - <MarkdownBlockTitle />
  - <MarkdownBlockCopy />
  </MarkdownBlockHeader>
- <MarkdownBlockContent />
</MarkdownBlock>

Installation

Use this command to install the component.

Registry command

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

See registry manifest

Usage

import {

MarkdownBlock,

MarkdownBlockContent,

MarkdownBlockCopy,

MarkdownBlockHeader,

MarkdownBlockTitle,

} from "@/components/control-ui/markdown-block";

export function Example({ markdown }: { markdown: string }) {

return (

<MarkdownBlock code={markdown}>

<MarkdownBlockHeader>

<MarkdownBlockTitle />

<MarkdownBlockCopy />

</MarkdownBlockHeader>

<MarkdownBlockContent />

</MarkdownBlock>

);

}

Dependencies

Copy hooksrc/registry/hooks/use-copy-to-clipboard.tsHook

CodecodePrimitive MarkdownmarkdownPrimitive Scroll areascroll-areaPrimitive

Raw code

Installed component source and support files

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

"use client";

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

import { createContext, useContext } from "react";

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

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

import { CodeCopy, type CodeCopyProps } from "@/components/control-ui/ui/code";

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

import { ScrollArea } from "@/components/control-ui/ui/scroll-area";

const MarkdownBlockContext = createContext<string | null>(null);

function useMarkdownBlockContext() {

const code = useContext(MarkdownBlockContext);

if (code === null) throw new Error("MarkdownBlock compound components must be rendered inside <MarkdownBlock>.");

return code;

}

export type MarkdownBlockProps = Omit<ComponentProps<"figure">, "style"> & {

code: string;

style?: CSSProperties & MarkdownBlockKnobStyle;

};

export function MarkdownBlock({ code, className, children, ...props }: MarkdownBlockProps) {

return (

<MarkdownBlockContext.Provider value={code}>

<figure

data-control-ui="markdown-block"

data-control-family="markdown-block"

data-slot="root"

data-surface="panel"

className={cn("overflow-hidden", className)}

{...props}

>

{children}

</figure>

</MarkdownBlockContext.Provider>

);

}

export type MarkdownBlockHeaderProps = Omit<ComponentProps<"figcaption">, "style"> & {

style?: CSSProperties & MarkdownBlockKnobStyle;

};

export function MarkdownBlockHeader({ className, ...props }: MarkdownBlockHeaderProps) {

return (

<figcaption

data-control-ui="markdown-block"

data-control-family="markdown-block"

data-slot="header"

className={cn("flex items-center justify-between", className)}

{...props}

/>

);

}

export type MarkdownBlockTitleProps = Omit<ComponentProps<"div">, "style"> & {

style?: CSSProperties & MarkdownBlockKnobStyle;

};

export function MarkdownBlockTitle({ children = "Markdown", className, ...props }: MarkdownBlockTitleProps) {

return (

<div

data-control-ui="markdown-block"

data-control-family="markdown-block"

data-slot="title"

className={cn("flex min-w-0 items-center", className)}

{...props}

>

<span

aria-hidden="true"

data-control-ui="markdown-block"

data-control-family="markdown-block"

data-slot="title-icon"

className="flex items-center justify-center"

>

MD

</span>

<span className="truncate" title={typeof children === "string" ? children : undefined}>

{children}

</span>

</div>

);

}

export type MarkdownBlockCopyProps = Omit<CodeCopyProps, "value">;

// IS CodeCopy, so markdown block's copy and a code block's copy can never drift

export function MarkdownBlockCopy({ "aria-label": ariaLabel = "Copy markdown", ...props }: MarkdownBlockCopyProps) {

const code = useMarkdownBlockContext();

return <CodeCopy value={code} aria-label={ariaLabel} {...props} />;

}

export type MarkdownBlockContentProps = ComponentProps<"div"> & { style?: CSSProperties & MarkdownBlockKnobStyle };

export function MarkdownBlockContent({ children, className, ...props }: MarkdownBlockContentProps) {

const code = useMarkdownBlockContext();

return (

<ScrollArea maxHeight="420px">

      <div data-control-ui="markdown-block" data-control-family="markdown-block" data-slot="content" className={className} {...props}>

{children ?? <Markdown content={code} />}

</div>

</ScrollArea>

);

}

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-block-* · 8 knobsHow the cascade resolves

--cui-markdown-block-radius<length-percentage>var(--radius-panel)

--cui-markdown-block-background<color>var(--background)

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

--cui-markdown-block-border-width<length>var(--control-rim-width)

--cui-markdown-block-shadow*var(--shadow-sm)

--cui-markdown-block-header-border-color<color>var(--border)

--cui-markdown-block-header-border-width<length>var(--control-rim-width)

--cui-markdown-block-icon-background<color>oklch(from var(--foreground) l c h / 0.08)