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 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
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?boolean
Use the provided child element as the default rendered element, combining their props and behavior.
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.