shadcn.io is not affiliated with official shadcn/ui

Shadcn Highlight for React and Tailwind

Highlight search terms within text.

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

Installation

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

pnpm dlx shadcn@latest add https://kit.dev/r/highlight.json

npx shadcn@latest add https://kit.dev/r/highlight.json

yarn shadcn@latest add https://kit.dev/r/highlight.json

Install the following dependencies:

bun add @ark-ui/react

pnpm add @ark-ui/react

npm install @ark-ui/react

yarn add @ark-ui/react

Copy and paste the following code into your project.

components/ui/highlight.tsx

"use client";

import {
  Highlight as ArkHighlight,
  useHighlight as useArkHighlight,
} from "@ark-ui/react/highlight";
import type React from "react";
import { cn } from "@/lib/utils";

export const useHighlight = useArkHighlight;

export const Highlight = (props: React.ComponentProps<typeof ArkHighlight>) => {
  const { className, ...rest } = props;

  return (
    <ArkHighlight
      className={cn(
        "px-1",
        "bg-primary/20",
        "text-primary",
        "rounded-md",
        "box-decoration-clone",
        className
      )}
      data-slot="highlight"
      {...rest}
    />
  );
};

Update the import paths to match your project setup.

Usage

import { Highlight } from "@/registry/react/components/highlight";

<Highlight
  query="amet"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
/>

Examples

Multiple

Pass an array of strings to the query prop to highlight multiple substrings.

Search Query

Use the Highlight component to highlight search query results.

With Squiggle

Use a custom decoration like a wavy underline for a fancier highlight effect.

Custom Style

Use the className prop to customize the style of the highlighted text.

API Reference

Highlight

Prop	Type	Default
`query`	`string \| string[]`	required
`text`	`string`	required
`ignoreCase`	`boolean`	`false`
`exactMatch`	`boolean`	`false`
`className`	`string`	`""`

For a complete list of props, see the Ark UI documentation.

Format

Hitbox