A fully customizable cursor component animated with Motion for React.

Website · Documentation

_{Cooked by Guillaume Coussot 👨‍🍳}

Features

• 🚀 Easy to use
• 🔍 Auto-detects content types
• 🚫 Respects disabled attribute
• 🔠 Scales with text size
• 🎥 Animated with motion
• 🎨 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>
  );
};

Then remove the default cursor with CSS:

* {
  cursor: none !important;
}

Documentation

Find the full API reference on official documentation.