{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-03",
  "title": "Linear Progress with Custom Color",
  "description": "A linear progress component with custom color",
  "registryDependencies": [
    "progress"
  ],
  "files": [
    {
      "path": "src/components/customized/progress/progress-03.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Progress } from \"@/registry/ui/progress\";\n\nexport default function ProgressColorDemo() {\n  const [progress, setProgress] = React.useState(13);\n\n  React.useEffect(() => {\n    const timer = setTimeout(() => setProgress(66), 500);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-6\">\n      <Progress className=\"w-[60%] [&>div]:bg-green-500\" value={progress} />\n      <Progress className=\"w-[60%] [&>div]:bg-indigo-500\" value={progress} />\n      <Progress className=\"w-[60%] [&>div]:bg-rose-500\" value={progress} />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}