Velora UI

Smooth Cursor

Dot-and-ring custom cursor; the ring trails on a spring and grows over links and buttons.

  • 1.9 KB gzipped
  • Deps: react-dom, motion/react
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Move your mouse around this box

The ring trails behind the dot and grows over links and buttons.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/smooth-cursor.json

Adds components/velora/smooth-cursor.tsx, installs motion.

Examples

CTA card

A call-to-action card with buttons and links that make the ring grow.

Early access

Ship your next launch page this week

Join 4,200 builders getting new components every Friday.

See what's new

Props

PropTypeDefault
container

Limit the cursor to this element; defaults to the whole document

React.RefObject<HTMLElement | null>—
hideNativeCursor

Hide the system cursor while the custom one is showing

booleantrue
interactiveSelector

CSS selector for elements that make the ring grow

string"a, button, [role=button], input, select, textarea, label, summary"
dotClassName

Classes for the dot

string—
ringClassName

Classes for the trailing ring

string—

Accessibility

Reduced motion
The ring snaps to the dot instead of trailing, and grows or shrinks without easing.
Keyboard
Decorative — nothing to operate.
Screen readers
The dot and ring are aria-hidden and never take pointer events; nothing is announced.