Cursor

A cursor component, great for realtime interactive applications.

Installation

npx love-ui@latest add cursor

Usage

import { Cursor, CursorPointer, CursorBody, CursorName, CursorMessage } from "@/components/cursor"

<Cursor>
  <CursorPointer />
  <CursorBody>
    <CursorName>John Doe</CursorName>
    <CursorMessage>Editing...</CursorMessage>
  </CursorBody>
</Cursor>

Features

Customizable cursor color with automatic text color contrast adjustment
Optional name label display
Optional message display
Smooth cursor pointer with tooltip-style appearance
Fully accessible with ARIA attributes
Responsive and performant with optimized rendering

Examples

Cursor only

Cursor with name

Connor

"use client";

import { Cursor, CursorBody, CursorName, CursorPointer } from "../../../../../packages/cursor";

const Example = () => (
  <Cursor>
    <CursorPointer />
    <CursorBody>
      <CursorName>Connor</CursorName>
    </CursorBody>
  </Cursor>
);

export default Example;

Cursor with message

That looks great!

"use client";

import { Cursor, CursorBody, CursorMessage, CursorPointer } from "../../../../../packages/cursor";

const Example = () => (
  <Cursor color="#000000">
    <CursorPointer />
    <CursorBody>
      <CursorMessage>That looks great!</CursorMessage>
    </CursorBody>
  </Cursor>
);

export default Example;

Cursor with name and message

ConnorThat looks great!

"use client";

import {
  Cursor,
  CursorBody,
  CursorMessage,
  CursorName,
  CursorPointer,
} from "../../../../../packages/cursor";

const Example = () => (
  <Cursor color="#000000">
    <CursorPointer />
    <CursorBody>
      <CursorName>Connor</CursorName>
      <CursorMessage>That looks great!</CursorMessage>
    </CursorBody>
  </Cursor>
);

export default Example;

Cursor with custom color

@loveconnorCan we adjust the color?

"use client";

import {
  Cursor,
  CursorBody,
  CursorMessage,
  CursorName,
  CursorPointer,
} from "../../../../../packages/cursor";

const Example = () => (
  <Cursor>
    <CursorPointer className="text-indigo-500" />
    <CursorBody className="bg-indigo-50 text-indigo-700">
      <CursorName>@loveconnor</CursorName>
      <CursorMessage>Can we adjust the color?</CursorMessage>
    </CursorBody>
  </Cursor>
);

export default Example;

Props

Cursor

Extends HTMLAttributes<HTMLSpanElement>

CursorPointer

Extends SVGProps<SVGSVGElement>

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the pointer

CursorBody

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content to display in the cursor body (name, message, etc)
`className`	`string`	-	Additional CSS classes

CursorName

Extends HTMLAttributes<HTMLSpanElement>

CursorMessage

Extends HTMLAttributes<HTMLSpanElement>

Avatar Stack Calendar