React Highlight Text

Powered by

Motion

Framer Motion

Ever tried to highlight text with CSS and it just snaps into existence like someone slapped yellow paint? Most highlighting either appears instantly (jarring) or uses opacity fades (boring). This component smoothly expands the background from left to right, creating that satisfying "marker sweep" effect you see in good presentations.

Smooth expanding highlight animations

Text highlights that expand naturally instead of just popping in:

import { HighlightText } from '@/components/ui/shadcn-io/highlight-text';export default function HighlightTextDemo() {  return (    <HighlightText className="text-4xl font-semibold" text="Highlight Text" />  );}

'use client';import * as React from 'react';import {  motion,  useInView,  type HTMLMotionProps,  type Transition,  type UseInViewOptions,} from 'motion/react';import { cn } from '@/lib/utils';type HighlightTextProps = HTMLMotionProps<'span'> & {  text: string;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  transition?: Transition;};function HighlightText({  ref,  text,  className,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  transition = { duration: 2, ease: 'easeInOut' },  ...props}: HighlightTextProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);  const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;  return (    <motion.span      ref={localRef}      data-slot="highlight-text"      initial={{        backgroundSize: '0% 100%',      }}      animate={isInView ? { backgroundSize: '100% 100%' } : undefined}      transition={transition}      style={{        backgroundRepeat: 'no-repeat',        backgroundPosition: 'left center',        display: 'inline',      }}      className={cn(        `relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500`,        className,      )}      {...props}    >      {text}    </motion.span>  );}export { HighlightText, type HighlightTextProps };

Built with TypeScript and shadcn/ui, using Motion for buttery smooth animations in React applications. The highlight expands from zero width, respects theme colors automatically, and triggers when users actually see it—not when the page loads in your Next.js projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/highlight-text.json

npx shadcn@latest add https://www.shadcn.io/registry/highlight-text.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/highlight-text.json

bunx shadcn@latest add https://www.shadcn.io/registry/highlight-text.json

Usage

import { HighlightText } from "@/components/text/highlight-text";

<HighlightText 
  text="This phrase gets highlighted"
  inView={true}
  transition={{ duration: 1.5, ease: "easeOut" }}
/>

Why most text highlighting sucks

Most developers just slap a background color and call it done in their React components. The text is either highlighted immediately (users miss it) or fades in with opacity (looks weak). Neither approach feels natural because real highlighting has motion—you drag the marker across the text.

This React component animates the background-size from 0% to 100% width, creating that genuine marker sweep effect with full TypeScript support. We use background-position: left center so the expansion always starts from the left, matching how people actually highlight text in modern JavaScript applications.

Plus, most highlights trigger on page load when nobody's looking. This component waits until it's visible using intersection observers in Next.js projects. Why waste the animation if users aren't watching?

Features

• Background expansion that looks like real marker highlighting in React applications
• In-view detection so animations happen when users see them
• Theme-aware colors that work in light and dark modes for JavaScript projects
• 60fps animations using CSS transforms and GPU acceleration in Next.js
• Complete TypeScript support with full type definitions and IntelliSense
• Works seamlessly with shadcn/ui design tokens out of the box
• Free open source component that respects reduced motion preferences

API Reference

HighlightText

Animated text highlighting with expanding background effect.

Theme Colors

Automatically adapts to your theme:

Common gotchas

Highlight appears too fast: Default 2-second duration works for most text in React applications. For longer phrases, increase duration to 3-4 seconds. For single words, 1 second is plenty in JavaScript implementations.

Multiple highlights overlap: Each React component animates independently with TypeScript timing support. If you have many highlights in one paragraph, stagger the inView triggers or use delays to avoid visual chaos in Next.js projects.

Theme colors don't match: This component uses CSS variables from your theme. If colors look wrong, check that your shadcn/ui theme is properly configured with the right CSS custom properties.

Animation stutters: Make sure you're not updating the text prop frequently in your React application. Each change restarts the animation. For dynamic content, use a key prop to control when to animate.

Background clips text: The highlight background should extend slightly beyond text bounds in modern JavaScript frameworks. If it looks clipped, the component might be in a container with overflow: hidden. Check parent element styles.

Integration with other components

Perfect for emphasizing key points in Card content or Alert messages within React applications. Works great with Badge for status highlights or Tooltip for interactive emphasis in Next.js projects.

For marketing pages, combine with Button components for call-to-action highlights. This free open source component's animation timing pairs well with Skeleton loading states and Progress indicators, all with complete TypeScript integration.

Questions developers actually ask