highlightText

Installation

npx shadcn@latest add @cubby-ui/highlight-text

Overview

highlightText wraps matching portions of text in styled <mark> elements. Use it to show which parts of a search result match the user's query, in command menus, autocompletes, or any filtered list.

Usage

import { highlightText } from "@/lib/cubby-ui/highlight-text";
 
// Returns ReactNode with matched portions wrapped in <mark>
const highlighted = highlightText("React Hooks Library", "hook");
// Result: React <mark>Hook</mark>s Library

Example with Command

import { highlightText } from "@/lib/cubby-ui/highlight-text";
import { Command, CommandItem } from "@/lib/cubby-ui/command";
 
function SearchResults({ items, query }) {
  return (
    <Command>
      <CommandList>
        {items.map((item) => (
          <CommandItem key={item.id} value={item}>
            {highlightText(item.label, query)}
          </CommandItem>
        ))}
      </CommandList>
    </Command>
  );
}

API Reference

function highlightText(text: string, query: string): ReactNode

Parameters

Returns

ReactNode - The original text with matched portions wrapped in styled <mark> elements.

Styling

Matched text is wrapped in <mark> elements with the following default styles:

<mark className="text-primary bg-transparent font-bold">
  {matchedText}
</mark>

Matches read as text-primary with bold weight and no background.

Implementation Details

• Case-insensitive matching: Query "hook" matches "Hook", "HOOK", etc.
• Safe regex handling: Special regex characters in the query are escaped
• Query length limit: Queries are limited to 100 characters for performance
• Empty query handling: Returns the original text unchanged if query is empty or whitespace-only

Used By

• Command - For highlighting search matches
• Autocomplete - For highlighting suggestion matches