CodeEditor

Syntax-highlighted editor with tabs, dirty indicators, format and copy actions.

bunx --bun shadcn@latest add https://shadcn-sandbox.vercel.app/r/code-editor.json

Preview

app/page.tsx

TSX

import { CodeEditor } from "@/components/sandbox/code-editor";

export function EditorPanel() {
  return (
    <CodeEditor
      files={files}
      activeFileId={activeFileId}
      onActiveFileChange={setActiveFileId}
      onChange={updateFileContent}
      onFormat={formatActiveFile}
    />
  );
}