Text Highlighter: Free React + Tailwind Component

Hand-drawn highlighter marks swept across text, with underline, strike-through, box, and circle variants.

Sweeps a highlighter, underline, strike-through, box, or circle across inline text with a hand-drawn, canvas-like texture. It relies entirely on 2D geometric jitter and SVG path drawing, triggered on entering the viewport or on hover.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add text-highlighter.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Marker styleaction

Ink colorcolor

Hand-drawn jitterroughness

Highlighter thicknessthickness

0.68

Duration (s)duration

0.9

Random seedseed

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<TextHighlighter/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/text-highlighter.en.json

Or, once registries are configured in components.json, install it as @webberui/text-highlighter.

Usage

import { TextHighlighter } from "@/components/ui/text-highlighter";

<p>
  The{" "}
  <TextHighlighter color="#fde047">key point</TextHighlighter>{" "}
  in this sentence gets swept by the highlighter.
</p>

action switches between five marking styles: "highlight", "underline", "strike-through", "box", and "circle". Multiple passages can each set their own delay to reveal in sequence.

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The inline content to mark
`action`	`"highlight" \| "underline" \| "strike-through" \| "box" \| "circle"`	`"highlight"`	The marking style
`color`	`string`	`"#fde047"`	Ink color
`roughness`	`number`	`2`	Hand-drawn jitter amplitude (px)
`thickness`	`number`	`0.68`	Highlighter thickness as a proportion of the line height
`strokeWidth`	`number`	automatic	Explicit stroke width (px); derived from `action` when omitted
`duration`	`number`	`0.9`	Duration of the sweep animation (seconds)
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`trigger`	`"inView" \| "hover"`	`"inView"`	When the animation is triggered
`once`	`boolean`	`true`	Whether `inView` mode plays only once
`seed`	`number`	`1`	Random seed, which fixes the hand-drawn path
`mixBlendMode`	`string`	`multiply` for the highlighter	Blend mode

Accessibility

When the user has "reduce motion" enabled at the system level, the stroke skips the sweep animation and the final mark is shown directly
The marking layer is an SVG carrying aria-hidden, so the text itself stays natively readable and assistive technology is unaffected
The hand-drawn path is only drawn after client-side measurement, and SSR emits plain text only, avoiding hydration mismatches

Text Highlighter