{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "electric-border",
  "type": "registry:block",
  "title": "Electric border",
  "description": "Electric border",
  "files": [
    {
      "path": "components/usages/electricborderusage.tsx",
      "content": "// CREDIT\n// Component inspired by @BalintFerenczy on X\n// https://codepen.io/BalintFerenczy/pen/KwdoyEN\n\nimport { useState } from \"react\";\n\nimport ElectricBorder from \"@/registry/open-source/electric-border\";\n\nimport { Slider } from \"../ui/slider\";\n\nexport default function Usage() {\n\tconst [cardProps, setCardProps] = useState({\n\t\tcolor: \"#7df9ff\",\n\t\tspeed: 1,\n\t\tchaos: 0.5,\n\t\tthickness: 2,\n\t\tradius: 16,\n\t});\n\n\tconst [buttonProps, setButtonProps] = useState({\n\t\tcolor: \"#B19EEF\",\n\t\tspeed: 1,\n\t\tchaos: 0.5,\n\t\tthickness: 2,\n\t\tradius: 999,\n\t});\n\n\tconst [circleProps, setCircleProps] = useState({\n\t\tcolor: \"#7df9ff\",\n\t\tspeed: 1,\n\t\tchaos: 0.5,\n\t\tthickness: 2,\n\t\tradius: \"50%\",\n\t});\n\tconst activeProps = cardProps;\n\n\tconst setActiveProps = setCardProps;\n\n\treturn (\n\t\t<div className=\"flex\">\n\t\t\t<div>\n\t\t\t\t<Slider\n\t\t\t\t\ttitle=\"Speed\"\n\t\t\t\t\tmin={0.1}\n\t\t\t\t\tmax={3}\n\t\t\t\t\tstep={0.1}\n\t\t\t\t\tvalue={[activeProps.speed]}\n\t\t\t\t\tonChange={(v) => setActiveProps((p) => ({ ...p, speed: v }))}\n\t\t\t\t/>\n\t\t\t\t<Slider\n\t\t\t\t\ttitle=\"Chaos\"\n\t\t\t\t\tmin={0.1}\n\t\t\t\t\tmax={1}\n\t\t\t\t\tstep={0.1}\n\t\t\t\t\tvalue={[activeProps.chaos]}\n\t\t\t\t\tonChange={(v) => setActiveProps((p) => ({ ...p, chaos: v }))}\n\t\t\t\t/>\n\t\t\t\t<Slider\n\t\t\t\t\ttitle=\"Thickness\"\n\t\t\t\t\tmin={1}\n\t\t\t\t\tmax={5}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={[activeProps.thickness]}\n\t\t\t\t\tvalueUnit=\"px\"\n\t\t\t\t\tonChange={(v) => setActiveProps((p) => ({ ...p, thickness: v }))}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<ElectricBorder\n\t\t\t\tcolor={activeProps.color}\n\t\t\t\tspeed={activeProps.speed}\n\t\t\t\tchaos={activeProps.chaos}\n\t\t\t\tthickness={activeProps.thickness}\n\t\t\t\tstyle={{ borderRadius: activeProps.radius }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ width: \"300px\", height: \"360px\" }}\n\t\t\t\t\tclassName=\"eb-demo-card\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"eb-demo-badge\">Featured</div>\n\t\t\t\t\t<h3 className=\"eb-demo-title\">Electric Card</h3>\n\t\t\t\t\t<p className=\"eb-demo-desc\">\n\t\t\t\t\t\tAn electric border for shocking your users, the right way.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"eb-demo-row\">\n\t\t\t\t\t\t<span className=\"eb-demo-chip\">Live</span>\n\t\t\t\t\t\t<span className=\"eb-demo-chip\">v1.0</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button className=\"eb-demo-cta\">Get Started</button>\n\t\t\t\t</div>\n\t\t\t</ElectricBorder>\n\t\t\t<ElectricBorder\n\t\t\t\tcolor={activeProps.color}\n\t\t\t\tspeed={activeProps.speed}\n\t\t\t\tchaos={activeProps.chaos}\n\t\t\t\tthickness={activeProps.thickness}\n\t\t\t\tstyle={{ borderRadius: activeProps.radius }}\n\t\t\t\tclassName=\"eb-button-container w-fit h-fit\"\n\t\t\t>\n\t\t\t\t<div className=\"eb-demo-button-wrap w-fit h-fit\">\n\t\t\t\t\t<button className=\"eb-demo-button\">Learn More</button>\n\t\t\t\t</div>\n\t\t\t</ElectricBorder>\n\t\t\t<ElectricBorder\n\t\t\t\tcolor={activeProps.color}\n\t\t\t\tspeed={activeProps.speed}\n\t\t\t\tchaos={activeProps.chaos}\n\t\t\t\tthickness={activeProps.thickness}\n\t\t\t\tstyle={{ borderRadius: activeProps.radius }}\n\t\t\t\tclassName=\"w-fit h-fit\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: \"200px\",\n\t\t\t\t\t\theight: \"200px\",\n\t\t\t\t\t\tborderRadius: \"50%\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</ElectricBorder>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/electricborderusage.tsx",
      "content": "// CREDIT\n// Component inspired by @BalintFerenczy on X\n// https://codepen.io/BalintFerenczy/pen/KwdoyEN\n\nimport { useState } from \"react\";\n\nimport ElectricBorder from \"@/registry/open-source/electric-border\";\n\nimport { Slider } from \"../ui/slider\";\n\nexport default function Usage() {\n\tconst [cardProps, setCardProps] = useState({\n\t\tcolor: \"#7df9ff\",\n\t\tspeed: 1,\n\t\tchaos: 0.5,\n\t\tthickness: 2,\n\t\tradius: 16,\n\t});\n\n\tconst [buttonProps, setButtonProps] = useState({\n\t\tcolor: \"#B19EEF\",\n\t\tspeed: 1,\n\t\tchaos: 0.5,\n\t\tthickness: 2,\n\t\tradius: 999,\n\t});\n\n\tconst [circleProps, setCircleProps] = useState({\n\t\tcolor: \"#7df9ff\",\n\t\tspeed: 1,\n\t\tchaos: 0.5,\n\t\tthickness: 2,\n\t\tradius: \"50%\",\n\t});\n\tconst activeProps = cardProps;\n\n\tconst setActiveProps = setCardProps;\n\n\treturn (\n\t\t<div className=\"flex\">\n\t\t\t<div>\n\t\t\t\t<Slider\n\t\t\t\t\ttitle=\"Speed\"\n\t\t\t\t\tmin={0.1}\n\t\t\t\t\tmax={3}\n\t\t\t\t\tstep={0.1}\n\t\t\t\t\tvalue={[activeProps.speed]}\n\t\t\t\t\tonChange={(v) => setActiveProps((p) => ({ ...p, speed: v }))}\n\t\t\t\t/>\n\t\t\t\t<Slider\n\t\t\t\t\ttitle=\"Chaos\"\n\t\t\t\t\tmin={0.1}\n\t\t\t\t\tmax={1}\n\t\t\t\t\tstep={0.1}\n\t\t\t\t\tvalue={[activeProps.chaos]}\n\t\t\t\t\tonChange={(v) => setActiveProps((p) => ({ ...p, chaos: v }))}\n\t\t\t\t/>\n\t\t\t\t<Slider\n\t\t\t\t\ttitle=\"Thickness\"\n\t\t\t\t\tmin={1}\n\t\t\t\t\tmax={5}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={[activeProps.thickness]}\n\t\t\t\t\tvalueUnit=\"px\"\n\t\t\t\t\tonChange={(v) => setActiveProps((p) => ({ ...p, thickness: v }))}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<ElectricBorder\n\t\t\t\tcolor={activeProps.color}\n\t\t\t\tspeed={activeProps.speed}\n\t\t\t\tchaos={activeProps.chaos}\n\t\t\t\tthickness={activeProps.thickness}\n\t\t\t\tstyle={{ borderRadius: activeProps.radius }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{ width: \"300px\", height: \"360px\" }}\n\t\t\t\t\tclassName=\"eb-demo-card\"\n\t\t\t\t>\n\t\t\t\t\t<div className=\"eb-demo-badge\">Featured</div>\n\t\t\t\t\t<h3 className=\"eb-demo-title\">Electric Card</h3>\n\t\t\t\t\t<p className=\"eb-demo-desc\">\n\t\t\t\t\t\tAn electric border for shocking your users, the right way.\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"eb-demo-row\">\n\t\t\t\t\t\t<span className=\"eb-demo-chip\">Live</span>\n\t\t\t\t\t\t<span className=\"eb-demo-chip\">v1.0</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button className=\"eb-demo-cta\">Get Started</button>\n\t\t\t\t</div>\n\t\t\t</ElectricBorder>\n\t\t\t<ElectricBorder\n\t\t\t\tcolor={activeProps.color}\n\t\t\t\tspeed={activeProps.speed}\n\t\t\t\tchaos={activeProps.chaos}\n\t\t\t\tthickness={activeProps.thickness}\n\t\t\t\tstyle={{ borderRadius: activeProps.radius }}\n\t\t\t\tclassName=\"eb-button-container w-fit h-fit\"\n\t\t\t>\n\t\t\t\t<div className=\"eb-demo-button-wrap w-fit h-fit\">\n\t\t\t\t\t<button className=\"eb-demo-button\">Learn More</button>\n\t\t\t\t</div>\n\t\t\t</ElectricBorder>\n\t\t\t<ElectricBorder\n\t\t\t\tcolor={activeProps.color}\n\t\t\t\tspeed={activeProps.speed}\n\t\t\t\tchaos={activeProps.chaos}\n\t\t\t\tthickness={activeProps.thickness}\n\t\t\t\tstyle={{ borderRadius: activeProps.radius }}\n\t\t\t\tclassName=\"w-fit h-fit\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: \"200px\",\n\t\t\t\t\t\theight: \"200px\",\n\t\t\t\t\t\tborderRadius: \"50%\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</ElectricBorder>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/electric-border.tsx",
      "content": "import React, {\n\tCSSProperties,\n\tPropsWithChildren,\n\tuseEffect,\n\tuseId,\n\tuseLayoutEffect,\n\tuseRef,\n} from \"react\";\n\ntype ElectricBorderProps = PropsWithChildren<{\n\tcolor?: string;\n\tspeed?: number;\n\tchaos?: number;\n\tthickness?: number;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n}>;\n\nfunction hexToRgba(hex: string, alpha = 1): string {\n\tif (!hex) return `rgba(0,0,0,${alpha})`;\n\tlet h = hex.replace(\"#\", \"\");\n\tif (h.length === 3) {\n\t\th = h\n\t\t\t.split(\"\")\n\t\t\t.map((c) => c + c)\n\t\t\t.join(\"\");\n\t}\n\tconst int = parseInt(h, 16);\n\tconst r = (int >> 16) & 255;\n\tconst g = (int >> 8) & 255;\n\tconst b = int & 255;\n\treturn `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\nconst ElectricBorder: React.FC<ElectricBorderProps> = ({\n\tchildren,\n\tcolor = \"#5227FF\",\n\tspeed = 1,\n\tchaos = 1,\n\tthickness = 2,\n\tclassName,\n\tstyle,\n}) => {\n\tconst rawId = useId().replace(/[:]/g, \"\");\n\tconst filterId = `turbulent-displace-${rawId}`;\n\tconst svgRef = useRef<SVGSVGElement | null>(null);\n\tconst rootRef = useRef<HTMLDivElement | null>(null);\n\tconst strokeRef = useRef<HTMLDivElement | null>(null);\n\n\tconst updateAnim = () => {\n\t\tconst svg = svgRef.current;\n\t\tconst host = rootRef.current;\n\t\tif (!svg || !host) return;\n\n\t\tif (strokeRef.current) {\n\t\t\tstrokeRef.current.style.filter = `url(#${filterId})`;\n\t\t}\n\n\t\tconst width = Math.max(\n\t\t\t1,\n\t\t\tMath.round(host.clientWidth || host.getBoundingClientRect().width || 0)\n\t\t);\n\t\tconst height = Math.max(\n\t\t\t1,\n\t\t\tMath.round(\n\t\t\t\thost.clientHeight || host.getBoundingClientRect().height || 0\n\t\t\t)\n\t\t);\n\n\t\tconst dyAnims = Array.from(\n\t\t\tsvg.querySelectorAll<SVGAnimateElement>(\n\t\t\t\t'feOffset > animate[attributeName=\"dy\"]'\n\t\t\t)\n\t\t);\n\t\tif (dyAnims.length >= 2) {\n\t\t\tdyAnims[0].setAttribute(\"values\", `${height}; 0`);\n\t\t\tdyAnims[1].setAttribute(\"values\", `0; -${height}`);\n\t\t}\n\n\t\tconst dxAnims = Array.from(\n\t\t\tsvg.querySelectorAll<SVGAnimateElement>(\n\t\t\t\t'feOffset > animate[attributeName=\"dx\"]'\n\t\t\t)\n\t\t);\n\t\tif (dxAnims.length >= 2) {\n\t\t\tdxAnims[0].setAttribute(\"values\", `${width}; 0`);\n\t\t\tdxAnims[1].setAttribute(\"values\", `0; -${width}`);\n\t\t}\n\n\t\tconst baseDur = 6;\n\t\tconst dur = Math.max(0.001, baseDur / (speed || 1));\n\t\t[...dyAnims, ...dxAnims].forEach((a) => a.setAttribute(\"dur\", `${dur}s`));\n\n\t\tconst disp = svg.querySelector(\"feDisplacementMap\");\n\t\tif (disp) disp.setAttribute(\"scale\", String(30 * (chaos || 1)));\n\n\t\tconst filterEl = svg.querySelector<SVGFilterElement>(\n\t\t\t`#${CSS.escape(filterId)}`\n\t\t);\n\t\tif (filterEl) {\n\t\t\tfilterEl.setAttribute(\"x\", \"-200%\");\n\t\t\tfilterEl.setAttribute(\"y\", \"-200%\");\n\t\t\tfilterEl.setAttribute(\"width\", \"500%\");\n\t\t\tfilterEl.setAttribute(\"height\", \"500%\");\n\t\t}\n\n\t\trequestAnimationFrame(() => {\n\t\t\t[...dyAnims, ...dxAnims].forEach((a: any) => {\n\t\t\t\tif (typeof a.beginElement === \"function\") {\n\t\t\t\t\ttry {\n\t\t\t\t\t\ta.beginElement();\n\t\t\t\t\t} catch {}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tupdateAnim();\n\t}, [speed, chaos]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!rootRef.current) return;\n\t\tconst ro = new ResizeObserver(() => updateAnim());\n\t\tro.observe(rootRef.current);\n\t\tupdateAnim();\n\t\treturn () => ro.disconnect();\n\t}, []);\n\n\tconst inheritRadius: CSSProperties = {\n\t\tborderRadius: style?.borderRadius ?? \"inherit\",\n\t};\n\n\tconst strokeStyle: CSSProperties = {\n\t\t...inheritRadius,\n\t\tborderWidth: thickness,\n\t\tborderStyle: \"solid\",\n\t\tborderColor: color,\n\t};\n\n\tconst glow1Style: CSSProperties = {\n\t\t...inheritRadius,\n\t\tborderWidth: thickness,\n\t\tborderStyle: \"solid\",\n\t\tborderColor: hexToRgba(color, 0.6),\n\t\tfilter: `blur(${0.5 + thickness * 0.25}px)`,\n\t\topacity: 0.5,\n\t};\n\n\tconst glow2Style: CSSProperties = {\n\t\t...inheritRadius,\n\t\tborderWidth: thickness,\n\t\tborderStyle: \"solid\",\n\t\tborderColor: color,\n\t\tfilter: `blur(${2 + thickness * 0.5}px)`,\n\t\topacity: 0.5,\n\t};\n\n\tconst bgGlowStyle: CSSProperties = {\n\t\t...inheritRadius,\n\t\ttransform: \"scale(1.08)\",\n\t\tfilter: \"blur(32px)\",\n\t\topacity: 0.3,\n\t\tzIndex: -1,\n\t\tbackground: `linear-gradient(-30deg, ${hexToRgba(color, 0.8)}, transparent, ${color})`,\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tref={rootRef}\n\t\t\tclassName={\"relative isolate \" + (className ?? \"\")}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t<svg\n\t\t\t\tref={svgRef}\n\t\t\t\tclassName=\"fixed -left-[10000px] -top-[10000px] w-[10px] h-[10px] opacity-[0.001] pointer-events-none\"\n\t\t\t\taria-hidden\n\t\t\t\tfocusable=\"false\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<filter\n\t\t\t\t\t\tid={filterId}\n\t\t\t\t\t\tcolorInterpolationFilters=\"sRGB\"\n\t\t\t\t\t\tx=\"-20%\"\n\t\t\t\t\t\ty=\"-20%\"\n\t\t\t\t\t\twidth=\"140%\"\n\t\t\t\t\t\theight=\"140%\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<feTurbulence\n\t\t\t\t\t\t\ttype=\"turbulence\"\n\t\t\t\t\t\t\tbaseFrequency=\"0.02\"\n\t\t\t\t\t\t\tnumOctaves=\"10\"\n\t\t\t\t\t\t\tresult=\"noise1\"\n\t\t\t\t\t\t\tseed=\"1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feOffset in=\"noise1\" dx=\"0\" dy=\"0\" result=\"offsetNoise1\">\n\t\t\t\t\t\t\t<animate\n\t\t\t\t\t\t\t\tattributeName=\"dy\"\n\t\t\t\t\t\t\t\tvalues=\"700; 0\"\n\t\t\t\t\t\t\t\tdur=\"6s\"\n\t\t\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t\t\t\tcalcMode=\"linear\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</feOffset>\n\n\t\t\t\t\t\t<feTurbulence\n\t\t\t\t\t\t\ttype=\"turbulence\"\n\t\t\t\t\t\t\tbaseFrequency=\"0.02\"\n\t\t\t\t\t\t\tnumOctaves=\"10\"\n\t\t\t\t\t\t\tresult=\"noise2\"\n\t\t\t\t\t\t\tseed=\"1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feOffset in=\"noise2\" dx=\"0\" dy=\"0\" result=\"offsetNoise2\">\n\t\t\t\t\t\t\t<animate\n\t\t\t\t\t\t\t\tattributeName=\"dy\"\n\t\t\t\t\t\t\t\tvalues=\"0; -700\"\n\t\t\t\t\t\t\t\tdur=\"6s\"\n\t\t\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t\t\t\tcalcMode=\"linear\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</feOffset>\n\n\t\t\t\t\t\t<feTurbulence\n\t\t\t\t\t\t\ttype=\"turbulence\"\n\t\t\t\t\t\t\tbaseFrequency=\"0.02\"\n\t\t\t\t\t\t\tnumOctaves=\"10\"\n\t\t\t\t\t\t\tresult=\"noise1\"\n\t\t\t\t\t\t\tseed=\"2\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feOffset in=\"noise1\" dx=\"0\" dy=\"0\" result=\"offsetNoise3\">\n\t\t\t\t\t\t\t<animate\n\t\t\t\t\t\t\t\tattributeName=\"dx\"\n\t\t\t\t\t\t\t\tvalues=\"490; 0\"\n\t\t\t\t\t\t\t\tdur=\"6s\"\n\t\t\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t\t\t\tcalcMode=\"linear\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</feOffset>\n\n\t\t\t\t\t\t<feTurbulence\n\t\t\t\t\t\t\ttype=\"turbulence\"\n\t\t\t\t\t\t\tbaseFrequency=\"0.02\"\n\t\t\t\t\t\t\tnumOctaves=\"10\"\n\t\t\t\t\t\t\tresult=\"noise2\"\n\t\t\t\t\t\t\tseed=\"2\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feOffset in=\"noise2\" dx=\"0\" dy=\"0\" result=\"offsetNoise4\">\n\t\t\t\t\t\t\t<animate\n\t\t\t\t\t\t\t\tattributeName=\"dx\"\n\t\t\t\t\t\t\t\tvalues=\"0; -490\"\n\t\t\t\t\t\t\t\tdur=\"6s\"\n\t\t\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t\t\t\tcalcMode=\"linear\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</feOffset>\n\n\t\t\t\t\t\t<feComposite\n\t\t\t\t\t\t\tin=\"offsetNoise1\"\n\t\t\t\t\t\t\tin2=\"offsetNoise2\"\n\t\t\t\t\t\t\tresult=\"part1\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feComposite\n\t\t\t\t\t\t\tin=\"offsetNoise3\"\n\t\t\t\t\t\t\tin2=\"offsetNoise4\"\n\t\t\t\t\t\t\tresult=\"part2\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feBlend\n\t\t\t\t\t\t\tin=\"part1\"\n\t\t\t\t\t\t\tin2=\"part2\"\n\t\t\t\t\t\t\tmode=\"color-dodge\"\n\t\t\t\t\t\t\tresult=\"combinedNoise\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<feDisplacementMap\n\t\t\t\t\t\t\tin=\"SourceGraphic\"\n\t\t\t\t\t\t\tin2=\"combinedNoise\"\n\t\t\t\t\t\t\tscale=\"30\"\n\t\t\t\t\t\t\txChannelSelector=\"R\"\n\t\t\t\t\t\t\tyChannelSelector=\"B\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</filter>\n\t\t\t\t</defs>\n\t\t\t</svg>\n\n\t\t\t<div\n\t\t\t\tclassName=\"absolute inset-0 pointer-events-none\"\n\t\t\t\tstyle={inheritRadius}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={strokeRef}\n\t\t\t\t\tclassName=\"absolute inset-0 box-border\"\n\t\t\t\t\tstyle={strokeStyle}\n\t\t\t\t/>\n\t\t\t\t<div className=\"absolute inset-0 box-border\" style={glow1Style} />\n\t\t\t\t<div className=\"absolute inset-0 box-border\" style={glow2Style} />\n\t\t\t\t<div className=\"absolute inset-0\" style={bgGlowStyle} />\n\t\t\t</div>\n\n\t\t\t<div className=\"relative\" style={inheritRadius}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default ElectricBorder;\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/slider.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\r\n\r\nconst Slider = React.forwardRef<\r\n\tReact.ElementRef<typeof SliderPrimitive.Root>,\r\n\tReact.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n\t<SliderPrimitive.Root\r\n\t\tref={ref}\r\n\t\tclassName={cn(\r\n\t\t\t\"relative flex w-full touch-none select-none items-center\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t>\r\n\t\t<SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\r\n\t\t\t<SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\r\n\t\t</SliderPrimitive.Track>\r\n\t\t<SliderPrimitive.Thumb className=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\r\n\t\t<SliderPrimitive.Thumb className=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\" />\r\n\t</SliderPrimitive.Root>\r\n));\r\nSlider.displayName = SliderPrimitive.Root.displayName;\r\n\r\nexport { Slider };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}