useMousePosition

Hook

Tracks the global mouse cursor position.

npx arupui add use-mouse-position

Usage

use-mouse-position.tsx
import { useMousePosition } from "@/hooks/use-mouse-position"

function Cursor() {
  const { x, y } = useMousePosition()

  return (
    <div
      className="pointer-events-none fixed h-4 w-4 rounded-full bg-primary"
      style={{ left: x - 8, top: y - 8 }}
    />
  )
}

Returns

{ x: number, y: number }
Theme Editor

Theme

Radius0.5rem
Letter Spacing0em

Colors

light