Components
Loading preview...
A smooth, customizable React cursor component that replaces the native cursor with a circular, inverted color cursor. It smoothly follows the mouse pointer, hides when the cursor leaves the viewport, and supports adjustable size via props. Built with TypeScript, React hooks, and CSS blend modes for a modern interactive UI effect.
@arunachalam0606
npx shadcn@latest add https://21st.dev/r/arunachalam0606/inverted-cursor"use client";
import { Cursor } from "@/components/ui/inverted-cursor";
export default function CursorDemoPage() {
return (
<div className="relative w-full h-screen overflow-hidden cursor-none">
{/* Custom circular inverted color cursor */}
<Cursor />
{/* Main content centered vertically and horizontally */}
<main className="flex items-center justify-center h-full">
<h1 className="text-4xl font-extrabold select-none">
Move your mouse
</h1>
</main>
</div>
);
}