{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "moving-border",
  "type": "registry:ui",
  "title": "Moving Border",
  "description": "Continuously rotating conic-gradient border around an element. Eye-catching CTA wrapper.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/moving-border.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Container with a rotating animated gradient border.\n * @author Saasflare™\n * Renders a conic-gradient border that continuously rotates around the\n * element. Can wrap buttons, cards, or any content.\n * @module packages/ui/components/ui/moving-border\n * @package ui\n *\n * @component\n * @example\n * import { MovingBorder } from '@saasflare/ui';\n * <MovingBorder>\n *   <button className=\"px-6 py-3 font-semibold\">Get Started</button>\n * </MovingBorder>\n *\n * @example\n * // Custom colors and speed\n * <MovingBorder\n *   colors={[\"var(--chart-1)\", \"var(--chart-2)\", \"var(--primary)\"]}\n *   duration={4}\n *   borderWidth={2}\n * >\n *   <div className=\"p-6\">Card content</div>\n * </MovingBorder>\n */\n\nimport { type ReactNode } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useReducedMotion } from \"@saasflare/ui\"\n\n/** Props for the MovingBorder component. */\nexport interface MovingBorderProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Content inside the border. */\n  children: ReactNode\n  /** Gradient colors for the rotating border. */\n  colors?: string[]\n  /** Rotation cycle duration in seconds. Default: `6` */\n  duration?: number\n  /** Border width in pixels. Default: `1.5` */\n  borderWidth?: number\n  /** Border radius (CSS value). Default: `\"0.75rem\"` */\n  borderRadius?: string\n  /** Additional class names for the outer wrapper. */\n  className?: string\n}\n\n/**\n * Wrapper with a continuously rotating gradient border.\n *\n * - Uses a conic-gradient that rotates via CSS animation\n * - Inner content sits on top with a solid background\n * - Renders a static border when `animated` is `false` or reduced motion is preferred\n * - Works on any element (buttons, cards, containers)\n *\n * @component\n * @package ui\n */\nexport function MovingBorder({\n  children,\n  colors = [\"var(--primary)\", \"var(--chart-1)\", \"var(--chart-2)\"],\n  duration = 6,\n  borderWidth = 1.5,\n  borderRadius = \"0.75rem\",\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...rest\n}: MovingBorderProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const reduced = useReducedMotion()\n\n  // Pattern B (CSS animation): honor both the design-system `animated` axis\n  // and the OS prefers-reduced-motion setting. When either disables motion,\n  // render a static linear gradient instead of the rotating conic gradient.\n  const motionEnabled = sf.animated && !reduced\n\n  // Guard against empty / single-color inputs so the gradient always closes\n  // back to its first stop without emitting an `undefined` stop.\n  const palette = colors.length > 0 ? colors : [\"var(--primary)\"]\n  const gradientStops = [...palette, palette[0]].join(\", \")\n\n  return (\n    <>\n      {motionEnabled && (\n        <style>{`\n          @keyframes sf-border-rotate {\n            from { --sf-border-angle: 0deg; }\n            to { --sf-border-angle: 360deg; }\n          }\n          @property --sf-border-angle {\n            syntax: \"<angle>\";\n            initial-value: 0deg;\n            inherits: false;\n          }\n        `}</style>\n      )}\n      <div\n        className={cn(\"relative\", className)}\n        style={{\n          padding: borderWidth,\n          borderRadius,\n          background: motionEnabled\n            ? `conic-gradient(from var(--sf-border-angle, 0deg), ${gradientStops})`\n            : `linear-gradient(135deg, ${gradientStops})`,\n          ...(motionEnabled\n            ? { animation: `sf-border-rotate ${duration}s linear infinite` }\n            : {}),\n        }}\n        data-slot=\"moving-border\"\n        data-surface={sf.surface}\n        data-radius={sf.radius}\n        data-animated={String(sf.animated)}\n        {...rest}\n      >\n        <div\n          className=\"relative bg-background\"\n          style={{ borderRadius: `calc(${borderRadius} - ${borderWidth}px)` }}\n        >\n          {children}\n        </div>\n      </div>\n    </>\n  )\n}\n",
      "target": "components/ui/moving-border.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/moving-border.json"
  }
}