Highlight Text

Powered by

Motion

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 };

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

Features

• Gradient animations with smooth background size transitions from 0% to 100% width
• In-view detection triggers highlight animation when component enters viewport using Motion
• Customizable transitions with configurable duration, easing, and animation timing
• Theme-aware styling with automatic light/dark mode gradient colors and proper contrast
• TypeScript support with complete interface definitions for all animation props
• Performance optimized using CSS transforms for smooth 60fps highlight animations

Use Cases

This free open source React component works well for:

• Landing pages - Highlight key phrases and call-to-action text in Next.js applications
• Content marketing - Emphasize important points in articles using TypeScript and Tailwind CSS
• Educational content - Draw attention to key concepts and definitions
• Product demos - Highlight features and benefits with engaging visual effects

API Reference

HighlightText

Default Styling

• Light mode - Blue to purple gradient (from-blue-100 to-purple-100)
• Dark mode - Saturated blue to purple gradient (from-blue-500 to-purple-500)
• Padding - 8px horizontal, 4px vertical for readable spacing
• Border radius - 8px for modern, rounded appearance

Implementation Notes

• Uses CSS backgroundSize animation for smooth highlight effect
• Background position is set to "left center" for consistent animation start
• Display is set to "inline" to maintain text flow within paragraphs
• Component forwards ref for advanced use cases and external control
• Supports all standard span HTML attributes and event handlers
• Animation automatically cleans up on component unmount