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 .

(also in the description box )

 https://goodlib.vercel.app

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

Standalone React cursor package

Samples pics

Site 1

Site 2

Site 3

Install

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.