Cursor

A cursor component for real-time interactive applications. It renders a span with optional children and a pointer SVG. It behaves as a non-interactive element with a custom pointer. Use it to display a cursor in real-time collaboration tools.

byShadcnblocks.com from Kibo UI

Installation

terminal

pnpm dlx layro-cli add @shadcnblocks/cursor

npx layro-cli add @shadcnblocks/cursor

npx layro-cli add @shadcnblocks/cursor

bunx layro-cli add @shadcnblocks/cursor

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { Children, type HTMLAttributes, type SVGProps } from "react";
import { cn } from "@/lib/utils";

export type CursorProps = HTMLAttributes<HTMLSpanElement>;

export const Cursor = ({ className, children, ...props }: CursorProps) => (
  <span
    className={cn("pointer-events-none relative select-none", className)}
    {...props}
  >
    {children}
  </span>
);