Highlight

Highlight search terms within text.

Shark UI is a component library for building accessible web applications.

Installation


pnpm dlx shadcn@latest add @shark/highlight


import { Highlight } from "@/registry/react/components/highlight";


<Highlight
  query="amet"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>

Pass an array of strings to the query prop to highlight multiple substrings.

With the Highlight component, you can spotlight, emphasize and accentuate words.

Use the Highlight component to highlight search query results.

Search result for: spot

Use a custom decoration like a wavy underline for a fancier highlight effect.

Endless scale, powered by real humans.

Use the className prop to customize the style of the highlighted text.

With the Highlight component, you can spotlight words.

For a complete list of props, see the Ark UI documentation.

On This Page