macOS Cursors

A lightweight set of macOS-style mouse cursors shipped as a single CSS file.

Drop it into any web project and replace the default pointers with macOS ones in seconds — no JavaScript, no build step.

🔗 Live demo

Installation

npm i macos-cursors

Usage

Import the stylesheet once, anywhere in your CSS:

@import 'macos-cursors/style.css';

The default cursor is applied globally to the html element on import. To set a specific cursor, add the matching class to an element:

<button class="cursor-pointer">Click me</button>
<div class="cursor-grab">Drag me</div>

Available cursors

| Class | Fallback | Cursor | |-----------------------|---------------|---------------------------------------| | (default) | auto | | | .cursor-pointer | pointer | | | .cursor-text | text | | | .cursor-move | move | | | .cursor-grab | grab | | | .cursor-grabbing | grabbing | | | .cursor-crosshair | crosshair | | | .cursor-not-allowed | not-allowed | | | .cursor-help | help | | | .cursor-zoom-in | zoom-in | | | .cursor-zoom-out | zoom-out | | | .cursor-ns-resize | ns-resize | | | .cursor-ew-resize | ew-resize | | | .cursor-nw-resize | nw-resize | | | .cursor-ne-resize | ne-resize | | | .cursor-writing | auto | | | .cursor-alter | auto | |

Each cursor falls back to the listed native CSS value if the .cur image fails to load.

Contributing

Contributions are welcome!

1. Fork the repo and create a branch.
2. Commit with a feat: / fix: prefix.
3. Test locally (open index.html in a browser).
4. Open a pull request.

macOS is a trademark of Apple Inc. This project is not affiliated with, endorsed by, or sponsored by Apple Inc.