shadcn.io is an independent project built on shadcn/ui
shadcn.io is a component library for building accessible web applications.
Installation
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
FAQ
How do I highlight several words at once?
Pass an array as query, such as query={["react", "vue"]}. Every match of every term is marked. Empty strings are ignored, and with no usable term the text is returned unmarked.
Is the match case-sensitive?
Yes by default. Set ignoreCase to match any letter case. The text keeps its own case either way; only the match is marked.
Can the query contain regex characters?
Yes, they are matched as plain text. Characters such as ., * and ( are escaped before the search, so a query like c++ finds the letters c++ and does not throw.
How do I change how a match looks?
Each match is a mark element with the classes bg-primary/20 text-primary rounded-md px-1. A className you pass is merged after them, and other props go on every mark. The Custom Style and Squiggle demos show two looks.
Can I get the chunks and render them myself?
Yes. The file also exports useHighlight, which takes text, query and ignoreCase and returns the pieces as { text, match } objects in order. Render them as you like, for example as links.
API Reference
Highlight
<mark> data-slot="highlight"
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.