Cursor Tag

Content Reviewer

Customize

Color
Text color

Installation

Installs are paused for now. You can still preview and customize every component on its page.

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