SVG Cursors You Can Actually Ship: Introducing `@sherotree/cursors`

Default OS cursors are fine. For a product UI, they often feel generic.

I extracted the SVG hotspot cursors we use on Uwarp into a tiny MIT package: @sherotree/cursors.

What’s included

Four cursors with correct hotspot offsets baked into CSS:

• default
• pointer
• grab
• grabbing

Plus slightly smaller variants under a 1280px viewport width.

Install

npm install @sherotree/cursors

Global usage

import '@sherotree/cursors/style.css'

In Next.js App Router, import once from app/layout.tsx.

That sets body cursors, remaps common interactive selectors (a:hover, button:hover, [role=button], …), and overrides Tailwind’s .cursor-default / .cursor-pointer / .cursor-grab / .cursor-grabbing so those utilities keep the custom look.

Scoped usage

import '@sherotree/cursors/scoped.css'

<div class="sherotree-cursors">
  <!-- custom cursors only inside here -->
</div>

Links

• npm: https://www.npmjs.com/package/@sherotree/cursors
• GitHub: https://github.com/sherotree/cursors

If you try it, a star or issue on the repo helps a lot. Happy shipping.