shadcn/app/public/registry/styles/default/cursor.json

{
  "name": "cursor",
  "description": "Custom cursor component",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "cursor.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface CursorProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  cursorText?: string\n  cursorSize?: number\n}\n\nconst Cursor = React.forwardRef<HTMLDivElement, CursorProps>(\n  ({ className, children, cursorText, cursorSize = 20, ...props }, ref) => {\n    const [position, setPosition] = React.useState({ x: 0, y: 0 })\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      const rect = e.currentTarget.getBoundingClientRect()\n      setPosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      })\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative cursor-none\", className)}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        {...props}\n      >\n        {children}\n        {isHovered && (\n          <div\n            className=\"pointer-events-none absolute z-50 flex items-center justify-center rounded-full bg-primary/20 backdrop-blur-sm transition-transform\"\n            style={{\n              left: position.x,\n              top: position.y,\n              width: cursorSize,\n              height: cursorSize,\n              transform: \"translate(-50%, -50%)\",\n            }}\n          >\n            {cursorText && (\n              <span className=\"text-xs font-medium text-primary\">\n                {cursorText}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nCursor.displayName = \"Cursor\"\n\nexport { Cursor }\n"
    }
  ],
  "type": "components:ui"
}