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
import { Highlight } from "@/components/ui/highlight";<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?(props: ParentProps) => JSX.Element
Render your own element: a function that gets the part's props to spread on it.
- Type
(props: ParentProps) => JSX.Element
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.