Highlight

Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit. Free, MIT · Basics › Text and icons

Text with the hits of a search marked. Matching ignores case and accents and still marks the original letters ("Орёл" for "орел", "Zürich" for "zurich"); several terms can take their own tones; ready-made ranges serve fuzzy and server search; current marks the hit a find-in-page bar is on.

Installation

npx valyro-cli@latest add highlight

npx shadcn@latest add https://valyro.xyz/r/highlight.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Highlight } from 'valyro-ui';

Props

Prop	Type	Default
`children` *	`string`		The text to search in.
`query`	`string \| readonly string[]`		One term or several (each may get its own `tone`). Empty or blank: plain text.
`ranges`	`readonly TextRange[]`		Ready-made hit ranges `[start, end]` (a fuzzy search, server hits); they win over `query`.
`ignoreCase`	`boolean`	`true`	Default true.
`ignoreAccents`	`boolean`	`true`	"елка" finds "Ёлка", "cafe" finds "Café". Default true, as the kit's Select and Combobox filter.
`wholeWord`	`boolean`	`false`	Only whole words (any script).
`first`	`boolean`	`false`	Mark only the first hit.
`tone`	`HighlightTone \| readonly HighlightTone[]`	`'accent'`	Colour of the marks; an array gives each query term its own (cycling). Default `accent`.
`current`	`number`		Index of the current hit (find in page): it gets the strong colour and `data-current`.
`locale`	`string`		Locale for case folding (Turkish İ).
`announce`	`boolean`	`false`	Screen readers do not announce <mark>: wrap each hit in hidden "highlight start / end" words.
`labels`	`Partial<HighlightLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Kbd — Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Tooltip — Hover and focus hints
Separator — Dividers

Previous: Kbd · Next: Skeleton · All Basics