{
  "name": "color-picker-demo",
  "type": "registry:example",
  "registryDependencies": [
    "color-picker"
  ],
  "files": [
    {
      "path": "examples/color-picker-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  ColorPicker,\n  ColorPickerAlphaSlider,\n  ColorPickerArea,\n  ColorPickerContent,\n  ColorPickerEyeDropper,\n  ColorPickerFormatSelect,\n  ColorPickerHueSlider,\n  ColorPickerInput,\n  ColorPickerSwatch,\n  ColorPickerTrigger,\n} from \"@/registry/bases/base/ui/color-picker\";\n\nexport default function ColorPickerDemo() {\n  return (\n    <ColorPicker defaultFormat=\"hex\" defaultValue=\"#3b82f6\">\n      <ColorPickerTrigger render={<ColorPickerSwatch />} />\n      <ColorPickerContent>\n        <ColorPickerArea />\n        <div className=\"flex items-center gap-2\">\n          <ColorPickerEyeDropper />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <ColorPickerHueSlider />\n            <ColorPickerAlphaSlider />\n          </div>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <ColorPickerFormatSelect />\n          <ColorPickerInput />\n        </div>\n      </ColorPickerContent>\n    </ColorPicker>\n  );\n}\n",
      "target": ""
    }
  ]
}