miku-cursor-kit

Live demo

To check the custom cursor live, i have added a link to one of my site that i have added this cursor .

https://goodlib.vercel.app

like what you saw ? you can have it too! read the full docs to know how .

Standalone React cursor package OR .Cur files (Itch.io link below)

Samples pics

Site 1

Site 2

Site 3

Install

For users (itch.io link)

itch.io link - https://nubplayz.itch.io/miku-mouse-cursor

Instructions on how to install .Cur files on Win:

1. download the zip and extract it

2. go to accessibility in settings 

3. in accessibility , go to  mouse and pointer touch

4. click customize pointer image 

5. there change the normal select and link select to the files provided

For Devs ( 3 diff installions ways , to get the same cursor but animated on their site only )

Local folder (assuming you cloned my repo)

pnpm add ./miku-cursor-kit

From GitHub

pnpm add github:NubPlayz/miku-cursor-kit

npm

pnpm add miku-cursor-kit

Use

import { MikuCursor } from 'miku-cursor-kit';

export default function App() {
  return (
    <>
      <MikuCursor />
      <main>Your app content</main>
    </>
  );
}

use wrapper, for next js (server componenet)

Create a client wrapper (example app/MikuCursorClient.tsx):

"use client";

import { MikuCursor } from "miku-cursor-kit";

export default function MikuCursorClient() {
  return <MikuCursor />;
}

In app/layout.tsx, import the wrapper (not the package directly):

import MikuCursorClient from "./MikuCursorClient";

and render:

<MikuCursorClient />

npm link

https://www.npmjs.com/package/miku-cursor-kit

Notes

• React 18+ required.