Highlighter

A highlighter component that draws a border and pointer around text with a subtle animation. Uses Motion for the reveal effect.

Built with Motion to animate a rectangle growing around the content and a pointer icon appearing at the bottom-right. ResizeObserver keeps the highlight in sync with the wrapped element. Ideal for callouts, labels, or drawing attention to key phrases in copy.

Install using the shadcn CLI to add the highlighter component to your application.

Preview

The highlight draws around the wrapped content when it enters the viewport; the pointer appears at the corner. Use Replay to see the animation again.

Usage

Import from @/components/ui/highlighter and wrap any content. Use containerClassName for inline use (e.g. inline-block align-baseline).

import { Highlighter } from "@/components/ui/highlighter";

<div>
  Your text here{" "}
  <Highlighter containerClassName="inline-block align-baseline">
    <span className="relative z-10">highlighted phrase</span>
  </Highlighter>
</div>

Get the Component

Copy the Highlighter component directly into your project or open it in v0 to customize and generate variations. This makes it easy to adapt the component to your UI and workflow.

Props

• children — content to highlight (wrap in a span with relative z-10 so text sits above the border)
• containerClassName — optional class for the wrapper (e.g. inline alignment)
• rectangleClassName — optional class for the border rectangle
• pointerColor — optional CSS color for the pointer (e.g. #22c55e). Defaults to blue.
• pointerClassName — optional class for the pointer icon (size, etc.)