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.
Preview
Motion-powered icons for your
React projects
Props
highlighterProps
- children
- Content to highlight (wrap in a
<span className="relative z-10">so text sits above the border). - containerClassName
- Optional class for the wrapper (for example
inline-block align-baseline). - rectangleClassName
- Optional class for the border rectangle.
- pointerColor
- Optional CSS color for the pointer (for example
#22c55e). Defaults to blue. - pointerClassName
- Optional class for the pointer icon (size, etc.).