{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shadcn-ui",
  "title": "Shadcn UI",
  "description": "Animated ShadCN UI SVG with glowing masked paths, motion shapes, and dynamic shimmering text with customizable props.",
  "dependencies": [
    "react",
    "next-themes",
    "motion"
  ],
  "files": [
    {
      "path": "registry/gammaui/shadcn-ui.tsx",
      "content": "\"use client\"\n\nimport { AnimationGeneratorType, motion } from \"motion/react\"\nimport { useTheme } from \"next-themes\"\n\nimport { cn } from \"@/lib/utils\"\nimport { TextShimmer } from \"@/components/motion-primitives/text-shimmer\"\n\nconst YourAppVariants = {\n  hidden: { opacity: 0, scale: 0.5 },\n  visible: {\n    opacity: 0.2,\n    scale: 1,\n  },\n}\n\nconst YourAppTransition: {\n  duration: number\n  type: AnimationGeneratorType\n  damping: number\n  bounce: number\n  mass: number\n} = {\n  duration: 0.2,\n  type: \"spring\",\n  damping: 20,\n  bounce: 0.1,\n  mass: 2,\n}\n\ninterface ShadCnUIProps {\n  className?: string\n  circleText?: string\n  triangleText?: string\n  diamondText?: string\n  animatedText?: string\n  animatedBoxText?: string\n  hintText?: string\n  appName?: string\n}\n\nexport default function ShadCnUI({\n  className,\n  animatedBoxText = \"Sidebar\",\n  animatedText = \"npx shadcn add\",\n  appName = \"Your App\",\n  circleText = \"Registry\",\n  diamondText = \"Registry\",\n  hintText = \"(components.json)\",\n  triangleText = \"AI\",\n}: ShadCnUIProps) {\n  const { resolvedTheme } = useTheme()\n  return (\n    <div className={cn(\"text-muted relative\", className)}>\n      {/* SVG */}\n      <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 200 100\">\n        <defs>\n          <mask id=\"shadn-mask1\">\n            <path\n              d=\"M 35 14 h 25 q 5 0 5 5 v 23 q 0 5 5 5 h 15\"\n              strokeWidth=\"0.5\"\n              stroke=\"white\"\n            />\n          </mask>\n          <mask id=\"shadn-mask2\">\n            <path d=\"M 30 50 h 52\" strokeWidth=\"0.5\" stroke=\"white\" />\n          </mask>\n          <mask id=\"shadn-mask3\">\n            <path\n              d=\"M 36.3 87 h 24 q 5 0 5 -5 v -24 q 0 -5 5 -5 h 15\"\n              strokeWidth=\"0.5\"\n              stroke=\"white\"\n            />\n          </mask>\n          <radialGradient id=\"shadcn-white-grad\" fx=\"1\">\n            <stop offset=\"0%\" stopColor=\"gray\" />\n            <stop offset=\"100%\" stopColor=\"transparent\" />\n          </radialGradient>\n        </defs>\n        {/* Paths */}\n        <g\n          stroke=\"#181818\"\n          fill=\"none\"\n          strokeWidth=\"0.3\"\n          strokeDasharray=\"100 100\"\n          pathLength=\"100\"\n          strokeOpacity=\"0\"\n        >\n          <path d=\"M 35 14 h 25 q 5 0 5 5 v 23 q 0 5 5 5 h 15\" />\n          <path d=\"M 30 50 h 52\" />\n          <path d=\"M 36.3 87 h 24 q 5 0 5 -5 v -24 q 0 -5 5 -5 h 15\" />\n          <path d=\"M 160 36 h -10 q -5 0 -5 5 v 4 q 0 5 -5 5 h -20\" />\n          <animate\n            attributeName=\"stroke-dashoffset\"\n            from=\"100\"\n            to=\"0\"\n            dur=\"1s\"\n            fill=\"freeze\"\n            calcMode=\"spline\"\n            keySplines=\"0.25,0.1,0.5,1\"\n            keyTimes=\"0; 1\"\n            begin=\"1.2s\"\n          />\n          <animate\n            attributeName=\"stroke-opacity\"\n            dur=\"0.2s\"\n            from=\"0\"\n            to=\"1\"\n            fill=\"freeze\"\n            begin=\"1.2s\"\n          />\n        </g>\n        {/* Left-Hand Shapes */}\n        <g stroke=\"#4d4d4d\" strokeWidth=\"0.2\" fill=\"none\">\n          {/* Registry Circle */}\n          <circle\n            cx=\"23\"\n            cy=\"14\"\n            r=\"12\"\n            strokeDasharray=\"2 3\"\n            fill=\"none\"\n            opacity=\"0.5\"\n            strokeOpacity=\"0.8\"\n            stroke={resolvedTheme === \"dark\" ? \"white\" : \"black\"}\n          />\n          <text\n            x=\"23\"\n            y=\"14\"\n            textAnchor=\"middle\"\n            dy=\".3em\"\n            fontSize=\"3.5\"\n            fontWeight=\"300\"\n          >\n            {circleText}\n          </text>\n          {/* AI Trinangle */}\n          <path\n            d=\"M 23 40 l 15 20 h -30 z\"\n            strokeDasharray=\"2 3\"\n            opacity=\"0.5\"\n            strokeOpacity=\"0.8\"\n            stroke={resolvedTheme === \"dark\" ? \"white\" : \"black\"}\n          />\n          <text\n            x=\"21\"\n            y=\"54\"\n            textAnchor=\"middle\"\n            dy=\".3em\"\n            fontSize=\"4\"\n            fontWeight=\"300\"\n          >\n            {triangleText}\n          </text>\n          <path\n            transform=\"scale(0.2)\"\n            opacity={0.5}\n            d=\"M130 260 a6 6 0 0 1-6 6 6 6 0 0 1 6 6 6 6 0 0 1 6-6 6 6 0 0 1-6-6m7.5 11a2.5 2.5 0 0 1-2.5 2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1-2.5-2.5\"\n            fill=\"#71717A\"\n            strokeWidth=\"1\"\n          />\n          {/* Registry Polygon */}\n          <path\n            d=\"M 23 73 l 14 14 l -14 14 l -14 -14 z\"\n            strokeDasharray=\"2 3\"\n            opacity=\"0.5\"\n            strokeOpacity=\"0.8\"\n            stroke={resolvedTheme === \"dark\" ? \"white\" : \"black\"}\n          />\n          <text\n            x=\"23\"\n            y=\"87\"\n            textAnchor=\"middle\"\n            dy=\".3em\"\n            fontSize=\"3.5\"\n            stroke=\"#4d4d4d\"\n            fontWeight=\"300\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            {diamondText}\n          </text>\n        </g>\n        {/* Right-Hand Shapes */}\n        <g stroke=\"currentColor\" strokeWidth=\"0.2\" fill=\"none\">\n          <motion.rect\n            variants={{\n              ...YourAppVariants,\n              visible: { ...YourAppVariants.visible, opacity: 1 },\n            }}\n            initial=\"hidden\"\n            animate=\"visible\"\n            transition={YourAppTransition}\n            x=\"160\"\n            y=\"29.5\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"3\"\n            strokeDasharray=\"2 2\"\n          />\n          <motion.rect\n            variants={YourAppVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            transition={{ ...YourAppTransition, delay: 0.3 }}\n            x=\"176\"\n            y=\"29.5\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"3\"\n            fill=\"#0C0D0E\"\n            strokeOpacity=\"0.4\"\n            stroke=\"white\"\n          />\n          <motion.rect\n            variants={YourAppVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            transition={{ ...YourAppTransition, delay: 0.6 }}\n            x=\"160\"\n            y=\"45.5\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"3\"\n            fill=\"#0C0D0E\"\n            strokeOpacity=\"0.4\"\n            stroke=\"white\"\n          />\n          <motion.rect\n            variants={YourAppVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            transition={{ ...YourAppTransition, delay: 0.9 }}\n            x=\"176\"\n            y=\"45.5\"\n            width=\"14\"\n            height=\"14\"\n            rx=\"3\"\n            fill=\"#0C0D0E\"\n            strokeOpacity=\"0.4\"\n            stroke=\"white\"\n          />\n          <motion.text\n            variants={{\n              ...YourAppVariants,\n              visible: { ...YourAppVariants.visible, opacity: 1 },\n            }}\n            initial=\"hidden\"\n            animate=\"visible\"\n            transition={{ ...YourAppTransition, delay: 1.5 }}\n            x=\"175\"\n            y=\"64\"\n            textAnchor=\"middle\"\n            dy=\".3em\"\n            fontSize=\"3.5\"\n            fill=\"#606067\"\n            fontWeight=\"200\"\n          >\n            {appName}\n          </motion.text>\n        </g>\n        {/* Animated Lights */}\n        <g mask=\"url(#shadn-mask1)\">\n          <circle\n            className=\"shadcn shadcn-line-1\"\n            cx=\"0\"\n            cy=\"0\"\n            r=\"8\"\n            fill=\"url(#shadcn-white-grad)\"\n          />\n        </g>\n        <g mask=\"url(#shadn-mask2)\">\n          <circle\n            className=\"shadcn shadcn-line-2\"\n            cx=\"0\"\n            cy=\"0\"\n            r=\"8\"\n            fill=\"url(#shadcn-white-grad)\"\n          />\n        </g>\n        <g mask=\"url(#shadn-mask3)\">\n          <circle\n            className=\"shadcn shadcn-line-3\"\n            cx=\"0\"\n            cy=\"0\"\n            r=\"8\"\n            fill=\"url(#shadcn-white-grad)\"\n          />\n        </g>\n        {/* Animated - Comp Box */}\n        <g\n          className=\"compBox\"\n          stroke=\"currentColor\"\n          strokeWidth=\"0.2\"\n          style={{\n            transform: \"translateX(0px) translateY(-0.5px)\",\n            transformOrigin: \"7px 7px\",\n          }}\n        >\n          <rect width=\"14\" height=\"14\" rx=\"3\" fill=\"#131313\" stroke=\"#1D1D1D\" />\n          <text\n            x=\"7\"\n            y=\"5\"\n            textAnchor=\"middle\"\n            fontSize=\"3\"\n            stroke=\"#71717A\"\n            fontWeight=\"200\"\n          >\n            {\"</>\"}\n          </text>\n          <text\n            x=\"7\"\n            y=\"14\"\n            textAnchor=\"middle\"\n            fontSize=\"2.5\"\n            stroke=\"#71717A\"\n            fontWeight=\"200\"\n            style={{\n              transformOrigin: \"7px 11.5px\",\n              rotate: \"180deg\",\n            }}\n          >\n            {animatedBoxText}\n          </text>\n        </g>\n      </svg>\n      {/* Shadcn Box */}\n      <div className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n        {/* Shadcn TextBox */}\n        <div className=\"relative flex justify-center rounded-md bg-[#1c1c1c] px-4 py-1 text-sm shadow-sm\">\n          <p className=\"absolute -bottom-5 text-[10px] text-black dark:text-zinc-600\">\n            {hintText}\n          </p>\n          <TextShimmer delay={3.8} repeatDelay={1.8}>\n            {animatedText}\n          </TextShimmer>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}