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 "@/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>

Shadcn Highlight for React and Tailwind

Installation

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Demos

Custom Style

Multiple

Search Query

Squiggle

API Reference

Highlight

useHighlight