Cursor Label
Elements with data-cursor="View" show that label in a pill that follows the pointer.
- Category: Cursor
- Licence: Charcoal UI Pro
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Cursor Label
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Mark targets with data-cursor. |
About Cursor Label
Cursor Label shows a small pill next to the pointer over anything with data-cursor, such as View, Play or Drag, telling people what a click will do.
Cursor Label is a cursor effect for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Cursor Label
- Project grids that say View.
- Video thumbnails that say Play.
- Draggable areas that say Drag.
- Galleries and carousels.
How it works
It reads data-cursor from the element under the pointer and springs the pill into place. It only reacts to a mouse, keeps the real cursor visible unless you choose otherwise, and does nothing on touch screens or under reduced motion.
It only reacts to a mouse, never hides the real cursor unless you ask it to, and does nothing on touch screens. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Goes well with Cursor Label
These cursor pieces share its tokens and motion language, so they sit together on one page without clashing.
- Cursor Trail: A React cursor trail: sparks fly off the pointer, drift down and cool
- Blob Cursor: A React blob cursor that trails the pointer and swells over links
- Spotlight Reveal: A React spotlight reveal: the pointer cuts a circle to show hidden content
- Image Trail: A React image trail: photos drop along the pointer path and fade
- Glow Cursor: A React glow cursor: a soft light follows the pointer and flares over links
Install Cursor Label
npx shadcn@latest add @charcoal/cursor-labelCursor Label is part of Charcoal UI Pro. One seat unlocks all 300 Pro components, 107 landing-page sections and 100 full templates, for every personal and client project, with updates included. Add the @charcoal registry once with your access token, then the command above copies cursor-label.tsx into components/ui and installs clsx, tailwind-merge.
You own the file you install: no runtime package, no lock-in, nothing to keep in sync. Change it however your product needs.
See Charcoal UI Pro pricing · Pro setup
Frequently asked questions
- How do I install Cursor Label?
- Cursor Label is part of Charcoal UI Pro. Add the @charcoal registry to components.json with your access token, then run npx shadcn@latest add @charcoal/cursor-label. It copies cursor-label.tsx into components/ui and installs motion, clsx, tailwind-merge.
- Is Cursor Label free for commercial use?
- Cursor Label needs a Charcoal UI Pro seat, monthly or a one-time lifetime price. A seat covers unlimited personal and commercial projects, including client work, and every future Pro component.
- Does Cursor Label work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Cursor Label?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Cursor Label's props and get_install_command returns the exact command.