Highlight

Copy Markdown

Highlight search terms within text.

PreviewCode

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

Installation#

CLIManual

pnpmbunnpmyarn

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.

PreviewCode

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

Use the Highlight component to highlight search query results.

PreviewCode

Search result for: spot

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

PreviewCode

Endless scale, powered by real humans.

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

PreviewCode

With the Highlight component, you can spotlight words.

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

[

Format ](/docs/utilities/format)[

Hitbox ](/docs/utilities/hitbox)

On This Page