Skip to content

Live Caret

Install this component from the Scintillar registry.

The quick brown fox jumps Aliceover the lazy dog and runs across the field Click a word to move the caret

Controls

Installation

npx shadcn@latest add @scintillar/live-caret

Source

"use client"

import { cn } from "@/lib/utils"

export interface LiveCaretProps {
  /** Display name shown in the label. */
  name: string
  /** Color for the caret and label (any CSS color). */
  color: string
  /** Additional CSS classes. */
  className?: string
}

/** A colored text caret with a user name label, used to show collaborator cursor positions in a text editor. */
export function LiveCaret({ name, color, className }: LiveCaretProps) {
  return (
    <span
      className={cn("relative inline", className)}
      aria-label={`${name}'s cursor`}
    >
      <span
        className="inline-block w-0.5 rounded-full animate-pulse align-text-bottom"
        style={{ backgroundColor: color, height: "1em" }}
      />
      <span
        className="absolute bottom-full left-0 mb-0.5 whitespace-nowrap rounded px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm"
        style={{ backgroundColor: color }}
      >
        {name}
      </span>
    </span>
  )
}