Cursor Tag

Content Reviewer
Customize
Color
Text color
Side
Size

Installation

pnpm dlx shadcn@latest add @clover-ui/cursor-tag

Usage

import { CursorTag } from "@/components/cursor-tag";

<div className="relative">
  <h1>Introducing</h1>
  <CursorTag label="Admin" side="left" className="absolute -top-8 left-4" />
  <CursorTag label="Content Reviewer" color="#7c3aed" className="absolute -bottom-10 right-0" />
</div>

Place each tag with absolute positioning. Use side="left" when the label should sit on the left and the cursor should point to the right.

Props

PropType

Name shown in the pill.

Which side the label sits on. The cursor faces the other way.

Default"right"
Default"default"

Pill and arrow color. Defaults to the theme foreground.

Label color when color is set.

Default"#ffffff"

Gently drifts the tag. Turns off when reduced motion is on.

Defaulttrue