A fully customizable cursor component animated with Motion for React.

Website · Documentation

_{Cooked by Guillaume Coussot 👨‍🍳}

Features

• 🚀 Easy to use
• 🔍 Auto-detects content types
• 🧲 Magnetic snap onto elements
• 🚫 Respects disabled attribute
• 🔠 Scales with text size
• 🎥 Animated with motion
• ♿ Respects reduced motion preference
• 🎨 Customizable

Installation

With pnpm

pnpm add react-dot-cursor

With NPM

npm install react-dot-cursor

Getting Started

Add the Cursor component to your app:

import { Cursor } from 'react-dot-cursor';

const App = () => {
  return (
    <div>
      <Cursor />
    </div>
  );
};

That's it: the native cursor is hidden automatically while the component is mounted (opt out with hideNativeCursor={false} if you prefer to manage that CSS yourself).

Magnetic Snap

Make the cursor snap onto elements through a theme rule: it stretches to wrap the element with a translucent version of your cursor color, gently drifts toward the pointer, and can even pull the element along (snap: { pull: 0.1 }):

import { Cursor, CursorTheme } from 'react-dot-cursor';

const theme: CursorTheme = {
  rules: [{ selector: '.snap-target', variant: 'default', snap: true }],
};

<Cursor theme={theme} />;

See it live on the documentation sidebar.

Documentation

Find the full API reference on official documentation.