shadcn.io is not affiliated with official shadcn/ui
Framework
UI library
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
Usage
<script lang="ts">
import { Highlight } from "@/components/ui/highlight";
</script>
<p class="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
data-slot="highlight"
PropType
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.
asChild?Snippet<[PropsFn]>
Render your own element: a snippet that gets the part's props to spread on it.
- Type
Snippet<[PropsFn]>
class?string
Merged with the part's classes.
useHighlight
PropType
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.