Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Highlight for React Radix UI

Highlight search terms within text.

Framework
UI library

shadcn.io is a component library for building accessible web applications.

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/highlight.json

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

API Reference

Highlight

PropType
textstring
AttributeType

useHighlight