Getting Started
App Providerglobal.d.tsThemesTypes
cn(...args)Text ParserUnits Converters
AnchorAvatarBreadcrumbBurgerButtonCardCarouselCheckerCodeColor PickerCommandConfettiCopyButtonDouble Helix WordsFloating IndicatorGroupHighlight TextIndicatorInputKbdLabelLoaderPaginationPassword RequirementPolymorphic SlotProgressProseRatingRunning AreaScroll AreaSheetsSkeletonSliderStackSvgTableTabsTextareaTimelineTimesToasterTooltipTyping WordsTypography
useClickOutsideuseClipboarduseDeviceInfouseDialoguseDidUpdateuseDirectionuseDisclosureuseDocumentTitleuseDocumentVisibilityuseElementInfouseEyeDropperuseFetchuseFullscreenuseGeoLocationuseHotkeysuseHoveruseIduseImagePopupuseInputStateuseIntersectionuseIntervaluseIsomorphicEffectuseListStateuseLocalStorageuseMeasureScrollbaruseMediaQueryuseMergedRefuseMouseuseMoveuseMutationObserveruseNetworkuseOpenStateuseOrientationuseOSusePaginationusePWAInstalleruseRandomColorsuseReducedMotionuseReloaduseResizeObserveruseScrollIntoViewuseStateHistoryuseTimeoutuseTouchuseTriggeruseUncontrolleduseValidatedStateuseViewportSizeuseWindowEventuseWindowScroll
Docs
Web
Components
Highlight
Group

A utility component for grouping and aligning multiple elements as a cohesive unit.

Indicator

A small visual indicator used to display status or alerts over other elements.

Edit this page on GitHub
  • Started
  • Utilities
  • Configuration
  • Components
  • Hooks
  • Examples
  • Github
  • Contributing
⌘+J

© 2025 oeri rights MIT

Designed in Earth-616

Built by oeri

Highlight Text

Highlights specific parts of a string or content, commonly used in search results to show matched keywords.

Usage

Basic usage example to quickly see how the Highlight works.

Pass the main string as children to Highlight component and string part that should be highlighted to highlight prop.

import { Highlight } from "@/ui/highlight";

const text = "Pass the main string as children to Highlight component and string part that should be highlighted to highlight prop.";

export function HighlightDemo() {
  return <Highlight text={text} highlight="highlight" className="text-justify" />;
}

Properties

Interactive configurator to explore customization options for the Highlight component.

Pass the main string as children to Highlight component and string part that should be highlighted to highlight prop.

If the main string does not contain the highlighted part, it is left alone. The highlighted part is only the string of characters that have a matching sequence, whitespace is not included.

You can change styles of highlighted part if you do not like default styles.

Color
import { Highlight } from "@/ui/highlight";

const text = "Pass the main string as children to Highlight component and string part that should be highlighted to highlight prop.";

export function HighlightDemo() {
  return (
    <div>
      <Highlight highlight="highlight" text={text} className="text-justify" />
      <Highlight highlight="highlight" className="text-justify">
        If the main string does not contain the highlighted part, it is left alone. The highlighted part is only the string of characters that have a matching
        sequence, whitespace is not included.
      </Highlight>
      <Highlight highlight="highlight" className="text-justify" styles={styles}>
        You can change styles of highlighted part if you do not like default styles.
      </Highlight>
    </div>
  );
}

const styles = {
  highlight: {
    backgroundImage: "linear-gradient(45deg, #fcc419, #0cb2cb, #5c7cfa)",
    fontWeight: "700",
    backgroundClip: "text",
    WebkitTextFillColor: "transparent"
  } as React.CSSProperties
};

API References

  • mdn
  • web.dev

Styles API

type T = "root" | "highlight";
Styles APITypeDefaultAnnotation
className?stringundefinedpass to root component <p>
classNames?Partial<Record<T, string>>undefined
style?CSSPropertiesundefinedpass to root component <p>
styles?Partial<Record<T, CSSProperties>>undefined
colorProperty.ColoryellowKey of CSS color, passed to mark component

Props API

Props APITypeDefaultAnnotation
text?string-Define text to process the entire string
children?string-Define text to process the entire string
highlight?string | string[]Substring or an array of substrings to highlight in children or text=""
el?ElementType<p>element that will wrap the entire text

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

highlight.tsx