Pointer Highlight

A pointer highlight component that animates a border and pointer around text or content. Perfect for highlighting important text with smooth animations.

Open in

Installation

npm install motion/react react

pnpm install motion/react react

yarn add motion/react react

bun add motion/react react

'use client';

import { PointerHighlight } from '@/components/ui/pointer-highlight';

export default function PointerHighlightDemo() {
  return (
    <div className="mx-auto max-w-lg py-20 text-center">
      <h1 className="text-foreground text-2xl font-bold tracking-tight md:text-4xl">
        The best way to grow is to{' '}
        <PointerHighlight>
          <span>collaborate</span>
        </PointerHighlight>
      </h1>
    </div>
  );
}

'use client';import { PointerHighlight } from '@/components/ui/pointer-highlight';export default function PointerHighlightDemo() {  return (    <div className="mx-auto max-w-lg py-20 text-center">      <h1 className="text-foreground text-2xl font-bold tracking-tight md:text-4xl">        The best way to grow is to{' '}        <PointerHighlight>          <span>collaborate</span>        </PointerHighlight>      </h1>    </div>  );}

Usage

import { PointerHighlight } from "@/components/ui/pointer-highlight";

export default function MyComponent() {
  return (
    <div className="text-2xl font-bold">
      The best way to grow is to{' '}
      <PointerHighlight>
        <span className="text-primary">collaborate</span>
      </PointerHighlight>
    </div>
  );
}

Features

🎯 Animated Border: Smooth border animation that expands around content
📍 Pointer Indicator: Animated pointer icon that appears at the corner
📱 Responsive: Automatically adjusts to content size changes
🎨 Customizable: Customize colors, borders, and pointer styles
🌙 Dark Mode: Works seamlessly with light and dark themes
⚡ Smooth Animations: Powered by motion/react for fluid transitions

Customization

Custom Colors

<PointerHighlight
  rectangleClassName="border-blue-500"
  pointerClassName="text-blue-500"
>
  <span>Highlighted text</span>
</PointerHighlight>

Custom Container

<PointerHighlight
  containerClassName="inline-block mx-2"
  rectangleClassName="border-2 border-primary rounded-lg"
>
  <span className="text-primary font-bold">Custom styled</span>
</PointerHighlight>

Examples

Highlighting Multiple Words

<div className="text-xl">
  Build{' '}
  <PointerHighlight>
    <span className="text-primary">faster</span>
  </PointerHighlight>
  {' '}with MVPBlocks
</div>

With Custom Styling

<PointerHighlight
  rectangleClassName="border-2 border-primary rounded-md"
  pointerClassName="text-primary h-6 w-6"
>
  <span className="text-primary font-semibold text-2xl">
    Important Text
  </span>
</PointerHighlight>

In Headings

<h1 className="text-4xl font-bold">
  Welcome to{' '}
  <PointerHighlight>
    <span className="text-primary">MVPBlocks</span>
  </PointerHighlight>
</h1>

Pointer Highlight

Installation

Usage

Features

Customization

Custom Colors

Custom Container

Examples

Highlighting Multiple Words

With Custom Styling

In Headings

On this page

Contribute