shadcn.io is an independent project built on shadcn/ui
Installation
Usage
<script setup lang="ts">
import { Highlight } from "@/components/ui/highlight";
</script>
<template>
<p class="text-base text-foreground leading-relaxed">
<Highlight
query="component"
text="shadcn.io is a component library for building accessible web applications."
/>
</p>
</template>
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
data-slot="highlight"
querystring | string[]
The query to highlight in the text.
- Type
string | string[]
textstring
The text to highlight.
exactMatch?boolean
Whether to match whole words only.
ignoreCase?boolean
Whether to ignore case while matching.
matchAll?boolean
Whether to match multiple instances of the query.
class?string
Merged with the part's classes.
useHighlight
querystring | string[]
The query to highlight in the text.
- Type
string | string[]
textstring
The text to highlight.
exactMatch?boolean
Whether to match whole words only.
ignoreCase?boolean
Whether to ignore case while matching.
matchAll?boolean
Whether to match multiple instances of the query.