Pointer Highlight
A component that highlights text when it's in view, with a pointer and border.
Installation
Run the following command
npx shadcn@latest add @aceternity/pointer-highlight
Examples
Inline Highlight
collab tool
of the century with max benefits and minimal effort.Our state of the art collab tool of the century with max benefits.
Discover our
innovative
solutions for your business needs.Transforming ideas into reality with cutting-edge technology and expert guidance.
Experience the future with our
sustainable technology
.Eco-friendly solutions designed for a better tomorrow and reduced environmental impact.
Color Variation
Props
Prop | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | Yes | - | The content to be wrapped by the pointer highlight effect |
rectangleClassName | string | No | - | Additional CSS classes to apply to the animated rectangle border |
pointerClassName | string | No | - | Additional CSS classes to apply to the pointer icon |
containerClassName | string | No | - | Additional CSS classes to apply to the container div |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

