Skip to content

NubPlayz/miku-cursor-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

miku-cursor-kit image

npm version license typescript react nextjs Vite pnpm MIT License Hatsune Miku Vocaloid Miku Cursor Anime UI

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

image

Site 2

image

image

Site 3

image

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

image

Notes

  • React 18+ required.

About

# Miku Cursor Kit 🎮 A lightweight animated Hatsune Miku cursor for React . The package is fully bundled, works with Next.js, Vite, and plain React, and doesn’t require users to manually import assets or styles.

Topics

Resources

License

Stars

Watchers

Forks

Packages