Cursor
カーソル
A multiplayer cursor label for collaborative interfaces, in the spirit of Liveblocks↗↗. Pointer-events are disabled so it never blocks what sits underneath.
GuillaumeReviewing the layoutHaydenLeeCan we ship this?
Installation
Install the following dependencies:1
npm install tailwind-mergenpm install clsxCopy and paste the following code into a new component file:2
"use client"
import { Children, type HTMLAttributes, type SVGProps } from "react"
import { cn } from "@/lib/utils"
export type CursorProps = HTMLAttributes<HTMLSpanElement>
export function Cursor({ className, children, ...props }: CursorProps) {
return (
<span className={cn("pointer-events-none relative flex select-none items-start", className)} {...props}>
How to use it3
"use client"
import { Cursor, CursorBody, CursorMessage, CursorName, CursorPointer } from "@/components/ui/cursor"
export default function Page() {
return (
<Cursor>
<CursorPointer />
<CursorBody>
<CursorName>Guillaume</CursorName>
Props
Cursor
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode CursorPointer and CursorBody |
| className | — | string Additional classes, typically used to position the cursor |
CursorPointer
| Name | Default | Description |
|---|---|---|
| className | — | string Additional classes on the arrow, typically a text colour |
CursorBody
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode CursorName and optionally CursorMessage. With more than one child the name is dimmed automatically |
| className | — | string Additional classes on the label |
CursorName / CursorMessage
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode Text content |
| className | — | string Additional classes on the text |