Cursor | HextaUI

An animated cursor component that follow the mouse pointer with smooth animations.

Preview

Ready to build something amazing?

Join thousands of developers who are already using HextaUI to create stunning websites with less effort. Start building today!

Get Started Sponsor HextaUI

This component is available on 21st.dev.

Installation

NPM

npx shadcn@latest add "https://21st.dev/r/hextaui/cursor"

Usage

App.tsx

import {
  MouseTrackerProvider as CursorProvider,
  Pointer as Cursor,
  PointerFollower as CursorFollow,
} from "@/components/ui/cursor";

import Link from "next/link";

import { MousePointer2 } from "lucide-react";
import { Star } from "lucide-react";

const CursorDemo = () => {
  return (
    <div className="max-w-sm rounded-4xl bg-background border border-primary/10 shadow-2xl/10 overflow-hidden relative group">
      <div className="p-6 flex flex-col gap-8">
        <p className="text-4xl font-bold tracking-tight">
          Ready to build something amazing?
        </p>
        <p className="text-primary/70 text-lg max-w-2xl">
          Join thousands of developers who are already using HextaUI to create
          stunning websites with less effort. Start building today!
        </p>
        <div className="flex items-center flex-wrap justify-center gap-4">
          <Link
            href="/docs/get-started"
            className="cursor-none px-6 bg-primary text-primary-foreground py-3 rounded-full border text-sm font-medium flex items-center justify-center gap-2 text-center max-md:grow shadow-inner shadow-black/10 "
          >
            Get Started
          </Link>
          <Link
            href="https://github.com/sponsors/preetsuthar17"
            target="_blank"
            className="cursor-none px-6 bg-linear-to-b hover:bg-primary/10 transition-all py-3 rounded-full border text-sm font-medium flex items-center justify-center gap-2 text-center max-md:grow shadow-inner shadow-black/10  hover:fill-yellow-300"
          >
            <Star size={15} fill="yellow" /> Sponsor HextaUI
          </Link>
        </div>
      </div>

      <CursorProvider>
        <Cursor>
          <MousePointer2 className="fill-blue-500 stroke-white/10" size={30} />
        </Cursor>
        <CursorFollow align="bottom-right">
          <div className="bg-blue-500 text-white border border-white/10 text-xs px-3 py-1 rounded-md shadow-md">
            HextaStudio
          </div>
        </CursorFollow>
      </CursorProvider>
    </div>
  );
};