{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-editor-frame",
  "type": "registry:ui",
  "title": "Code editor frame",
  "description": "Editor style frame with a monospaced filename tab and a code area. Wrap snippets, editors or diffs so they read as a file in your React docs or app.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/code-editor-frame.tsx",
      "type": "registry:ui",
      "target": "components/ui/code-editor-frame.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction CodeEditorFrame({\n  filename,\n  children,\n  className,\n}: {\n  filename?: string\n  children?: React.ReactNode\n  className?: string\n}) {\n  return (\n    <div data-slot=\"code-editor-frame\" className={cn(\"overflow-hidden rounded-xl border border-border bg-surface\", className)}>\n      {filename ? (\n        <div className=\"border-b border-border bg-sunken px-3 py-1.5 font-mono text-[11px] text-fg-muted\">\n          {filename}\n        </div>\n      ) : null}\n      <div className=\"min-h-40 p-3 font-mono text-[12px] leading-relaxed text-fg\">{children}</div>\n    </div>\n  )\n}\nexport { CodeEditorFrame }\n"
    }
  ]
}