Crosshair
Precision crosshair with live coordinate readout and a grid overlay.
Component Showcase
Crosshair
Precision crosshair with live coordinate readout and a grid overlay.
GSAPCursor
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add crosshair
How to import and use
app/page.tsx
import { CrosshairCursor } from "@/components/crosshair";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<CrosshairCursor />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Crosshair" component into my React/Next.js project.
Component description: "Precision crosshair with live coordinate readout and a grid overlay."
CLI Installation command: `npx @melonui-dev/cli add crosshair`
Tags/Technologies used: GSAP, Cursor
Please write a premium, responsive React page component in Next.js that:
1. Imports `CrosshairCursor` from `@/components/crosshair`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.