React Bits

Crosshair

Crosshair cursor with live coordinates that locks onto links and buttons and measures them.

Crosshair, a React Bits component

Use Crosshair in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/Crosshair-TS-TW
How to install React Bits components

Related components

  • Meta Balls

    Liquid metaballs that merge, stretch and pinch apart, with a cursor blob that pushes through them.

  • Swarm Cursor

    A liquid swarm of particles that flows after the cursor, curls into eddies and pours around hovered buttons.

  • Blob Cursor

    Liquid metal blob cursor that stretches, sloshes and bursts into droplets, in chrome, jelly, pearl or ink.