{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-pane",
  "type": "registry:ui",
  "title": "Split pane",
  "description": "Static two-column split pane that stacks on mobile and sits side by side from md up, with a hairline divider. Handy for compare views and editor previews.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/split-pane.tsx",
      "type": "registry:ui",
      "target": "components/ui/split-pane.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction SplitPane({\n  left,\n  right,\n  className,\n}: {\n  left: React.ReactNode\n  right: React.ReactNode\n  className?: string\n}) {\n  return (\n    <div data-slot=\"split-pane\" className={cn(\"grid min-h-64 grid-cols-1 overflow-hidden rounded-xl border border-border md:grid-cols-2\", className)}>\n      <div className=\"border-b border-border p-4 md:border-r md:border-b-0\">{left}</div>\n      <div className=\"p-4\">{right}</div>\n    </div>\n  )\n}\nexport { SplitPane }\n"
    }
  ]
}