Refined UI

An opinionated, customizable superset of shadcn/ui

AgentsPrimitivesSkillsSkins
Integration
Guides
  • Overview
  • Get started
  • Shadcn compatibility
  • Architecture
  • Agent surface
Agents
  • Action Bar
  • Audio Recorder
  • Audio VisualizerBetaBeta — the props contract is close to final, but small breaking changes can still land.
  • Chat Input
  • Chat Input Attachment
  • Chat Message
  • Chat Scene
  • Code Block Editor
  • Dynamic NotificationExpExperimental — the contract and the rendering can change without notice. Own the installed copy before shipping it.
  • Environment Variables
  • Inline Attachment
  • Markdown Block
  • Task List
  • Thread Rail
  • Tool Call
  • User Ask
Blocks
  • Chat
  • Theme toggle
  1. Agents
  3. CodeBlockEditor
Agents

CodeBlockEditor

Editable code surface with Shiki highlighting and token-based light/dark themes.

Composition

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

Parts

Exported compound parts from the installed source.

CodeBlockEditor
├── CodeBlockEditorHeader
├── CodeBlockEditorTitle
├── CodeBlockEditorActions
├── CodeBlockEditorCopy
├── CodeBlockEditorFloatingCopy
├── CodeBlockEditorContent
└── CodeBlockEditorTextarea

This agent installs from the chat registry. Install the bundle with the command above, or inspect the source below.

Registry command
npx shadcn@latest add http://127.0.0.1:3000/r/refined/chat.json
See registry manifest

Usage

import {
CodeBlockEditor,
CodeBlockEditorActions,
CodeBlockEditorContent,
CodeBlockEditorCopy,
CodeBlockEditorHeader,
CodeBlockEditorTextarea,
CodeBlockEditorTitle,
} from "@/components/refined-ui/code-block-editor";
import { highlightCodeToTokens } from "@/components/refined-ui/lib/code-block-shiki";
​
export async function ServerHighlightedSnippet({ code }: { code: string }) {
const tokens = await highlightCodeToTokens(code, "tsx");
​
return (
<CodeBlockEditor>
<CodeBlockEditorHeader>
<CodeBlockEditorTitle>agent-step.tsx</CodeBlockEditorTitle>
<CodeBlockEditorActions>
<CodeBlockEditorCopy value={code} />
</CodeBlockEditorActions>
</CodeBlockEditorHeader>
<CodeBlockEditorContent code={code} lang="tsx" tokens={tokens} />
</CodeBlockEditor>
);
}
​
export function ClientHighlightedSnippet({ json }: { json: string }) {
return (
<CodeBlockEditor>
<CodeBlockEditorHeader>
<CodeBlockEditorTitle>tool-result.json</CodeBlockEditorTitle>
<CodeBlockEditorActions>
<CodeBlockEditorCopy value={json} />
</CodeBlockEditorActions>
</CodeBlockEditorHeader>
<CodeBlockEditorContent code={json} lang="json" />
</CodeBlockEditor>
);
}
​
export function EditableSnippet({ code }: { code: string }) {
return (
<CodeBlockEditor>
<CodeBlockEditorHeader>
<CodeBlockEditorTitle>scratch.tsx</CodeBlockEditorTitle>
</CodeBlockEditorHeader>
<CodeBlockEditorTextarea defaultValue={code} fileName="scratch.tsx" />
</CodeBlockEditor>
);
}
​

Installed dependencies

Installed with this agent because the visible component depends on them; they are support files, not separate product surfaces.

Shiki helpersrc/registry/lib/code-block-shiki.tsHelper
Copy hooksrc/registry/hooks/use-copy-to-clipboard.tsHook
Tooltip slotsrc/registry/sources/refined/ui/tooltip.tsxSkin

Raw code

Primary installed agent source

Component
src/registry/sources/refined/code-block-editor.tsx

Primitives

This agent composes these library primitives, installed under components/refined-ui/ui/*.

Buttoncomponents/refined-ui/ui/button.tsxLibrary slotScroll areacomponents/refined-ui/ui/scroll-area.tsxLibrary slotTooltipcomponents/refined-ui/ui/tooltip.tsxLibrary slot

On this page

  • Preview
  • Composition
  • Installation
  • Usage
  • Dependencies
  • Source
  • Primitives
client-highlight.tsx
import {
  CodeBlockEditor,
  CodeBlockEditorActions,
  CodeBlockEditorContent,
  CodeBlockEditorCopy,
  CodeBlockEditorHeader,
  CodeBlockEditorTitle,
} from "@/components/refined-ui/code-block-editor";

export function ClientHighlightedToolResult({ json }: { json: string }) {
  return (
    <CodeBlockEditor>
      <CodeBlockEditorHeader>
        <CodeBlockEditorTitle>tool-result.json</CodeBlockEditorTitle>
        <CodeBlockEditorActions>
          <CodeBlockEditorCopy value={json} />
        </CodeBlockEditorActions>
      </CodeBlockEditorHeader>
      <CodeBlockEditorContent code={json} lang="json" />
    </CodeBlockEditor>
  );
}