Highlight Text

Text with hover highlight effect.

Building interfaces is not just about making things look good. It’s about clarity, intent, and helping people understand what they are looking at without forcing them to think too hard. Small visual cues often make a bigger difference than large design changes.

Install


type HighlightWordsProps = {
  text: string
  highlights: string[]
  className?: string
  highlightClassName?: string
}

export function HighlightWords({
  text,
  highlights,
  className,
  highlightClassName = "group-hover:text-sky-700 dark:group-hover:text-sky-400",
}: HighlightWordsProps) {
  return (
    <p className={"group cursor-pointer leading-relaxed " + (className ?? "")}>
      {text.split(" ").map((word, i) => {
        const cleanWord = word.replace(/[^a-zA-Z0-9-]/g, "")
        const isHighlight = highlights.includes(cleanWord)

        return (
          <span
            key={i}
            className={
              isHighlight
                ? "font-semibold transition-all duration-200 " + highlightClassName
                : "text-gray-700 dark:text-gray-400"
            }
          >
            {word + " "}
          </span>
        )
      })}
    </p>
  )
}

Usage

import { HighlightWords } from "@/components/ui/HighlightWords/HighlightWords";

<HighlightWords
  text="Design is about clarity and intent."
  highlights={["clarity", "intent"]}
/>

Props

Name	Type	Default	Description
text	string	—	The full text content to render.
highlights	string[]	—	Words that should receive highlight styles.
className	string	undefined	Additional classes for the wrapper element.
highlightClassName	string	"group-hover:text-sky-700 dark:group-hover:text-sky-400"	Classes applied to highlighted words on hover.