{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker-demo",
  "type": "registry:component",
  "title": "Color Picker Demo",
  "description": "A demo of the color picker",
  "registryDependencies": [
    "https://ui.ednesdayw.com/r/color-picker.json"
  ],
  "files": [
    {
      "path": "src/registry/example/color-picker/demo.tsx",
      "content": "import { Label } from \"@/components/ui/label\";\nimport { ColorPicker } from \"@/components/ui/color-picker\";\nimport { useState } from \"react\";\n\nexport const ColorPickerDemo = () => {\n  const [hex, setHex] = useState(\"#4ec4b8\");\n  const [hexAlpha, setHexAlpha] = useState(\"#4ec4b880\");\n\n  return (\n    <div className=\"flex flex-col gap-4 w-full max-w-32\">\n      <div className=\"flex gap-1.5 items-center\">\n        <ColorPicker value={hex} onChange={(value) => setHex(value)} />\n        <div className=\"flex flex-col gap-0.5\">\n          <Label>Hex</Label>\n          <span className=\"text-sm text-muted-foreground\">{hex}</span>\n        </div>\n      </div>\n      <div className=\"flex gap-1.5 items-center\">\n        <ColorPicker\n          type=\"hex-alpha\"\n          value={hexAlpha}\n          onChange={(value) => setHexAlpha(value)}\n        />\n        <div className=\"flex flex-col gap-0.5\">\n          <Label>Hex Alpha</Label>\n          <span className=\"text-sm text-muted-foreground\">{hexAlpha}</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/color-picker-demo.tsx"
    }
  ]
}