Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Components

Free

Highlight for React Aria

Highlight search terms within text.

Framework
UI library

shadcn.io is a component library for building accessible web applications.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { Highlight } from "@/components/ui/highlight";
<p className="text-base text-foreground leading-relaxed">
  <Highlight
    query="component"
    text="shadcn.io is a component library for building accessible web applications."
  />
</p>

Demos

Custom Style

Multiple

Search Query

Squiggle

API Reference

Highlight

<mark> data-slot="highlight"

PropType
querystring | readonly string[]

The word or words to highlight in text.

Type
string | readonly string[]
textstring

The text to show, with each match marked.

ignoreCase?boolean

Whether matching ignores letter case.

Default
false
className?string

Merged with the part's classes.

useHighlight